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创建的行数，每当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>

第一次点击 使用谷歌Chrome的开发者工具，我看到响应是这样的。哪个应该是正确的。当我提交表单时，模型活页夹会选择输入的数据。

<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').html(data);中使用$('#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>

最后，我的问题 有没有办法在生成的响应中获得第二行（索引[1]）然后使用jQuery的append而不是用新行替换整个html？这样做的正确方法是什么？我知道我很接近，但是一点指导会有很长的路要走。：）

Answer 1

我可能不会回到服务器并以这种方式获取所有行的整个视图。

MVC在发布表单后解析发送的数据的方式是发回的元素数组（由元素的name属性中[]括号中的数字指定。

我过去的方式是通过jquery克隆行，并使用正则表达式函数将[0]替换为[1]并清除值。然后只需追加它。

每次点击添加时，这也可以避免您对服务器进行调用。

动态添加的输入元素在创建新输入元素时不保留输入的数据

1 个答案: