jquery - ASP.Net Ajax : How to stay on the same page without loosing dynamically added controls?

Question

我有cshtml页面。在页面上我有 Details <div>标签。我通过进行 ajax 查询并在此 div 标记内附加部分 View 来填充此 div 标记。这工作正常。

然后我使用 ajax 助手提交整个表单。在服务器上，如果模型状态无效，那么我想留在同一页面上，以便可以在页面上显示错误消息。但是，这样做会删除添加到 div 标签内的所有 html。

cshtml

@using (Ajax.BeginForm("Create", "Campaign", new AjaxOptions { HttpMethod = "POST" }))
{       
 *** some html here ****


<button class="btn btn-default" id="AddNewRow" type="button">Add New Row</button>
<div id="Details"></div>
<button type="submit" class="btn btn-default">Submit</button>
}

Javascript

 $("#AddNewRow").click(function () { 
        $.ajax({
            cache: false,
            async: false,
            url: someurl
        }).success(function (partialView) {
            $("#Details").append(partialView);
        });        
  });

Controller

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(CampaignVM model)
    {
        if (!ModelState.IsValid)
        {
            //What should i return here so error will show on the same page and also keeps the rows i added using ajax
            //if i do 'return View("Create",model)' then all the details row i created using ajax query gets removed
        }

        return RedirectToAction("Index", "Home");
    }

Answer 1

作为此页面模型的一部分，包含部分模型的列表。 List<MyPartialModel>或其他什么。

在主视图中，渲染页面时，循环遍历任何 MyPartialModel在集合中并渲染它们。

这意味着当 ModelState 无效时传回的所有部分模型都会再次渲染。

不过，命名时必须小心。如果您MyPartialModel有特性Telephone (例如)那么集合中的每个项目将被命名为 MyPartialModel[0].Telephone MyPartialModel[1].Telephone等等。这需要在首先将部分添加到 View (IIRC)时完成，以便模型绑定(bind)器知道它们是集合的一部分。

我可能不太熟悉语法(凭内存打字)，但这就是基本思想。

如果 ModelState 无效，您应该在 Controller 中做什么 - 只需使用 return View() 返回 View 即可。所有提交的表单数据都存储在 ModelState 中并将自动返回到 View ，您只需再次渲染它(通过循环遍历集合)即可。