c# - ASP.NET MVC 5 - "Create" view that can handle any number of elements for an IEnumberable based on clicking an "Add row" button? -

i writing recipe manager wife in c#/.net mvc 5. i'm getting page creating recipe, , i'm little stumped. recipe consists of name , list of ingredients.

when create view, have form:

@using(html.beginform()){     //form elements     @html.displaynamefor(x => model.name)     //button adding new ingredient recipe      <input type="submit" text="submit new recipe!" /> enter code here } 

when button adding ingredient clicked, should render block of html inside form above button itself, way user can add number of ingredients , submit recipe when form posted controller.

for functionality, should make button call controller sends partial view or something? i'm not sure how accomplish outside of javascript, i'm wanting use .net mvc solution if can.

i try minimize reliance on javascript whenever can, agree @br4d knockout best option here. if want avoid @ cost, more complex, slower , not user friendly here how it.

enclose form in div. have place holder div inside form hold ingredients list. make "add new ingredient" call controller return partial view required fields. in target attribute indicate place holder div update target , append response html of place holder div specifying insertionmode.insertafter.

<div id="parentdiv">     @html.beginform........         @ajax.actionlink("add new ingredient","actionname","controllername",routevalues,                      new ajaxoptions                     {                         updatetargetid = "childdiv",                         insertionmode = insertionmode.insertafter                     }         <div id=childdiv>         </div> </div> 

this code no means comprehensive or production ready (i prefer have way of handling failed ajax calls , might want block off interactions until call comes mention 2 of enhancements). once again knockout preferred way this.