asp.net mvc - VB.Net MVC4 Advanced entity creation on form submit w/jQuery -

i have form submitting collection of timeitems (a table object), going added database. problem encountering want allow user add many or few timeitems want collection before submittal. timeitem's input fields consist of hidden input foreign key, combo box select employee, , basic input box enter notes in. view, 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 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 {.id = model.taskid})', function(data) {                 $('#add-row-target').before(data);             });         });     }); </script> 

what happening here when "add row" img clicked, javascript returns rendertimeitems action, in turn returns partial view. partial view contains input html again (hidden, combo, , textbox):

<input type="hidden" name="timeitems[#].taskid" value="@model.taskid"/> <select name="timeitems[#].employeeid">     @for each emp selectlistitem in viewbag.employeeid         @<option value="@emp.value">@emp.text</option>     next </select> <input type="text" name="timeitems[#].notes" value="test notes" /> 

this html added original form. problem partial view "#" in timeitems[#] needs actual number , needs incremented each time user clicks "add row" controller able correctly interpret collection of timeitems. note in original view use of timeitems[0] initial timeitem, therefore next 1 in partial view should timeitems[1]. how can keep track of number, increment when "add row" clicked in main view, still access in partial view after call rendertimeitems?

when user submits form, goes addtotimesheet action, consumes collection , adds each individual timeitem database in this example so:

<httppost()> function addtotimesheet(byval timeitems() pptimeitem) actionresult     if timeitems isnot nothing         each time in timeitems             db.pptimeitems.add(time)             db.savechanges()         next     end if     return redirecttoaction("index") end function 

furthermore, if allow user delete timeitem (that added) before submitting form, remove index collection, must contain concurrent indices work properly. i.e. if timeitems[0], timeitems[1], , timeitems[2] have been added, , user deletes timeitems[1], timeitems[2] no longer added correctly because remaining indices 0 , 2. thoughts?

you first need keep track of how many timeitem rows have on page, you'll need on every row. add-row-target work, recommend giving <div> class 'timeitem':

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

you continue return partial view , in $.get callback replace '#' in return data numitems.

$.get('@url.action("rendertimeitems", new {.id = model.taskid})', function(data) {                 var datawithnumber = data.replace(/#/g , numitems);                 $('#add-row-target').before(datawithnumber);             }); 

optionally, pass in number action method returns partial

$.get('@url.action("rendertimeitems", new {.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 selectlistitem in viewbag.employeeid         @<option value="@emp.value">@emp.text</option>     next </select> <input type="text" name="timeitems[@model.number].notes" value="test notes" />