asp.net-mvc - ASP.Net MVC2 自定义模板通过 Ajax 加载和模型更新

Question

我有一个 View 模型，其中包含其他对象的集合。

public ParentViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<ChildViewModel> Child { get; set; } 
}

public ChildViewModel
{
    public int Id { get; set; }
    public string FirstName { get; set; }
}

在我的一个 View 中，我传入了一个 ParentViewModel 作为模型，然后使用

<%: Html.EditorFor(x => x) %>

显示 Id 和 Name 属性的表单。

当用户点击一个按钮时，我通过 Ajax 调用一个 Action 来加载一个局部 View ，该 View 采用子集:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Child>>" %>
<%: Html.EditorFor(x => x) %>

然后使用自定义模板 Child 为传入的每个 Child 显示一个表单。

我遇到的问题是 Child 自定义模板创建的表单不使用 DefaultModelBinder 使用的命名约定。

即字段名称是(当由 Ajax 加载时):

[0].FirstName

代替:

Child[0].FirstName

所以我的 Controller 中的编辑操作:

[HttpPost]
public virtual ActionResult Edit(int id, FormCollection formValues)
{
    ParentViewModel parent = new ParentViewModel();
    UpdateModel(parent);

    return View(parent);
}

从提交的表单重新创建 ParentViewModel 是行不通的。

我想知道通过 Ajax 在自定义模板中完成加载然后能够使用 UpdateModel 的最佳方法是什么。

Answer 1

首先要记住的几件事是您需要记住默认的 ModelBinder 是递归的，它会尝试找出它需要做什么……非常聪明。另一件要记住的事情是你不需要需要使用 html 助手，实际的 html 也可以正常工作:-)

所以，首先是模型，这里没有什么不同..

public class ParentViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<ChildViewModel> Child { get; set; }
}

public class ChildViewModel
{
    public int Id { get; set; }
    public string FirstName { get; set; }
}

父部分 View - 这需要一个 ParentViewModel 实例

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ParentViewModel>" %>

<h2>Parent</h2>
<%: Html.TextBox("parent.Name", Model.Name) %>
<%: Html.Hidden("parent.Id", Model.Id) %>

<% foreach (ChildViewModel childViewModel in Model.Child)
{
    Html.RenderPartial("Child", childViewModel);         
}
%>

子部分 View - 这需要 ChildViewModel 的单个实例

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ChildViewModel>" %>

<h3>Child</h3>
<%: Html.Hidden("parent.Child.index", Model.Id) %>
<%: Html.Hidden(string.Format("parent.Child[{0}].Id", Model.Id), Model.Id)%>
<%: Html.TextBox(string.Format("parent.Child[{0}].FirstName", Model.Id), Model.FirstName) %>

此时需要注意的是，索引值是用于计算列表中唯一记录的值。这不需要是增量值。

那么，你怎么调用它呢？在 Index 操作中，它将显示需要传入的数据。我已经设置了一些演示数据，并将其返回到 ViewData 字典中的索引 View 。

所以 Controller Action ...

public ActionResult Index()
{
    ViewData["Message"] = "Welcome to ASP.NET MVC!";

    ViewData["Parent"] = GetData();

    return View();
}

private ParentViewModel GetData()
{
    var result = new ParentViewModel
                     {
                         Id = 1,
                         Name = "Parent name",
                         Child = new List<ChildViewModel>
                                     {
                                         new ChildViewModel {Id = 2, FirstName = "first child"},
                                         new ChildViewModel {Id = 3, FirstName = "second child"}
                                     }
                     };
    return result;
}

在现实世界中，您会调用数据服务等。

最后是索引 View 的内容:

<form action="<%: Url.Action("Edit") %>" method="post">
    <% if (ViewData["Parent"] != null)  { %>

        <%
            Html.RenderPartial("Parent", ViewData["Parent"]); %>

    <% } %>
    <input type="submit" />
</form>

保存

那么现在我们已经显示了数据，我们如何将其返回到操作中？好吧，这是默认模型绑定(bind)器将在相对复杂的结构中对简单数据类型执行的操作。因此，您可以将要发布的操作的基本格式设置为:

[HttpPost]
public ActionResult Edit(ParentViewModel parent)
{

}

这将为您提供带有原始 ID(来自隐藏字段)的更新详细信息，以便您可以根据需要进行更新/编辑。

通过 Ajax 的新 child

您在通过 ajax 加载自定义模板的问题中提到，您的意思是如何让用户选择添加另一个 child 而无需回发？

如果是这样，你做这样的事情......

添加操作 - 需要一个将返回新 ChildViewModel 的操作

[HttpPost]
public ActionResult Add()
    {
        var result = new ChildViewModel();
        result.Id = 4;
        result.FirstName = "** to update **";
        return View("Child", result);
    }

为了便于演示，我给了它一个 ID。

然后您需要一种调用代码的方式，因此您唯一需要更新的 View 是主索引 View 。这将包括获取操作结果的 javascript、调用代码的链接和要附加到 html 的目标 HTML 标记。也不要忘记在母版页或 View 顶部添加对 jQuery 的引用。

索引 View - 已更新!

<script type="text/javascript">

   function add() {

        $.ajax(
            {
                type: "POST",
                url: "<%: Url.Action("Add", "Home") %>",
                success: function(result) {
                    $('#newchild').after(result);
                },
                error: function(req, status, error) {

                }
        });
    }

</script>

<form action="<%: Url.Action("Edit") %>" method="post">
    <% if (ViewData["Parent"] != null)  { %>

        <%
            Html.RenderPartial("Parent", ViewData["Parent"]); %>

    <% } %>
    <div id="newchild"></div>

    <br /><br />
    <input type="submit" /> <a href="#" onclick="JavaScript:return add();">add child</a>
</form>

这将调用添加操作，并在返回到提交按钮上方的 newChild div 时附加响应。

希望这篇长文有用。

享受 :-)