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> 
Comments
Post a Comment