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>

与此处接受的答案非常相似：Model Containing List of Models (MVC-3, Razor)

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

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

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

Answer 1

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

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

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

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

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

并以此格式命名属性值

<强>集合名[的ItemIndex ]。属性名

我创建了一个示例工作程序，并根据您的要求解释了它的工作原理Here。

Answer 2

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

Answer 3

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

2.First partail视图应位于具有id'divMdeolList'

的div内

3.而创建视图将具有类似

的代码

@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而不回发

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

3 个答案: