0

我的应用程序中有很多页面，其中有两个带有添加/删除项目选项的列表框。如果 list1 是源，list2 是目标，我只需要 list2 中的项目（新添加/删除的项目）。所以想知道如何设计编辑器模板。以下是我最初的想法，任何人都可以看到问题（或）提供建议以使其变得更好。

  1. 在包含所有 list2 id 的 viewmodel 中创建一个 int[] 属性。
  2. 为该属性创建一个编辑器模板，并创建一个包含指定 id 项的列表框。由于 list1 源可以是任何东西，也可以通过 AJAX 等各种方法填充，因此最好在编辑器模板中仅包含 list2。
  3. 在编辑器模板中编写一个 javascript 函数，将 newitem 添加到其中，如果删除，则将项目提供给源。为了在提交时提供修改，add 函数在 DOM 中创建隐藏字段，并在删除项目时删除它们。

注意：它们不是列表框，它们是 Telerik 网格控件，为简单起见，我提到了列表框，但我只需要 listbox2 的 id。所以，我认为列表框或网格视图没有区别。

4

1 回答 1

0

我有一个行为几乎相同的应用程序并选择了相同的技术。但是，我的 ViewModel 同时包含 List1 和 List2。

调用我的编辑器模板是这样完成的：

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

在这种情况下，“软件”是“RequestableList”类的一个实例，其中包含“AvailableItems”和“RequestedItems”的属性。编辑器模板使两个列表彼此相邻，放置适当的按钮用于在列表框之间来回移动项目并连接 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>
于 2012-08-31T14:34:42.733 回答