1

asp.net mvcについて詳しく知るために、テストアプリを作成しました。このアプリでは、部分ビューとエディターテンプレートを使用して、jQueryを介して「無制限」の数の入力を追加できるようになっています。新しい入力要素を追加することができましたが、新しい入力要素を追加するときに、ユーザーから入力されたデータを保持する際に問題が発生します。

私の強くタイプされた見方

@model TestApp.Models.ItemViewModel
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <div class="editor-label">
        @Html.LabelFor(model => model.ItemName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.ItemName)
        @Html.ValidationMessageFor(model => model.ItemName)

    </div>
    <div class="editor-label">
        Click to add rates
    </div>
    <div class="editor-field">
        <a href="#" id="NewRate">Add Rate</a>
        <input type="hidden" value="0" id="rateCounter" />
    </div>
    <br />
    <span id="itemRates"></span>
    <p>
        <input type="submit" value="Save" />
    </p>
}

私のjavascript ユーザーが上の要素をクリックすると、NewRateこのjQueryを起動して部分ビューを取得します。また、イベントが発生rateCounterするたびにインクリメントする非表示の要素を介して、ユーザーが作成した行数を追跡します。click

$("#NewRate").click(function () {
    var count = parseInt($("#rateCounter").val());
    $("#rateCounter").val(count + 1);
    $.ajax({
        type: 'GET',
        url: '/Item/AddRate',
        data: {
            rateCount: $("#rateCounter").val()
        },
        success: function (data) {
            $('#itemRates').html(data);
        }
    });
});

マイコントローラー これは、作成する行数を受け入れ、部分ビューに渡します。

public PartialViewResult AddRate(int rateCount)
{
    var itemVM = new ItemViewModel { Rates = new List<ItemRatesViewModel>() };
    for (int i = 0; i < RateCount; i++)
    {
        itemVM.Rates.Add(new ItemRatesViewModel());
    }            

    return PartialView("_ItemRates", itemVM);
}

私の強く型付けされた部分ビュー 部分ビューはエディターテンプレートを使用するだけです

@model TestApp.Models.ItemViewModel
@Html.EditorFor(model => model.Rates)

私 のエディターテンプレートエディターテンプレートは基本的に各レートを表示します

@model TestApp.Models.ItemRatesViewModel
<tr>
    <td>
        @Html.EditorFor(model => model.Rate)
        @Html.ValidationMessageFor(model => model.Rate)
    </td>
    <td>
        @Html.EditorFor(model => model.StartDate)
        @Html.ValidationMessageFor(model => model.StartDate)
    </td>
    <td>
        @Html.EditorFor(model => model.EndDate)
        @Html.ValidationMessageFor(model => model.EndDate)
    </td>
</tr>

最初のクリック でGoogleChromeの開発者ツールを使用すると、応答は次のようになります。どちらが正しいはずです。フォームを送信すると、モデルバインダーが入力されたデータを取得します。

<tr>
    <td>
        <input class="text-box single-line" data-val="true" data-val-number="The field Rate must be a number." data-val-required="*" id="Rates_0__Rate" name="Rates[0].Rate" type="text" value="0.00" />
        <span class="field-validation-valid" data-valmsg-for="Rates[0].Rate" data-valmsg-replace="true"></span>
    </td>
    <td>
        <input data-datepicker-future="True" data-val="true" data-val-required="*" id="Rates_0__StartDate" name="Rates[0].StartDate" type="text" value="01/01/0001" />
        <span class="field-validation-valid" data-valmsg-for="Rates[0].StartDate" data-valmsg-replace="true"></span>
    </td>
    <td>
        <input data-datepicker-future="True" data-val="true" data-val-required="*" id="Rates_0__EndDate" name="Rates[0].EndDate" type="text" value="01/01/0001" />
        <span class="field-validation-valid" data-valmsg-for="Rates[0].EndDate" data-valmsg-replace="true"></span>
    </td>
</tr>

2回目 のクリックで、入力要素（インデックス[0]）の最初のセットに入力されたデータは破棄さ$('#itemRates').html(data);れ、JavaScriptでの代わりに使用しているため、新しく初期化されたデータに置き換えられ$('#itemRates').append(data);ます。以下は私が得るものです。フォームを送信すると、モデルバインダーRatesは、ビューモデルのコレクションに入力されたデータを正しく取得します。

<tr>
    <td>
        <input class="text-box single-line" data-val="true" data-val-number="The field Rate must be a number." data-val-required="*" id="Rates_0__Rate" name="Rates[0].Rate" type="text" value="0.00" />
        <span class="field-validation-valid" data-valmsg-for="Rates[0].Rate" data-valmsg-replace="true"></span>
    </td>
    <td>
        <input data-datepicker-future="True" data-val="true" data-val-required="*" id="Rates_0__StartDate" name="Rates[0].StartDate" type="text" value="01/01/0001" />
        <span class="field-validation-valid" data-valmsg-for="Rates[0].StartDate" data-valmsg-replace="true"></span>
    </td>
    <td>
        <input data-datepicker-future="True" data-val="true" data-val-required="*" id="Rates_0__EndDate" name="Rates[0].EndDate" type="text" value="01/01/0001" />
        <span class="field-validation-valid" data-valmsg-for="Rates[0].EndDate" data-valmsg-replace="true"></span>
    </td>
</tr>

<tr>
    <td>
        <input class="text-box single-line" data-val="true" data-val-number="The field Rate must be a number." data-val-required="*" id="Rates_1__Rate" name="Rates[1].Rate" type="text" value="0.00" />
        <span class="field-validation-valid" data-valmsg-for="Rates[1].Rate" data-valmsg-replace="true"></span>
    </td>
    <td>
        <input data-datepicker-future="True" data-val="true" data-val-required="*" id="Rates_0__StartDate" name="Rates[1].StartDate" type="text" value="01/01/0001" />
        <span class="field-validation-valid" data-valmsg-for="Rates[1].StartDate" data-valmsg-replace="true"></span>
    </td>
    <td>
        <input data-datepicker-future="True" data-val="true" data-val-required="*" id="Rates_0__EndDate" name="Rates[1].EndDate" type="text" value="01/01/0001" />
        <span class="field-validation-valid" data-valmsg-for="Rates[1].EndDate" data-valmsg-replace="true"></span>
    </td>
</tr>

最後に、私の質問生成された応答 の2番目の行（インデックス）だけを取得し、全体を新しい行に置き換える代わりに[1]jQueryを使用する方法はありますか？これを行う正しい方法は何ですか？私は近くにいることを知っていますが、少しのガイダンスが大いに役立つでしょう。:)appendhtml

4

1 に答える 1

0

サーバーに戻って、この方法ですべての行を含むビュー全体を取得することはおそらくないでしょう。

フォームを投稿した後にMVCが送信されたデータを解析する方法は、返送された要素の配列です（要素のname属性の[]括弧内の数字で指定されます。

私が過去に行った方法は、jqueryによって行のクローンを作成し、正規表現関数を使用して[0]を[1]に置き換え、値もクリアしました。次に、それを追加します。

これにより、追加がクリックされるたびにサーバーを呼び出す必要もなくなります。

于 2013-02-02T04:02:53.013 に答える