當創建新的輸入元素時，動態添加的輸入元素不會保留輸入數據

Question

我創建了一個測試應用程序以瞭解有關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創建的行數，每次事件觸發時我都會增加行數。

$("#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> 

第一次點擊 使用谷歌瀏覽器的開發者工具，我看到響應是這樣的。這應該是正確的。當我提交表單時，模型聯編程序會提取輸入的數據。

<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> 

第二次點擊 第一組輸入元素的輸入的數據（指數[0]）被丟棄，取而代之的，因爲我在我的JavaScript，而不是使用$('#itemRates').append(data);新$('#itemRates').html(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的append，而不是更換整個html新行？這樣做的正確方法是什麼？我知道我很接近，但有一點指導會很長的路要走。 :)

Answer 1

我可能不會回到服務器，並通過這種方式獲取所有行的整個視圖。

一旦發佈表單，MVC解析發送的數據的方式是返回的元素數組（通過元素名稱屬性[]中的數字指定）。

我過去的做法是通過jquery克隆該行，並使用正則表達式函數將[0]替換爲[1]，並將值也清除出去。然後只需追加它。

這樣可以讓您在每次點擊添加時都可以避免對服務器進行調用。