web-dev-qa-db-ja.com

MVC 4リストモデルバインディングはどのように機能しますか？

フォームの入力セットをMVC 4のListにバインドする場合、inputname属性の次の命名規則が機能することを知っています。

<input name="[0].Id" type="text" />
<input name="[1].Id" type="text" />
<input name="[2].Id" type="text" />

しかし、モデルバインダーがどの程度寛容であるかについては興味があります。たとえば、次の場合はどうですか：

<input name="[0].Id" type="text" />
<input name="[3].Id" type="text" />
<input name="[8].Id" type="text" />

モデルバインダーはこれをどのように処理しますか？ nullで長さ9のListにバインドしますか？または、長さ3のListにバインドしますか？それとも完全に窒息しますか？

なぜ気にするのか

ユーザーがフォームに行を追加したり、フォームから行を削除したりできる動的フォームを実装したい。したがって、ユーザーが合計8行のうち2行を削除した場合、後続のすべての入力の番号を変更する必要があるかどうかを知りたいです。

c#.netasp.net-mvcasp.net-mvc-4model-binding
58
Eric

コレクションで使用する特定のワイヤ形式があります。これについては、Scott Hanselmanのブログで説明しています。

http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx

Phil Haackの別のブログエントリで、これについて説明しています。

http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

最後に、ここで必要なことを正確に行うブログエントリ：

http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

49
Erik Funkenbusch

上記のブログにリンクされているこのアプローチに従って、いくつかの詳細を追加しました。特に、動的に任意の数の行を追加したいが、AJAXそのため（投稿でのみフォームを送信するようにしたかったのですが）連続したIDを維持することも心配したくありませんでした。開始日と終了日のリストをキャプチャしていました。

モデルの表示：

_public class WhenViewModel : BaseViewModel {
    public List<DateViewModel> Dates { get; set; }
    //... Other properties
}
_

開始/終了日ビューモデル：

_public class DateViewModel {
    public string DateID { get; set; }
    public DateTime? StartDate { get; set; }
    public DateTime? EndDate { get; set; }
}
_

次に、それらをページで使用します（日付ピッカー付き）：

_<div class="grid-8-12 clear" id="DatesBlock">
@{
    foreach (DateViewModel d in Model.Dates) {
        @:<div class="grid-5-12 left clear">
            @Html.Hidden("Dates.Index", d.DateID)
            @Html.Hidden("Dates[" + d.DateID + "].DateID", d.DateID) //ID again to populate the view model
            @Html.TextBox("Dates[" + d.DateID + "].StartDate", 
                          d.StartDate.Value.ToString("yyyy-MM-dd"))
        @:</div>
        @:<div class="grid-5-12">
            @Html.TextBox("Dates[" + d.DateID + "].EndDate", 
                          d.EndDate.Value.ToString("yyyy-MM-dd"))
        @:</div>

        <script type="text/javascript">
            $('input[name="Dates[@d.DateID].StartDate"]')
               .datepicker({ dateFormat: 'yy-mm-dd'});
            $('input[name="Dates[@d.DateID].EndDate"]')
               .datepicker({dateFormat: 'yy-mm-dd'});
        </script>
     }
}
</div>
<a href="#" onclick="AddDatesRow()">Add Dates</a>
_

上記の@ErikTheVikingsの投稿にリンクされているブログ投稿が説明しているように、コレクションは、ページ上のコレクション内の各エントリに対して繰り返される隠し要素@Html.Hidden("Dates.Index", d.DateID)によって作成されます。

AJAXを使用せずに任意に行を追加して、コレクション内の1つの「行」/アイテムのテンプレートを含む隠しdivを作成することでサーバーにデータをポストバックしました。

非表示の「テンプレート」行：

_<div id="RowTemplate" style="display: none">
    <div class="grid-5-12 clear">
        @Html.Hidden("Dates.Index", "REPLACE_ID")
        @Html.Hidden("Dates[REPLACE_ID].DateID", "REPLACE_ID") 
        @Html.TextBox("Dates[REPLACE_ID].StartDate", "")
    </div>
    <div class="grid-5-12">
        @Html.TextBox("Dates[REPLACE_ID].EndDate", "")
    </div>
</div>
_

次に、テンプレートを複製するjQueryを使用し、新しい行に使用するランダムIDを提供し、現在表示されている複製行を上記のdivに追加します。

jプロセスを完了するためのクエリ：

_<script type="text/javascript">
    function AddDatesRow() {
        var tempIndex = Math.random().toString(36).substr(2, 5);
        var template = $('#RowTemplate');
        var insertRow = template.clone(false);
        insertRow.find('input').each(function(){ //Run replace on each input
            this.id = this.id.replace('REPLACE_ID', tempIndex);
            this.name = this.name.replace('REPLACE_ID', tempIndex);
            this.value = this.value.replace('REPLACE_ID', tempIndex);
        });
        insertRow.show();
        $('#DatesBlock').append(insertRow.contents());

        //Attach datepicker to new elements
        $('input[name="Dates['+tempIndex+'].StartDate"]')
            .datepicker({dateFormat: 'yy-mm-dd' });
        $('input[name="Dates['+tempIndex+'].EndDate"]')
            .datepicker({dateFormat: 'yy-mm-dd' });
    }
</script>
_

結果のJSFiddleの例： http://jsfiddle.net/mdares/7JZh4/

16
Matthew

次のような動的リストがあります。

<ul id="okvedList" class="unstyled span8 editableList">
<li>
    <input data-val="true" data-val-required="The Guid field is required." id="Okveds_0__Guid" name="Okveds[0].Guid" type="hidden" value="2627d99a-1fcd-438e-8109-5705dd0ac7bb">
    --//--
</li>

行（li要素）を追加または削除すると、アイテムを並べ替える必要があります

    this.reorderItems = function () {
        var li = this.el_list.find('li');

        for (var i = 0; i < li.length; i++) {
            var inputs = $(li[i]).find('input');

            $.each(inputs, function () {
                var input = $(this);

                var name = input.attr('name');
                input.attr('name', name.replace(new RegExp("\\[.*\\]", 'gi'), '[' + i + ']'));

                var id = input.attr('id');
                input.attr('id', id.replace(new RegExp('_.*__', 'i'), '_' + i + '__'));
            });
        }
    };

このリストは、クライアントサイドから単純なHtml.BeginFromに配置され、サーバーサイドのアクションパラメーターのList

3
Evgeny Popov

過去にも同様の問題に直面しており、KnockoutJSを使用してこのようなシナリオを処理しています。

基本的に、KnockoutはコレクションをJSON文字列で送信し、コントローラーでデシリアライズしました。

詳細： http://learn.knockoutjs.com/#/?tutorial=collections

1
andri

Chromeブラウザーを使用して[戻る]ボタンをクリックすると、Chromeブラウザーで動的に設定された値が適切に処理されなかったときにtype = "hidden"の入力が見つかります。

多分私たちは変えることができます

<input type="hidden" name="Detes.Index" value="2016/01/06" />

に

<div style="display: none">
    <input type="text" name="Detes.Index" value="2016/01/06" />
</div>

フォームの詳細： Chromeはブラウザの履歴で使用するために非表示のフォームフィールド値をキャッシュしませんhttp://haacked.com/archive/2008/10/23/model-binding-to -a-list.aspx /

0
thomas wu