带有列表的模型 - 从Razor视图向列表添加新项目的方法

Question

我有一个具有各种属性的模型，但感兴趣的是另一种模型的列表。

例如：

   public class User
    {
        public string Name { get; set; }
        public string Description { get; set; }

        public IEnumerable<UserInterest> Interests { get; set; }
    }

然后，我在视图中使用编辑器模板为模型项的每个项呈现视图。

@Html.EditorFor(x => x.Interests)    

EditorFor模板看起来像：

@model Interest

<div>
    @Html.HiddenFor(x => x.Id)
    @Html.TextBoxFor(x => x.InterestText)
    @Html.CheckBoxFor(x => x.Delete)
   ....
</div>

与此处接受的答案非常相似： 模型包含模型列表（MVC-3，Razor）

我的问题是 - 你如何从客户端（jQuery）在属性中创建一个新项目而不返回到服务器。 我目前有一个粗略的方法，我将数据发回给我的控制器，它返回模型返回与Interests属性中的新空白项目。

这似乎是矫枉过正的HTTP请求而不是非常优秀。 我在考虑使用jQuery .Clone（），但不完全确定在命名元素和清除现有值方面需要做些什么。

所以有人有任何建议。 我希望得到更多的意见和不同的方法。

Answer 1

您可以随意创建文本框和复选框，并将其添加到DOM。 保存时，使用jQuery ajax将该数据（新记录数据）发布到操作方法并保存在那里。 将状态返回（Succcess / Falied）从您的操作方法返回到您的客户端代码（您的jQuery ajax / post的回调函数）并在那里检查它。 如果成功，则向用户显示成功消息， append新项目append到现有列表。

示例jSFiddle： http ： //jsfiddle.net/carwB/2/

如果要返回一些复杂数据（例如：所有新记录及其ID等）以及状态，您可以从操作方法返回JSON 。

编辑：要使模型绑定与新添加的动态元素一起使用，您需要遵循元素的命名约定。

诀窍是以这种格式保持html元素的id属性值。 CollectionName_ ItemIndex __PropertyName

并以此格式命名属性值

CollectionName [ ItemIndex ] .PropertyName

我创建了一个示例工作程序，并解释其运行方式在这里根据您的要求。

Answer 2

在这种情况下，我更喜欢使用客户端模板。 您使用ajax将数据发送到服务器，然后接收JsonResult 。 看看JsRender这是没有jQuery依赖的javascript库。

Answer 3

1.创建两个局部视图，一个是列表项，第二个是创建

2.First partail视图应该在id为'divMdeolList'的div内

3.and Creation视图将具有类似的代码

@using (Ajax.BeginForm("SubmitData", new AjaxOptions { UpdateTargetId = "divMdeolList" }))
{
 @Html.TextBoxFor(x => x.InterestText)
  <p>
            <input type="submit" value="Create" />
  </p>
}

4.然后在将呈现部分视图的控制器上创建ActionResult类型操作

public ActionResult SubmitData(YourModel model)
{  
  //Do : save the record 
  return PartialView("FirstPartailView", model);
}

这将更新View而不回发