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>

在第一次点击 使用谷歌浏览器的开发者工具时，我看到响应是这样的。这应该是正确的。当我提交表单时，模型绑定器会拾取输入的数据。

<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]）上输入的数据被丢弃并替换为新初始化的数据，因为我$('#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>

最后，我的问题 有没有办法[1]在生成的响应中只获取第二行（索引）然后使用 jQueryappend而不是用新行替换整个html行？这样做的正确方法是什么？我知道我很接近，但一点指导会大有帮助。:)

4

1 回答 1

0

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

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

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

这也将使您不必在每次单击添加时都调用服务器。

于 2013-02-02T04:02:53.013 回答