I have a few screens which have duplicated complex UI functionality. i.e. Drop down A triggers a JSON call to my Controller, which populates the values in drop down B and C, based on the value selected in drop down A.
So, on the screens, I have drop down A, and then under that, B and C.
This is duplicated UI code on 3 screens (Growing to 5 soon). But they make use of the same Controller call to do the population.
Is there a way I can create a partial view, which I can place in a form (Form is submitted via a normal Form post), and the values of the selections can then be passed back with the values of all the other form items that are submitted? The partial view would have the markup, as well as the Javascript I use to call the controller?
I'm not sure if I can then include the values within the partial view, in the Form post, and have them available to the controller.
I have started investigating EditorTemplates, but all I have is the Model for the template:
public class AccountCombinationTemplateModel
{
public int SourceEntityId { get; set; }
public int DestinationEntityId { get; set; }
public int EntityEventTypeId { get; set; }
public List<SelectListItem> Accounts { get; set; }
public List<SelectListItem> ThirdParties { get; set; }
}
and an empty AccountCombinationTemplate.cshtml file. Not sure if I need a controller etc.
My parent model (The main model I use for the view) now references the new model created above:
public AccountCombinationTemplateModel AccountModel { get; set; }
So all the properties that were in the parent model, have been moved into the AccountCombinationTemplateModel.
On my View, I now have:
@Html.EditorForModel(Model.Details.AccountModel)
That is on the view, where I want my Drop downs to appear.
I created a new empty view called AccountCombinationTemplate.cshtml in my View\Shared\EditorTemplates folder.
That view looks like this:
@model BasicFinanceUI.Models.AccountCombinationTemplateModel
<div class="row">
<div class="form-group col-xs-12 col-lg-3 divAccounts">
@Html.LabelFor(x => x.EntityEventTypeId)
@Html.DropDownListFor(x => x.EntityEventTypeId, Model.EntityEventTypes, new { @class = "EntityEventTypeId form-control", @onchange = "changeDisplay(this)" })
</div>
<div class="form-group col-xs-12 col-lg-5 divAccounts">
@Html.LabelFor(x => x.SourceEntityId)
@Html.DropDownListFor(x => x.SourceEntityId, Model.Sources, new { @class = "SourceEntityId form-control" })
</div>
<div class="form-group col-xs-12 col-lg-5 divAccounts">
@Html.LabelFor(x => x.DestinationEntityId)
@Html.DropDownListFor(x => x.DestinationEntityId, Model.Destinations, new { @class = "DestinationEntityId form-control" })
</div>
</div>
I my existing controller, I have added the new EditorModel above as a property of the main model for the view, and populated it and it's properties.
But when I run the screen, where I have the @Html.Edit..., nothing is rendered. No errors either. It;s as if it can't find the View?
@Html.EditorFor(m => m.Details.AccountModel)