asp.net mvc - The right way to bind the model to save multiple records to a table -

i have menusettings pages displays menuname database(menutable).i want save details menurole table.for think have iterate on each menuitem , store details in menurole table(is correct method?).but problem getting menulist null.so couldnot iterate on menulist .also not sure how can bind checkbox value menurole table.

the view is

model is

public class menurolevm {     public int? roleid { get; set; }     public selectlist rolelist { get; set; }     public menurole menurole { get; set; }     public ienumerable<menu> menulist { get; set; } }  public partial class menurole {     public int id { get; set; }     public nullable<int> menuid { get; set; }     public nullable<int> roleid { get; set; }     public nullable<system.datetime> transactiontime { get; set; }     public bool canadd { get; set; }     public bool canedit { get; set; }     public bool candelete { get; set; }     public bool canview { get; set; }      public virtual menu menu { get; set; }     public virtual role role { get; set; } }   public partial class menu {     public menu()     {         this.menuroles = new hashset<menurole>();     }      public int id { get; set; }     public string menuname { get; set; }     public string navigateurl { get; set; }     public nullable<int> parentid { get; set; }      public virtual icollection<menurole> menuroles { get; set; } } 

controller binding view

 public actionresult add()     {         var _menurolevm = new menurolevm          {              rolelist = new selectlist(_db.roles.tolist(), "id", "rolename"),              menulist = _db.menus.where(m => m.navigateurl != "#"),              menurole = new menurole()          };         return view(_menurolevm);      } 

html markup of view

@model sms.models.viewmodel.menurolevm  @foreach (var item in model.menulist.select((x, i) => new { data = x, index = }))  {    <tr>        <td>            <input type="checkbox" class="minimal checkall" />        </td>        <td>@item.data.menuname</td>        <td>           @html.checkboxfor(m => m.menurole.canadd, new { @class = "minimal single" })        </td>        <td>         @html.checkboxfor(m => m.menurole.canedit, new { @class = "minimal single" })        </td>        <td>          @html.checkboxfor(m => m.menurole.candelete, new { @class = "minimal single" })         </td>         <td>           @html.checkboxfor(m => m.menurole.canview, new { @class = "minimal single" })         </td>        </tr>      } 

any highly appreciated?

you need view models represent want display/edit

public class menuvm {   public int id { get; set; }   public string name { get; set; }   public bool canadd { get; set; }   public bool canedit { get; set; }   public bool candelete { get; set; }   public bool canview { get; set; } }  public class menurolevm {   public int? roleid { get; set; }   public selectlist rolelist { get; set; }   public list<menuvm> menulist { get; set; } } 

and in view

@model menurolevm @using (html.beginform()) {   @html.dropdownlistfor(m => m.roleid, model.rolelist)   for(int = 0; < model.menulist.count; i++)   {     @html.hiddenfor(m => m.menulist[i].id)     @html.displayfor(m => m.menulist[i].name)     @html.checkboxfor(m => m.menulist[i].canadd)     @html.checkboxfor(m => m.menulist[i].canedit)     ....   }   <input type="submit" ... /> }