在一个视图中创建的主从视图答案

【问题标题】：Master-Detail created in one View在一个视图中创建的主从视图
【发布时间】：2015-01-17 09:39:10
【问题描述】：

我有一个带有子模型的模型。

 [Table("Personnel")]
public class Personnel
{
  [Key]
  public int Id { get; set; }

  [MaxLength(10)]
  public string Code { get; set; }

  [MaxLength(20)]
  public string Name { get; set; }
  public virtual List<PersonnelDegree> Degrees
  {
        get;
        set;
  }

}
public class PersonnelDegree
{
 [Key]
 public int Id { get; set; }

 [ForeignKey("Personnel")]
 public int PersonnelId { get; set; }
 public virtual Personnel Personnel { get; set; }

 [UIHint("Enum")]
 public Degree Degree { get; set; }

 public string Major { get; set; }

 public string SubField { get; set; }

 public string Location { get; set; }
}

我想为此创建一个视图。（添加）

我添加了要查看的人员字段，但是如何为 PersonnelDegree 添加项目？

  @using (Html.BeginForm("Add", "Personnel", FormMethod.Post, new {enctype = "multipart/form-data", @class = "form-horizontal tasi-form", id = "default"}))
    {
      @Html.AntiForgeryToken()
      @Html.ValidationSummary(true, null, new {@class = "alert  alert-danger "})

   <div class="form-group">
    @Html.LabelFor(m => m.Code, new {@class = "control-label col-lg-1"})
    <div class="col-lg-3">
    @Html.TextBoxFor(m => m.Code, null, new {@class = "form-control", maxlength = 10})
    @Html.ValidationMessageFor(m => m.Code)
    </div>
    </div>
    <div class="form-group">
    @Html.LabelFor(m => m.Name, new {@class = "control-label col-lg-1"})
    <div class="col-lg-3">
    @Html.TextBoxFor(m => m.Name, new {@class = "form-control", maxlength = 20})
    @Html.ValidationMessageFor(m => m.Name)
    </div>
    @Html.LabelFor(m => m.Family, new {@class = "control-label col-lg-1"})
    <div class="col-lg-3">
    @Html.TextBoxFor(m => m.Family, null, new {@class = "form-control", maxlength = 30})
    @Html.ValidationMessageFor(m => m.Family)
    </div>
    </div>

我可以在这个视图中添加多个 PersonnelDegrees 吗？

编辑

我在 Degrees 视图中添加了一个 div

 <div id="Degrees">
  <div id="NewDegree" style="display:none">
  <div class="form-group">
    <input class="form-control" id="Degrees[#].Major"   name="Degrees[#].Major" value="" type="text">
          // another items                             
  </div>
  </div>
 </div>

在 javascript 中：

$(document).ready(function() {
        $(function() {
            $("#addItem").click(function () {
                var index = $('#Degrees tbody tr').length; // assumes rows wont be deleted
                var clone = $('#NewDegree').html();
                // Update the index of the clone
                clone.replace(/\[#\]/g, '[' + index + ']');
                clone.replace(/"%"/g, '"' + index + '"');
                $('#Degrees').append(clone);
            });


        );
    });

它添加了一个div，但几秒钟后隐藏div并刷新页面。

【问题讨论】：

要渲染现有的PersonnelDegree 对象，您需要一个for 循环EditorTemplate。要添加新的PersonnelDegree 对象，您可以动态添加/删除，然后使用 javascript/jquery。参考例子here和here
非常感谢，如何发送给控制器？
如果你的模型是Personnel并且你的post方法是public ActionResult Create(Personnel model)那么模型将被正确绑定
关键是绑定一个集合是为了确保你的控件被正确命名和索引以进行绑定，所以你需要诸如<input name="Degrees[0].ID ..>, <input name="Degrees[1].ID ..>之类的控件。
谢谢，我添加了一个带有 display:none 的 div 并添加了所有项目 (Degrees[#].Name) ，但是当我在 Degrees div (append) 中添加这个 div 时，再次加载页面添加删除新div.

标签： asp.net-mvc asp.net-mvc-3 asp.net-mvc-4 model-view-controller

【解决方案1】：

是的，你可以。有几种方法可以做到：

使用Js类网格组件

使用一些js 网格组件，我更喜欢jqgrid，您可以使用它在View 上本地添加数据，然后在表单POST 上将其序列化到控制器。

优点：您不需要自己用网格编写 js CRUD 操作，您唯一应该得到的就是如何以正确的方式将本地数据序列化到控制器。

缺点：您应该了解组件的工作原理，并且可能是某些组件在 MVC 项目中不容易实现（我的意思是您可能会在客户端丢失模型验证、数据注释等）

用js添加标记

写你自己的js 来解决这个问题。 Here 是一个很好的基本示例。使用 js 生成 html（从控制器获取 js）并将其添加到视图中的想法。

优势：只要你懂 js，就可以随心所欲。

缺点：您在客户端丢失了模型验证、数据注释等。

在 js 中使用 PartialView

使用 Ajax 从Controller 获取标记（PartialView 用于您的PersonnelDegree）并使用 js 将其附加到您的View。

优势：您可以使用所有 ViewModel 优势 (DataAnnotations)，如果需要，您可以在 CRUD 控制器方法中添加一些技巧逻辑。如果您的项目很大并且失去生命周期，它也是最容易维护的解决方案。

缺点：当标记来自 ajax 调用时，您应该学习如何初始化客户端验证。而且通常这种方法会迫使您编写大量代码。

如果我有时间的话，我更喜欢最后一个选项。

【讨论】：

非常感谢，如果我使用部分视图，如何将部分视图中的日期列表发送到主控制器？
我已经在答案中提供的这个example 正是您需要的 Ajax 调用 get view 并将该视图生成的 html 添加到 DOM

【解决方案2】：

您可以使用局部视图为 PersonnelDegree 添加项目。要在此视图中添加多个 PersonnelDegrees，您需要在控制器中创建对象

        Personnel pers = new Personnel(); 
        PersonnelDegrees pr_obj = new PersonnelDegrees ();
        ind_obj.PersonnelDegrees .Add(pr_obj );
        PersonnelDegrees pr_obj1 = new PersonnelDegrees ();
        ind_obj.PersonnelDegrees .Add(pr_obj1 );

【讨论】：