0

私のアプリケーションには、アイテムの追加/削除オプションを備えた 2 つのリストボックスを持つ多くのページがあります。list1 がソース、list2 が宛先の場合、list2 のアイテム (新しく追加/削除されたアイテム) のみが必要です。それで、エディター テンプレートをどのように設計するのか疑問に思っていました。以下は私の最初の考えです。誰でも問題を確認できますか (または)、改善するための提案を提供できますか?

  1. すべての list2 ID を保持する int[] プロパティを viewmodel に作成します。
  2. このプロパティのエディター テンプレートを作成し、指定された ID のアイテムを含むリスト ボックスを作成します。list1 のソースは何でもかまいませんし、AJAX などのさまざまな方法で入力することもできるため、エディター テンプレートには list2 のみを含めることをお勧めします。
  3. エディター テンプレート内に JavaScript 関数を記述して、そこに newitem を追加し、削除された場合はアイテムをソースに提供します。また、送信時に変更を提供するために、add 関数は DOM に隠しフィールドを作成し、アイテムが削除されるとそれらを削除します。

注: それらはテレリック グリッド コントロールであるリストボックスではありません。簡単にするためにリストボックスについて言及しましたが、必要なのは listbox2 の ID だけです。ですから、リストボックスでもグリッドビューでも違いはないと思います。

4

1 に答える 1

0

ほぼ同じ動作のアプリケーションがあり、同じ手法を選択しました。ただし、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>
于 2012-08-31T14:34:42.733 に答える