將項目從一個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，因為這會給請求增加膨脹，並在用戶單擊“提交”按鈕后重置列表框。

免責聲明

我對這種代碼的測試非常少-只是我的頭上。 但是希望有關事件驗證，視圖狀態和回發頁面生命周期的說明將幫助您了解實際情況，並可以提出適合您情況的解決方案。