Question

我有两个列表框，我想使用jquery将项目从另一个列表框移动。这部分已经完成。现在，我想在单击按钮时在服务器端获取那些移动的Item值。

这是我的代码

<div class="row" style="padding-top:10px;">
   <div class="col-lg-3">
       <asp:ListBox ID="lstLeft" class="form-control" runat="server" SelectionMode="Multiple" Height="220px">
           <asp:ListItem Value="transactions.storeid as StoreID">StoreID</asp:ListItem>
           <asp:ListItem Value="YEAR(transactions.Time) Year">Year</asp:ListItem>
           <asp:ListItem Value="MONTH(transactions.Time) Month">Month</asp:ListItem>
           <asp:ListItem Value="transactionsEntry.TransactionNumber">TransactionNumber</asp:ListItem>
           <asp:ListItem Value="transactionsEntry.Quantity">Quantity</asp:ListItem>
           <asp:ListItem Value="items.ItemLookupCode">ItemLookupCode</asp:ListItem>
           <asp:ListItem Value="CONVERT(varchar, CAST(transactionsEntry.Price AS money), 1)*transactionsEntry.Quantity ExtendedPrice">ExtendedPrice</asp:ListItem>
           <asp:ListItem Value="departments.Name as DepartmentName">DepartmentName</asp:ListItem>
           <asp:ListItem Value="categories.Name as CategoryName">CategoryName</asp:ListItem>
           <asp:ListItem Value="items.SubDescription1">SubDescription1</asp:ListItem>
           <asp:ListItem Value="suppliers.SupplierName">SupplierName</asp:ListItem>
           <asp:ListItem Value="suppliers.Code">Code</asp:ListItem>
       </asp:ListBox>
   </div>
   <div class="col-lg-1">
       <input type="button" id="left" value="<<" />
       <input type="button" id="right" value=">>" />
   </div>
   <div class="col-lg-3">
       <asp:ListBox ID="lstRight" runat="server" SelectionMode="Multiple" Width="100%" Height="220"></asp:ListBox>
   </div>
</div>
<asp:Button ID="btnSearch" class="btn btn-info" runat="server" Text="SEARCH" Width="100" OnClick="btnSearch_Click" />

jquery代码：

$(function () {
            $("#left").bind("click", function () {
                var options = $("[id*=lstRight] option:selected");
                for (var i = 0; i < options.length; i++) {
                    var opt = $(options[i]).clone();
                    $(options[i]).remove();
                    $("[id*=lstLeft]").append(opt);
                }
            });
            $("#right").bind("click", function () {
                var options = $("[id*=lstLeft] option:selected");
                for (var i = 0; i < options.length; i++) {
                    var opt = $(options[i]).clone();
                    $(options[i]).remove();
                    $("[id*=lstRight]").append(opt);
                }
            });
        });

到此为止它工作正常。现在我想获取移动到服务器端1stRight列表框的文本和值。

由于

Answer 1

Html代码：

 <div class="row" style="padding-top: 10px;">
        <div class="col-lg-3">
            <asp:ListBox ID="lstLeft" class="form-control" runat="server" SelectionMode="Multiple" Height="220px">
                <asp:ListItem Value="transactions.storeid as StoreID">StoreID</asp:ListItem>
                <asp:ListItem Value="YEAR(transactions.Time) Year">Year</asp:ListItem>
                <asp:ListItem Value="MONTH(transactions.Time) Month">Month</asp:ListItem>
                <asp:ListItem Value="transactionsEntry.TransactionNumber">TransactionNumber</asp:ListItem>
                <asp:ListItem Value="transactionsEntry.Quantity">Quantity</asp:ListItem>
                <asp:ListItem Value="items.ItemLookupCode">ItemLookupCode</asp:ListItem>
                <asp:ListItem Value="CONVERT(varchar, CAST(transactionsEntry.Price AS money), 1)*transactionsEntry.Quantity ExtendedPrice">ExtendedPrice</asp:ListItem>
                <asp:ListItem Value="departments.Name as DepartmentName">DepartmentName</asp:ListItem>
                <asp:ListItem Value="categories.Name as CategoryName">CategoryName</asp:ListItem>
                <asp:ListItem Value="items.SubDescription1">SubDescription1</asp:ListItem>
                <asp:ListItem Value="suppliers.SupplierName">SupplierName</asp:ListItem>
                <asp:ListItem Value="suppliers.Code">Code</asp:ListItem>
            </asp:ListBox>
        </div>
        <div class="col-lg-1">

            <asp:Button ID="btnLeft" runat="server" Text="&lt;&lt; Server" OnClick="btnLeft_Click" />
            <asp:Button ID="btnRight" runat="server" Text="&gt;&gt; Server" OnClick="btnRight_Click"/>
        </div>
        <div class="col-lg-3">
            <asp:ListBox ID="lstRight" runat="server" SelectionMode="Multiple" Width="100%" Height="220"></asp:ListBox>
        </div>
    </div>

