c# - ASP.Net MVC - How to dynamically add items to an object and bind it to the controller to store in a database? -

this question has answer here:

• submit same partial view called multiple times data controller? 1 answer

i dinamically add , remove items poco object , store on related table. instance:

class contact{     [key]     public int id {get; set;}     [required] public string name {get; set;}     public ienumerable<phone> phones{get; set;} }  class phone{     [key]     public int id {get;set;}     [required] public string phone_type {get; set;}     [required] public string phone_number {get; set;} } 

where contact able have lot of phones.

the contact edit view this:

@model sgd.models.contact @html.labelfor(model => model.name) @html.editorfor(model => model.name)  @html.labelfor(model => model.phones) <div id="phones"></div>  <a href="#" onclick="addphone()">add new phone</a>  <script>     function addphone() {         $.ajax({url: "/phones/_phone",              cache: false,              success: function(html) { $("#phones").append(html);}}     )} </script> 

the "add new phone" link button append partial view inside #phones div

@model sgd.models.phone @{     layout = null; }      @html.hiddenfor(model => model.id)      @html.labelfor(model => model.phone_type)     @html.editorfor(model => model.phone_type)     @html.validationmessagefor(model => model.phone_type)      @html.labelfor(model => model.phone_number)     @html.editorfor(model => model.phone_number)     @html.validationmessagefor(model => model.phone_number) 

but don't know how handle , bind post data in controller , store contact , related phone records on db. how can it?

first, check out this article phil haack.

you need mechanism in javascript apply indexing phone partial, in nutshell partial needs more this:

@model sgd.models.phone @{     layout = null; }  <input name="phones[0].id" style="display:none;"/>  @html.labelfor(model => model.phone_type) <input name="phones[0].phone_type" />  @html.labelfor(model => model.phone_number) <input name="phones[0].phone_number" /> 

as database part, assuming using entity framework code-first based on models you've shown. there problems code-first models in case. read msdn article learn how construct code-first models different types of relationships. i'm guessing intend have one-to-many relationship between contacts , phones, 1 contact may have many phones. in case, models should follows:

class contact{     [key]     public int id {get; set;}     public string name {get; set;}     public icollection<phone> phones{get; set;} }  class phone{     [key]     public int id {get;set;}     public string phone_type {get; set;}     public string phone_number {get; set;}     public contact contact { get; set; } } 

from there, use context add new phones appropriate contacts in addphone action method:

public actionresult addphone(int contactid) {     var newphone = new phone();     contact ct = ctx.contacts.find(contactid);     ct.phones.add(newphone);     ctx.savechanges();     return view(newphone); } 

you need implement editphone , deletephone actions.

as [required] attributes, either need remove them or re-think view entirely. can't "addphone" required attributes without taking input first. need input user before can bind it, , don't see effort on part toward end.