Question

我有一个带有EditorTemplate的小项目。我展示了一些最初位于List<T>的项目，但我希望能够在用户按下按钮时添加项目。

通常我将这些项目添加到视图中

@for (int i = 0; i < Model.Models.Count; i++)
{
    @Html.EditorFor(model => model.Models[i], "_AddArticleFullQuantity");
}

当我想动态添加项目时，我尝试过创建一个使用ajax来调用服务器的按钮

<button id="addButton" type="button" class="btn btn-default btn-block" onclick="m_GUIRequests.AddArtikelToDiv()">add Article</button>

GUIRequests.prototype.AddArtikelToDiv = function ()
{
    this.Request.CallAjax("/NewItemDelivery/GetPartialView_AddArticleFullQuantity", "", GUIRequests.AddToView);
}

GUIRequests.AddToView = function (html) {
    $("#addedItems").append(html);
}

该按钮向我的控制器发出ajax调用，该调用将执行以下操作

public ActionResult GetPartialView_AddArticleFullQuantity()
{
    WrongItemsReceivedModel model = new WrongItemsReceivedModel();
    ModelContainer<WrongItemsReceivedModel> container = (ModelContainer<WrongItemsReceivedModel>)TempData["ModelContainer"];
    container.Add(model);

    return PartialView("~/views/Shared/EditorTemplates/_AddArticleFullQuantity.cshtml", container.Models[0]);
}

最后，我得到了我的预期，它会告诉我我的模板，但最初从列表中显示的项目已编号

通常情况下，我有以下元素：

<input class="form-control col-md-6 text-box single-line" data-val="true" data-val-required="MESSAGE" id="Models_0__ModelNumberID" name="Models[0].ModelNumberID" onchange="m_GUIRequests.SetWrongItemsReceivedValues()" type="text" value="">

但我明白了：

<input class="form-control col-md-6 text-box single-line" data-val="true" data-val-required="MESSAGE" id="ModelNumberID" name="ModelNumberID" onchange="m_GUIRequests.SetWrongItemsReceivedValues()" type="text" value="">

我认为是因为我在EditorFor＆＃34;命令＆＃34;中加了一个。但另一个被添加为PartialView。有没有什么方法可以添加一个EditorFor元素，以便我的逻辑不会破坏？

Answer 1

为了在ASP.NET MVC中编辑可变长度列表，我建议阅读following article。它提供了一种非常干净的方法来实现它。在服务器上，您不需要任何TempData持久性，并且它还说明了使用一个漂亮的小帮助程序，它可以生成正确的输入字段名称。

就您的问题而言，您输错的原因是正确的，因为当您直接从控制器操作返回局部视图时，它不再具有编辑器模板的父上下文。有一些方法可以避免这种情况，但它非常苛刻，我宁愿推荐文章中提出的方法。

Answer 2

正常情况下，我会选择史蒂文桑德森的博客文章，因为Darrin已经成为行业标准之一。是的，局部视图在你的场景中是一种痛苦。

在您希望保持编辑器模板逻辑和动态添加元素链接的场景中，我将生成与editor for相同的名称，如下所示

这是我的代码，只是为了给你举例。

   $("#addItemdynamically").click(function () {
    $.ajax({
        url: '@Url.Action("GetNewGuid", "NewWebForms")',
        cache: false,
        success: function (newguid) {
            id = newguid;
            var html = '<tr class="editorRow">' +
              '<td><input type="radio" id="Selected" name="Selected" value=' + id + ' /></td>' +
              '<td><input type="hidden"  name=\OptionsList.Index value=' + id + ' /></td>' +
              '<td><input type="text"  name=\OptionsList[' + id + '].Text /></td>' +
              '<td><input type="hidden"  name=\OptionsList[' + id + '].guid value=' + id + ' /></td>' +
              '<td> <a href="#" class="deleteRow">delete</a></td>' +
              '</tr>'

              $("#editorRows tbody").append(html);
              $("form").removeData("validator");
              $("form").removeData("unobtrusiveValidation");
              $.validator.unobtrusive.parse("form");
        }
    });     
    return false;
});

基本上我的新guid是从服务器端获取新生成的guid并将其附加到通过按add new item按钮生成的行。

如果你喜欢这里你可以生成int数字但是还需要其他一些黑客。

ASP.Net MVC添加动态EditorFor元素

2 个答案: