3

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

例如：

   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() 但不完全确定在命名元素和清除现有值方面我需要做什么。

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

4

3 回答 3

2

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

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

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

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

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

并以此格式命名属性值

集合名称 [ ItemIndex ].PropertyName

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

于 2012-09-17T13:40:44.353 回答
1

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

2.第一个部分视图应该在具有 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);
}

这将在不回发的情况下更新视图

于 2012-09-17T13:56:33.897 回答
1

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

于 2012-09-17T13:45:01.497 回答