代码背后的代码：

    protected void btnLeft_Click(object sender, EventArgs e)
    {
        Move(lstRight, lstLeft);
    }
    protected void btnRight_Click(object sender, EventArgs e)
    {
        Move(lstLeft, lstRight);
    }
    private void Move(ListBox from, ListBox to)
    {
        var selected = from.Items.OfType<ListItem>().Where(x => x.Selected);
        var listItems = selected as ListItem[] ?? selected.ToArray();

        foreach (ListItem item in listItems)
        {
            to.Items.Add(new ListItem(item.Text, item.Value));
        }
        from.ClearSelection();

        foreach (var item in listItems)
        {
            from.Items.Remove(new ListItem(item.Text, item.Value));
        }

    }

Answer 2

或替代方式：

        <div class="row" style="padding-top: 10px;">
        <div class="col-lg-3">
            <asp:ListBox ID="lstLeft" class="form-control" runat="server" SelectionMode="Multiple" Height="220px">
                <asp:ListItem Value="transactions.storeid as StoreID">StoreID</asp:ListItem>
                <asp:ListItem Value="YEAR(transactions.Time) Year">Year</asp:ListItem>
                <asp:ListItem Value="MONTH(transactions.Time) Month">Month</asp:ListItem>
                <asp:ListItem Value="transactionsEntry.TransactionNumber">TransactionNumber</asp:ListItem>
                <asp:ListItem Value="transactionsEntry.Quantity">Quantity</asp:ListItem>
                <asp:ListItem Value="items.ItemLookupCode">ItemLookupCode</asp:ListItem>
                <asp:ListItem Value="CONVERT(varchar, CAST(transactionsEntry.Price AS money), 1)*transactionsEntry.Quantity ExtendedPrice">ExtendedPrice</asp:ListItem>
                <asp:ListItem Value="departments.Name as DepartmentName">DepartmentName</asp:ListItem>
                <asp:ListItem Value="categories.Name as CategoryName">CategoryName</asp:ListItem>
                <asp:ListItem Value="items.SubDescription1">SubDescription1</asp:ListItem>
                <asp:ListItem Value="suppliers.SupplierName">SupplierName</asp:ListItem>
                <asp:ListItem Value="suppliers.Code">Code</asp:ListItem>
            </asp:ListBox>
        </div>
        <div class="col-lg-1">
            <input type="button" id="toLeft" value="<<" />
            <input type="button" id="toRight" value=">>" />
        </div>
        <div class="col-lg-3">
            <asp:ListBox ID="lstRight" runat="server" SelectionMode="Multiple" Width="100%" Height="220"></asp:ListBox>
        </div>
    </div>

javascript代码：

     function SendForm(controlName) {
        var from;
        var to;
        var list = [];
        if (controlName == 'toLeft') {
            from = $("[id*=lstRight] option:selected");
            to = $("[id*=lstLeft]");
        } else {
            from = $("[id*=lstLeft] option:selected");
            to = $("[id*=lstRight]");
        }
        for (var i = 0; i < from.length; i++) {
            var opt = $(from[i]).clone();
            list.push(opt[0].innerHTML);
            $(from[i]).remove();
            to.append(opt);
        }
        PageMethods.SendForm(list, controlName, OnSucceeded, OnFailed);
    }

    function OnSucceeded() {
        //..
    }

    function OnFailed(error) {
        // Alert user to the error.
        alert(error.get_message());
    }


    $(function () {
        $("#toLeft").bind("click", function () {
            SendForm('toLeft');
        });
        $("#toRight").bind("click", function () {
            SendForm('toRight');
        });
    });

代码背后：

  [WebMethod]
  public static void SendForm(string[] optionValues, string controlName)
  {
      // something ..
  }

如何将一个ListBox文本移动到另一个ListBox并获取服务器端的值？

2 个答案: