VB.Net MVC4表单提交带有jQuery的高级实体创建

Question

我有一个表单提交TimeItems（一个表对象）的集合，然后将其添加到数据库中。我遇到的问题是，我希望允许用户在提交之前添加尽可能多或更少的时间项。目前，一个TimeItem的输入字段包含一个外键隐藏输入，组合框，选择雇员，以及基本的输入框中输入音符我的观点，使用javascript：

<div> 
    <img src="" alt="Add row" id="add-timesheet-row" />   
    @Using Html.BeginForm("AddToTimesheet", "Project") 
     @<div> 
      <input type="hidden" name="TimeItems[0].TaskID" value="@Model.TaskID"/> 
      <select name="TimeItems[0].EmployeeID"> 
       @For Each emp As SelectListItem In ViewBag.EmployeeID 
        @<option value="@emp.Value">@emp.Text</option> 
       Next 
      </select> 
      <input type="text" name="TimeItems[0].Notes" value="Test Notes" /> 

      <div id="add-row-target" style="display: none"></div> 

      <div class="button-submit"> 
       <input type="submit" value="Create" /> | 
       @Html.ActionLink("Back", "Index") 
      </div> 
     </div> 
    End Using 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#add-timesheet-row").click(function() { 
      $.get('@Url.Action("RenderTimeItems", New With {.id = Model.TaskID})', function(data) { 
       $('#add-row-target').before(data); 
      }); 
     }); 
    }); 
</script> 

这里发生的事情当单击“添加行”img时，javascript会返回RenderTimeItems操作，该操作会返回部分视图。该局部视图再次包含输入HTML（隐藏，组合，和文本框）：

<input type="hidden" name="TimeItems[#].TaskID" value="@Model.TaskID"/> 
<select name="TimeItems[#].EmployeeID"> 
    @For Each emp As SelectListItem In ViewBag.EmployeeID 
     @<option value="@emp.Value">@emp.Text</option> 
    Next 
</select> 
<input type="text" name="TimeItems[#].Notes" value="Test Notes" /> 

此HTML然后被添加到原来的形式。我的部分观点的问题是TimeItems[#]中的“＃”需要是实际的数字，并且每次用户单击“添加行”时，我的控制器就能够正确解释TimeItems的集合，需要增加该数字。请注意，在我的原始视图中，初始TimeItem使用了TimeItems[0]，因此我的部分视图中的下一个应为TimeItems[1]。我如何跟踪一个数字，在我的主视图中单击“添加行”时增加数字，但在调用RenderTimeItems之后，仍然在部分视图中访问它？

当用户提交表单，它进入了AddToTimesheet动作，消耗的收集和在this example像这样把每个个体TimeItem到数据库：

<HttpPost()> 
Function AddToTimesheet(ByVal TimeItems() As ppTimeItem) As ActionResult 
    If TimeItems IsNot Nothing Then 
     For Each time In TimeItems 
      db.ppTimeItems.Add(time) 
      db.SaveChanges() 
     Next 
    End If 
    Return RedirectToAction("Index") 
End Function 

而且，如果我想允许用户在提交表单之前删除一个TimeItem（它们之前添加的），这将从集合中删除一个索引，该索引必须包含并发索引才能正常工作。即如果已添加TimeItems[0],TimeItems[1]和TimeItems[2]，然后用户删除TimeItems[1]，则将不再正确添加TimeItems[2]，因为剩余索引是0和2.有什么想法？

Answer 1

您首先需要跟踪您在页面上有多少个TimeItem行，因此您需要每行都有的东西。 add-row-target会的工作，但我建议您为<div>像“timeItem”一类：

var numItems = $("#add-row-target").length; 

你可以继续返回局部视图和$.get回调只需用numItems替换‘＃’在返回data 。

$.get('@Url.Action("RenderTimeItems", New With {.id = Model.TaskID})', function(data) { 
       var dataWithNumber = data.replace(/#/g , numItems); 
       $('#add-row-target').before(dataWithNumber); 
      }); 

或者，可以在数传递给返回部分

$.get('@Url.Action("RenderTimeItems", New With {.id = Model.TaskID})?number=' + numItems 


<input type="hidden" name="TimeItems[@Model.Number].TaskID" value="@Model.TaskID"/> 
<select name="TimeItems[@Model.Number].EmployeeID"> 
    @For Each emp As SelectListItem In ViewBag.EmployeeID 
     @<option value="@emp.Value">@emp.Text</option> 
    Next 
</select> 
<input type="text" name="TimeItems[@Model.Number].Notes" value="Test Notes" />