Question

I have a view that contains many partial views and I need to pass to each one the matching model.

I’ve found 2 ways to do this, but I don’t know whats the real way it should be done.

1. I thought of creating big class that contain all the models as properties and than i can send the models to each partial view. the problem is that its hard typed, and if i need to pass a diffrent combination of models it wont fit.

2. The other way I though of is having a methods in each model that bring me the model for each partial view (GetMenuBar() and so on).

Whats the right way doing that?

Answer 1

My advice, go with Option 1. I use that with all of my Main View/Multiple Partial View scenarios. It’s easy to maintain as each partial has it’s own ViewModel. It keeps the whole thing nice and clean

I use the exact same setup like so:

public class MainViewModel {

    public Partial1ViewModel Partial1 [ get; set; }
    public Partial2ViewModel Partial2 [ get; set; }
    public Partial3ViewModel Partial3 { get; set; }
    public Partial4ViewModel Partial4 { get; set; }

    public MainViewModel() {}

    public MainViewModel() {
        Partial1 = new Partial1ViewModel();
        Partial2 = new Partial2ViewModel();
        Partial3 = new Partial3ViewModel();
        Partial4 = new Partial4ViewModel();
    }
}

Each PartialViewXViewModel is it’s own ViewModel and if need be can be reused in another view.

Your Action that renders can look like so:

public ActionResult Index {
    var model = new MainViewModel();
    return View(model);
}

Your View

@model MainViewModel

<div>
    {@Html.RenderPartial("PartialOne", Model.Partial1)}
</div>


<div>
    {@Html.RenderPartial("PartialTwo", Model.Partial2)}
</div>


<div>
    {@Html.RenderPartial("PartialThree", Model.Partial3)}
</div>


<div>
    {@Html.RenderPartial("PartialFour", Model.Partial4)}
</div>

Define the UI for each PartialX like:

@model Partial1ViewModel

//view html here

Now, each Partial view html and each model that they use can be used anywhere.

The great part is now if you have a page that needs only 2 of these you just create a new ViewModel to represent that specific view like so:

public class OtherMainViewModel {

    public Partial2ViewModel Partial2 [ get; set; }
    public Partial4ViewModel Partial4 { get; set; }

    public OtherMainViewModel() {}

    public OtherMainViewModel() {
        Partial2 = new Partial2ViewModel();
        Partial4 = new Partial4ViewModel();
    }
}

And use it in another view like so:

public ActionResult SomeOtherAction {
    var model = new OtherMainViewModel();
    return View(model);
}

And that’s perfectly acceptable and also the preferred design strategy in MVC, to have ViewModels that specifically represent what a view needs and only what it needs.

You may want to use a different method for populating your models tho. Most here would recommend using Automapper. Either way, the above just initializes the PartialViewXModels in the constructor of the MainViewModel. That won’t necessarily be your case if you are populating those models with data from your DB. You would want your own strategy for that. This would work here:

public ActionResult Index {
    var model = new MainViewModel();
    model.Partial1 = GetPartial1Data(); // this method would return Partial1ViewModel instance
    model.Partial2 = GetPartial2Data(); // same as above for Partial2ViewModel
    ...
    return View(model);
}

This all would just get you started with the design, you can tweak it to your hearts content 🙂