asp.net mvc - MVC4 dynamically adding unkown number of editors without repeating a lot of code -

i'm using c#, mvc4 , jquery. requirements given me need able add records database translates editable fields in view.

the view has tabs, groups, lines , items need populated depending on in database. have been able achieve want using viewmodel containing list of "tabs"; each tab contains list of "groups"; each group contains list of "lines" , each line contains list of "items".

what ends happening me need repeat lot of code same editors. want avoid.

so in view i've got like:

    @for (int tabindex = 0; model.tabs != null && tabindex < model.tabs.count; tabindex++)     {         <div id="tab-@model.tabs[tabindex].tabid" class="tab-content">         @for (int groupindex = 0; model.tabs[tabindex].groups != null && groupindex < model.tabs[tabindex].groups.count; groupindex++)         {             <legend>@model.tabs[tabindex].groups[groupindex].name</legend>             //this part not working             addeditorsforgroup(tabindex, groupindex); ... ... 

and have in view:

@{     public void addeditorsforgroup(int tabindex, int groupindex)     {         (int lineindex = 0; model.tabs[tabindex].groups[groupindex].lines != null && lineindex < model.tabs[tabindex].groups[groupindex].lines.count; lineindex++)         {             (int itemindex = 0; model.tabs[tabindex].groups[groupindex].lines[lineindex].items != null && itemindex < model.tabs[tabindex].groups[groupindex].lines[lineindex].items.count; itemindex++)             {                 addlabelandeditor(tabindex, groupindex, lineindex, itemindex);             }         }     }     public void addlabelandeditor(int tabindex, int groupindex, int lineindex, int itemindex)     {             <div class="_20">                     <p>         switch (model.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].displaytypeedit.tolower().replace(" ", string.empty))         {             case "checkbox":                 html.labelfor(vm => vm.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].valueboolean, model.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].name);                 html.checkboxfor(vm => vm.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].valueboolean);                 break;             case "dropdownlist":                 html.labelfor(vm => vm.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].valuestring, model.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].name);                 html.dropdownlistfor(vm => vm.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].valuestring, model.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].valueselectlist);                 break;             case "multiselectlist":                 html.labelfor(vm => vm.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].valuestring, model.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].name);                 html.dropdownlistfor(vm => vm.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].valuestring, model.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].valuemultiselectlist);                 break;             case "radiobutton":                 html.radiobuttonfor(vm => vm.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].valuestring, model.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].valuestring);                 break;             case "textarea":                 html.labelfor(vm => vm.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].valuestring, model.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].name);                 html.textareafor(vm => vm.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].valuestring);                 break;             default:                 html.labelfor(vm => vm.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].valuestring, model.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].name);                 html.textboxfor(vm => vm.tabs[tabindex].groups[groupindex].lines[lineindex].items[itemindex].valuestring);                 break;         }                 </p>             </div>     }    } 

if repeat code contained in addlabelandeditor on several parts of view, works lot of code repetition.

relevant part of viewmodel:

public list<tab> tabs { get; set; }  public class tab {     public string name { get; set; }     public list<group> groups { get; set; } } public class group {     public string name { get; set; }     public list<line> lines { get; set; } } public class line {     public string name { get; set; }     public list<item> items { get; set; } } public class item {     public string name { get; set; }     public string description { get; set; }     public string datatype { get; set; }     public string datadefaultvalue { get; set; }     public string displaytypeedit { get; set; }      public string valuestring { get; set; }     public bool valueboolean { get; set; }     public datetime valedatetime { get; set; }     public decimal valuedecimal { get; set; }     public int valueint { get; set; }     public multiselectlist valuemultiselectlist { get; set; }     public selectlist valueselectlist { get; set; } } 

any thoughts, ideas, suggestions? thanks

so, here can do. in main view, have:

@html.editorfor(model => model.tabs) 

then, need create following partial views, , place them under views/shared/editortemplates:

tab.cshtml:

@model yourapp.viewmodels.tab  <div class="tab"> @* or want represent each tab... *@     @html.editorfor(model => model.groups) </div> 

group.cshtml:

@model yourapp.viewmodels.group  <div class="group"> @* or want represent each group... *@     @html.editorfor(model => model.lines) </div> 

line.cshtml:

@model yourapp.viewmodels.line  <div class="line"> @* or want represent each line... *@     @html.editorfor(model => model.items) </div> 

item.cshtml:

@model yourapp.viewmodels.item  <div class="_20">   @html.label(model.name)   @switch (model.displaytypeedit.tolower().replace(" ", string.empty))   {       case "checkbox":           @html.checkboxfor(model => model.valueboolean)           break;       case "dropdownlist":           @html.dropdownlistfor(model => model.valuestring, model.valueselectlist)           break;       case "multiselectlist":           @html.dropdownlistfor(model => model.valuestring, model.valuemultiselectlist)           break;       case "radiobutton":           @html.radiobuttonfor(model => model.valuestring, model.valuestring)           break;       case "textarea":           @html.textareafor(model => model.valuestring)           break;       default:           @html.textboxfor(model => model.valuestring)           break;   } </div>