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

时间:2015-08-13 19:30:40

标签: asp.net ajax asp.net-mvc asp.net-mvc-4 partial

我在ASP MVC 5上有项目。我有一个模型"文章"。该模型具有HashSet和作者的ICollection。作者 - 第二个模型:

var conn = new SqlConnection(@"Data Source");
conn.Open();            
var cmd = new SqlCommand("INSERT INTO  Results (PlayerName) VALUES (@PlayerName)  " , conn);
cmd.Parameters.Add("@PlayerName",_playerName);
cmd.ExecuteNonQuery();
conn.Close();

我需要添加创建文章的页面,您可以在其上增加作者数量(使用AJAX),并且每个作者都可以注册这些字段。我决定使用作者模型的部分视图,而不是"创建"按钮(创建按钮仅用于创建文章的视图)。我需要无限制地添加新的局部视图,并在填充它们之后 - 从中​​获取所有数据。怎么做到的?我是MVC的新手,无法想象它会如何运作。

http://i.stack.imgur.com/0RHD0.png - 说明它应该如何显示

2 个答案:

答案 0 :(得分:0)

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

假设您的局部视图有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)
{
    //...
}

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

答案 1 :(得分:0)

是否需要使用partials?编写一个小脚本会不会更容易克隆第一个作者封闭元素而只是更改所涉及元素的名称以创建新作者?

<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>

因此,您可以将其用于创建和删除方法,您不需要部分内容。 代码可能需要一些工作,因为我展示的是概念