c# - Good practice to place Modal code in View? -
i developing site, have come across stumbling block. trying follow proper mvc design pattern.
will practice place modal html inside "index" view responsible displaying people? instance, have table listing people. each person entry in table has "view/edit" button, , when click on that, want display modal. can modal code reside inside "index" view, , triggered "view/edit" button, or should call appropriate action in controller somehow return modal?
here code if need see have done far. below modal code residing in "index" view.
<div class="row"> <div class="col-sm-12"> <table class="table table-hover"> <thead> <tr> <th>@html.actionlink("name", "personlist", new { sortorder = viewbag.namesort, currentfilter = viewbag.currentfilter })</th> <th>@html.actionlink("date of birth", "personlist", new { sortorder = viewbag.dobsort, currentfilter = viewbag.currentfilter })</th> <th>@html.actionlink("last reg date", "personlist", new { sortorder = viewbag.lardsort, currentfilter = viewbag.currentfilter })</th> <th>@html.actionlink("last reg number", "personlist", new { sortorder = viewbag.larnsort, currentfilter = viewbag.currentfilter })</th> <th>@html.actionlink("reg count", "personlist", new { sortorder = viewbag.regcountsort, currentfilter = viewbag.currentfilter })</th> <th>@html.actionlink("gender", "personlist", new { sortorder = viewbag.gendersort, currentfilter = viewbag.currentfilter })</th> <th>actions</th> </tr> </thead> <tbody id="updatedcontent"> @foreach (var person in model) { <tr> <td>@person.name @person.surname</td> <td>@person.birthdate</td> <td>@person.lastactiveregistrationdate_description</td> <td>@person.lastactiveregistrationno_description</td> <td>@person.activeregistrationcount_description</td> <td>@person.gender_description</td> <td>@html.actionlink("view/edit", "", "", null, new { @class = "btn btn-info btn-md", data_toggle = "modal", data_target = "#mymodal" })</td> </tr> } </tbody> </table> </div> </div> page @(model.pagecount < model.pagenumber ? 0 : model.pagenumber) of @model.pagecount @html.pagedlistpager(model, page => url.action("personlist", new { page, sortorder = viewbag.currentsort, currentfilter = viewbag.currentfilter })) @* modal code here editing person *@ @* called upon click of edit/view *@ <div class="modal fade" id="mymodal" role="dialog"> <div class="modal-dialog"> <!-- modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">view/edit person</h4> </div> <div class="modal-body"> <p>here able view/edit person object.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">save</button> </div> </div> </div> </div>
i see no reason why wouldn't put markup view in view. putting in separate view , dynamically invoking may have benefits in situations, don't think 1 of them.
usually you'd if "modal" component needs fetch more data. because in case it's trade-off between fetching small amounts of data in multiple http requests vs. putting all of data on page in initial request. if it's users interact small number of records, wouldn't want put of data there.
if, however, of data needed on page anyway there's no reason put markup in separate http request. because you'd repeating request the same markup every time edits record. might send once when page loads.
if there's lot of data differs per record, consider using ajax requests. if it's hidden edit form in markup, keep in same markup. fact it's "modal" ui concern, not separate request concern.
Comments
Post a Comment