将项目从一个ListBox移至另一个，并在ListBox中获取项目

Question

我有一个ASP.NET向导控件。 第二步，我有两个ListBoxes。 页面加载时，将从服务器填充第一个ListBox项。

然后，用户从ListBox1中选择数据并将其移动到ListBox2。 然后，用户单击向导的NEXT按钮。 用户以某种方式单击下一步时，ListBox2为空。

我使用jQuery将数据从ListBox1移动到ListBox2。

<td class="style9">
                <asp:ListBox ID="registerCompCats" runat="server" CssClass="ListBox1"
                ClientIDMode="Static" DataTextField="value" DataValueField="key"
                Rows="5" size="5" style="width:135px; size:5px;" SelectionMode="Multiple" ></asp:ListBox>
                    &nbsp;&nbsp;&nbsp;</td>
                <td class="style1">
                    <table>
                        <tr>
                            <td style="padding-left: 20px;">
                                <img id="addCat" onclick="return addCat_onclick()" 
                        src="images/buttons/btn_addCat.jpg" title="Add Category" />
                            </td>
                        </tr>
                        <tr>
                            <td style="padding-left: 20px;">
                                <img id="removeCat" 
                        src="images/buttons/btn_removeCat.jpg" title="Remove Category" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                <asp:ListBox ID="registerCompAcats" runat="server" CssClass="ListBox2"
                ClientIDMode="Static" DataTextField="value" DataValueField="key"
                Rows="5" size="5" style="width:135px; size:5px; margin-top: 0px;" SelectionMode="Multiple" ></asp:ListBox>
                    &nbsp;<asp:RequiredFieldValidator ID="registerCompAcatsValidator" runat="server" 
                        ControlToValidate="registerCompAcats" Display="None" ErrorMessage="categories"></asp:RequiredFieldValidator></td>

Answer 1

事件验证

如果您搞砸了列表框和/或在客户端下拉列表的可用选项（即使用jQuery或其他方式），则内置的ASP .NET表单验证（称为“事件验证”）将启动并抛出一个例外，因为您提交的表单选项与表单最初呈现控件时所提供的选项不同。 若要解决此问题，您必须在.aspx页的顶部执行此操作：

<%@ Page EnableEventValidation="false" %>

请记住，如果执行此操作，则需要自己对下拉列表和列表框执行表单验证。

观看状态

每次将页面发布回服务器时，这些控件都有0个选择。 是的，您会在HTML中看到这些选择，但是在服务器上，它们的选择为0。 如果在这些控件上启用了viewstate，则ASP .NET框架将在页面生命周期内自动添加上一页呈现中的选择。 这意味着，由于registerCompAcats控件在第一页呈现中没有选择，因此将页面发布回服务器时，它仍然没有任何选择。

这些asp:ListBox控件在HTML中呈现为<select>元素。 这些工作方式是它们仅将在这些列表框中选择的值发布到服务器。 这意味着无论选择什么，您都只会知道用户在表单发布的这些列表框中选择的项目。

可能的解决方案

有几种方法可以解决此问题。 我将概述几个。

方法1：回发以将项目添加到其他列表框

这可能是最简单但效率最低的。 每次用户单击“添加类别”按钮时，都可能导致页面回发，而不是使用jQuery将项目从一个列表框移到另一个列表框。 这允许服务器端代码控制每个框中的选项，并且viewstate可以帮助您。 您也可以在页面上重新启用事件验证，通常这是个好主意。

<asp:ListBox id="lb1" runat="server" />
<asp:Button id="btnAdd" runat="server" />
<asp:ListBox id="lb2" runat="server" />

对于btnAdd.Click事件：

Sub btnAdd_Click(sender As Object, args As EventArgs) Handles btnAdd.Click

  lb2.Items.AddRange(lb1.Items.Where(Function(i) i.Selected).ToArray())

End Sub

方法2：使用jQuery添加项目； 在提交之前操纵帖子

您需要关闭事件验证，就像我在上面解释的那样。 使用jQuery将项目从一个列表移动到另一个列表-很好。 但是，在实际在页面上引起回发之前，您将使用jQuery收集第二个列表框中的所有值，并将这些值放在runat="server"的隐藏字段中。

<asp:ListBox id="lb1" runat="server" />
<input type="button" value="Add" onclick="addCategory();" />
<asp:ListBox id="lb2" runat="server" />
<input type="hidden" id="hdnSelectedCategories" runat="server" />
<asp:Button id="btnSubmit" runat="server" onclientclick="preSubmit();" />

jQuery部分：

<script type="text/javascript">

  var lb1, lb2, hdnSelectedCategories;

  $(function() {
    lb1 = $('#<%=lb1.ClientID %>');
    lb2 = $('#<%=lb2.ClientID %>');
    hdnSelectedCategories = $('#<%=hdnSelectedCategories.ClientID %>');
  });

  function addCategory() {
    lb2.append(lb1.find('option:selected'));
  }

  function preSubmit() {
    // collect all the values from the lb2 listbox into an array
    var values = [];
    lb2.find('option').each(function(index, item) {
      values.push($(item).val());
    });
    // now put the contents of the array in the hidden input, separated by commas
    hdnSelectedCategories.val(values.join(','));
  }
</script>

现在在您的代码后面，针对btnSubmit.Click事件：

Sub btnSubmit_Click(sender As Object, args As EventArgs) Handles btnSubmit.Click

  Dim values As String() = hdnSelectedCategories.Value.Split(",")

  'TODO: Profit'

End Sub

在这种方法中，您可能还需要关闭列表框上的Viewstate，因为这会给请求增加膨胀，并在用户单击“提交”按钮后重置列表框。

免责声明

我对这种代码的测试非常少-只是我的头上。 但是希望有关事件验证，视图状态和回发页面生命周期的说明将帮助您了解实际情况，并可以提出适合您情况的解决方案。