使用添加/刪除項目功能實現兩個列表框的編輯器模板

Question

我的應用程序中有許多頁面，其中有兩個添加/刪除項目的列表框選項。如果list1是源，list2是目標，我只需要list2中的項目（新添加/刪除的項目）。所以想知道如何設計編輯器模板。以下是我最初的想法，任何人都可以看到問題（或）提供建議，使其更好。

1. 在包含所有list2 id的viewmodel中創建一個int []屬性。
2. 爲此屬性創建一個編輯器模板並創建一個包含指定標識項的列表框。由於list1的源代碼可以是任何東西，或者可以通過AJAX等各種方法填充，所以首選在編輯器模板中只包含list2。
3. 在編輯器模板中編寫一個JavaScript函數，向其添加newitem，如果已刪除，請提供該項目的源代碼。爲了在提交時提供修改，添加功能會在DOM中創建隱藏字段，並在刪除項目時刪除它們。

注意：他們不是listboxes他們是telerik網格控件，爲了簡單起見，我提到了listboxes但我只是需要id的listbox2。所以，我認爲listbox或gridview沒有區別。

Answer 1

我有一個應用程序幾乎相同的行爲，並選擇了相同的技術。但是，我的ViewModel包含List1和List2。

呼喚我的編輯模板做這樣的：

<div id="SoftwarePanel" class="collapsiblePanel"> 
     <h2>Request Software</h2> 
     @Html.EditorFor(m => m.Software) 
    </div> 

「軟件」，在這種情況下，是包含「AvailableItems」和「RequestedItems」性質的「RequestableList」類的一個實例。編輯器模板呈現出兩個彼此相鄰的列表，放置適當的按鈕用於在列表框之間來回移動項目並連接到javascript。

<table> 
    <tr> 
     <td> 
      <input type="text" id="avail@{@name}Filter" /> 
      <button type="button" id="avail@{@name}Clear" class="DualList_availClear dualListButton""> 
       X</button><br /> 
      @Html.ListBoxFor(m => m.AvailableItems, new MultiSelectList((from i in Model.AvailableItems where !Model.RequestedItems.Contains(i.Key) select i), "Key", "Value"), new { @class = "dualList" }) 
      <br /> 
      <span id="avail@{@name}Counter" class="countLabel"></span> 
      <select id="avail@{@name}Storage"> 
      </select> 
     </td> 
     <td> 
      <button id="to2@{@name}" type="button" class="dualListButton"> 
       &gt;</button><br /> 
      <button id="allTo2@{@name}" type="button" class="dualListButton"> 
       &gt;&gt;</button><br /> 
      <button id="allTo1@{@name}" type="button" class="DualList_Allto1 dualListButton"> 
       &lt;&lt;</button><br /> 
      <button id="to1@{@name}" type="button" class="dualListButton"> 
       &lt;</button><br /> 
     </td> 
     <td> 
      <input type="text" id="@{@name}RequestedFilter" /> 
      <button type="button" id="@{@name}RequestedClear" class="DualList_requestClear dualListButton"> 
       X</button><br /> 
      @Html.ListBoxFor(m => m.RequestedItems, new MultiSelectList((from i in Model.RequestedItems select new { key = i, value = Model.AvailableItems[i] }).AsEnumerable(), "key", "value"), new { @class = "dualList" }) 
      <br /> 
      <span id="@{@name}RequestedCounter" class="countLabel"></span> 
      <select id="@{@name}RequestedStorage"> 
      </select> 
     </td> 
    </tr> 
</table> 

更新：我使用由Justin Mead開發的DualListBox插件。 http://www.meadmiracle.com/dlb/DLBDocumentation.aspx

<script type="text/javascript"> 
     $(function() { 
      $.configureBoxes({ 
       box1View: '@ViewData.TemplateInfo.GetFullHtmlFieldId("AvailableItems")', 
       box1Storage: 'avail@{@name}Storage', 
       box1Filter: 'avail@{@name}Filter', 
       box1Clear: 'avail@{@name}Clear', 
       box1Counter: 'avail@{@name}Counter', 
       box2View: '@ViewData.TemplateInfo.GetFullHtmlFieldId("RequestedItems")', 
       box2Storage: '@{@name}RequestedStorage', 
       box2Filter: '@{@name}RequestedFilter', 
       box2Clear: '@{@name}RequestedClear', 
       box2Counter: '@{@name}RequestedCounter', 
       to1: 'to1@{@name}', 
       to2: 'to2@{@name}', 
       allTo1: 'allTo1@{@name}', 
       allTo2: 'allTo2@{@name}', 
       onItemsChanged: function() { 
        var opts = $('#@ViewData.TemplateInfo.GetFullHtmlFieldId("RequestedItems") option'); 
        var optIds = $.map(opts, function(e) { return $(e).val(); }); 
       } 
      }); 
     }); 
</script>