Asp.net mvc 通过Ajax和模型更新加载ASP.NETMVC2自定义模板

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

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; }
}

而不是：

Child[0].FirstName

因此，我的控制器中的编辑操作：

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

    return View(parent);
}

从提交的表单重新创建ParentViewModel不起作用

---

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

嗯。。。我个人建议使用JSON结果，而不是HTML结果，您可以在页面中处理这些结果

---

使系统更干净。你的回邮工作；-）

首先，您需要记住默认的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; }
}

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

通过Ajax创建新的孩子

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

如果是这样的话，你可以这样做

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

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

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

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

索引视图-已更新

<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>

函数add（）{
$.ajax(
{
类型：“POST”，
url:“”，
成功：功能（结果）{
$（'#newchild'）。在（结果）之后；
},
错误：功能（请求、状态、错误）{
}
});
}

这将调用add操作，并在返回到submit按钮上方的newChild div时追加响应

我希望这篇长文章有用

---

享受：-）

我找到了另一种方法来实现这一点，这种方法在我的特殊情况下有效

而不是通过Ajax加载部分via，Ajax是强类型的子集合，如：

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

我为父类型创建了一个强类型视图，然后在列表中调用EditorFor，如下所示：

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

x、 儿童名单）%%>

---

然后调用一个自定义显示模板，结果是所有HTML元素都正确命名，默认的模型绑定器可以将所有内容重新组合在一起。

我不确定JSON结果会有什么帮助？我需要加载到页面中的响应是一个表单，而不仅仅是数据。表单需要有正确的命名约定，以便模型绑定在发回服务器时工作。您可以通过AJAX获得结果，然后用结果替换表单中的数据……您的长篇文章非常有用，非常受欢迎。看起来这正是我需要的。@Chris-太棒了，很高兴它有用：-）

<%@ 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) %>

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;
}

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

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

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

[HttpPost]
public ActionResult Edit(ParentViewModel parent)
{

}

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

<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>

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

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