ListBoxテキストを別のListBoxに移動し、サーバー側で値を取得するにはどうすればよいですか？

2つのリストボックスがあり、jqueryを使用してアイテムを別のリストボックスに移動したい。この部分はすでに完了しています。今私はボタンをクリックすると、サーバー側でそれらの移動された項目の値を取得したい。それがうまく働いている。この点で最大ListBoxテキストを別のListBoxに移動し、サーバー側で値を取得するにはどうすればよいですか？

$(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); 
       } 
      }); 
     });

：

は、ここに私のコード

<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のコードです。今度は、サーバー側の1stRightリストボックスに移動するテキストと値を取得します。

おかげ

出典

2016-12-21 mohamed faisal

あなたはjavascriptオブジェクトにとJSONを使用して非表示フィールドにして一覧表示します左から右操作ストアを終えた後、左と右の両方のリストを維持しなければなりません。これらの隠しフィールドを使用して、サーバー側で両方のjson文字列にアクセスできます。 –

@ MD'sコードを参照するいくつかのリンクを教えてください。ありがとう –

http://stackoverflow.com/questions/29076219/javascript-storing-array-of-objects-in-hidden-field –

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)); 
     } 

    }

出典

2016-12-22 10:09:28

ああ私の神！。これにより、毎回ページがリロードされます。私はこれを望んでいない。 –

あなたは正しいです。それはより良いajaxを使用する –

または代替方法：

 <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 .. 
    }

出典

2016-12-22 13:07:58

ListBoxテキストを別のListBoxに移動し、サーバー側で値を取得するにはどうすればよいですか？

答えて

関連する問題