0

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?

18
  • How is the first dropdown created? Do you bind it to your model? I have a hunch you could actually create an editor template. Commented Jun 8, 2015 at 6:42
  • Yes you can use a partial view. but don't include scripts in a partial - include them in the main view. Exactly how you do this will depend on your models and are the dropdownlists related to properties in your model Commented Jun 8, 2015 at 6:42
  • @AndreiV - At the moment, I have the lists passed in as 'Public List<SelectListItem> Accounts {get; set;}'. I populate these from the intial controller call. But on change of the 'triggering' drop down, I call the controller with JSON query, and 'repopulate' the dropdown. Commented Jun 8, 2015 at 6:50
  • I've added my investigation into EditorTemplates. But not sure how this works yet. Commented Jun 8, 2015 at 6:53
  • 1
    @Craig, sorry, that was a typo - yes it should be @Html.EditorFor(m => m.Details.AccountModel) Commented Jun 8, 2015 at 7:49

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.