Question

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

在viewmodel中创建一个int []属性，该属性包含所有list2 id＆＃39; s。
为此属性创建一个编辑器模板，并创建一个包含指定ID的项目的列表框。由于list1源可以是任何东西，或者可以通过各种方法（如AJAX）填充，因此首选只在编辑器模板中包含list2。
在编辑器模板中编写javascript函数，向其中添加newitem，如果删除，则将项目提供给源代码。并且为了在提交时提供修改，add函数在DOM中创建隐藏字段，并在删除项目时删除它们。

注意：它们不是列表框，它们是telerik网格控件，为简单起见，我提到了列表框，但我只需要列出listbox2的id。所以，我认为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>

使用添加/删除项功能为两个列表框实现编辑器模板

1 个答案: