如何在 ASP MVC 中动态添加新的部分表单以及如何从中获取数据？

Question

我有一个关于 ASP MVC 5 的项目。我有一个模型“文章”。这个模型有Author的HashSet和ICollection。作者 - 第二个模型：

 public partial class Article
{
    public Article()
    {
        Authors = new HashSet<Author>();
    }

    [DisplayName("Авторы")]
    public virtual ICollection<Author> Authors { get; set; }

我需要添加创建文章的页面，您可以在该页面上增加作者数量（使用AJAX），以及每个作者注册字段。我决定使用作者模型的部分视图，没有“创建”按钮（创建按钮仅用于创建文章的视图）。我需要无限添加新的局部视图，并在填充它们之后 - 从它们中获取所有数据。怎么弄？我是 MVC 的新手，无法想象它是如何工作的。

http://i.stack.imgur.com/0RHD0.png - 外观说明

Answer 1

这并不难。您的部分视图将作为集合发布。

假设您的局部视图有 2 个值，FirstName 和 LastName。应该是这样的：

@{
    Guid index = Guid.NewGuid();
}
<input type="hidden" name="People.index" value="@index" />
<input type="text" name="People[@index].FirstName" value="" />
<input type="text" name="People[@index].LastName" value="" />

最终的输出是：

<input type="hidden" name="People.index" value="B756DAD8-5D5D-449E-A4B4-E61F75C1562C" />
<input type="text" name="People[B756DAD8-5D5D-449E-A4B4-E61F75C1562C].FirstName" value="" />
<input type="text" name="People[B756DAD8-5D5D-449E-A4B4-E61F75C1562C].LastName" value="" />

<input type="hidden" name="People.index" value="B78B7BBC-EB0E-41CB-BE18-C1E3F7526F32" />
<input type="text" name="People[B78B7BBC-EB0E-41CB-BE18-C1E3F7526F32].FirstName" value="" />
<input type="text" name="People[B78B7BBC-EB0E-41CB-BE18-C1E3F7526F32].LastName" value="" />

您的模型必须有一个集合 People 对象。

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
} 

public class Article
{
    //other properties...

    public ICollection<Person> People { get; set; }
}

你的控制器：

public ActionResult YourAction (Article model)
{
    //...
}

未经测试的代码，但应该可以正常工作。

Answer 2

是否需要使用局部变量？编写一个小脚本来克隆第一作者封闭元素并更改所涉及的元素的名称以创建新作者不是更容易吗？

<div id="enclosingDiv" data-count="x">
  <div class="someClass"  data-index='x1' >
    Author1 name Aurthor1 Textboxname="CollectionList[Index].Property"...
  </div>

现在在创建新的 Authouther 时，您可以创建：

<script>
  function createNewAuthor()
  {
       //clone first author
       var count = $('encolsingDiv').attr('data-count');
      //var count = $('encolsingDiv').children().length;
      var author = $('enclosingDiv').first().clone();
      //change name and id,etc using data-count
      author.find('*[name$='value'])attr('name','ListCollection[count  + 1]");
      author.find('*[name$='value'])attr('id',....);
      author.attr('data-index',count +1)
      $('enclosingDiv').append(author);
      $('enclosingDiv').attr('data-count',count + 1 to it);//makes life easier

  }

  function deleteAuthor(authourIndex)
  {
        //assumes that an author can be removed
        $('div[data-index="'+authorIndex+'"]").remove();
        $('enclosingDiv').children.each(function()
       {
           //if delete functionality exists, change the names of the element                       indices using the count variable
           change all indices of element properties concerned
           $(this).find('*[name$='value']).attr('name','ListCollection['+count+'].sumproperty");

           count++;
       });
  }
</script>

所以你可以将它用于创建和删除方法，你不需要部分。 代码可能需要一些工作，因为我展示的是概念