Render multiple strongly typed partial views inside a view?

Question

I have this Index.cshtml class:

@model ProOptInteractive.ViewModels.InvoicePageViewModel

@{
    ViewBag.Title = "Index";
}

<div>@Html.Partial("ListServices", Model.Services)</div>
<div>@Html.Partial("ListProducts", Model.Products)</div>
<div>@Html.Partial("Invoice", Model.InvoiceViewModel)</div>

And this is my InvoicePageViewModel:

namespace ProOptInteractive.ViewModels
{
    public class InvoicePageViewModel
    {
        public InvoiceViewModel InvoiceViewModel { get; set; }
        public IEnumerable<Service> Services { get; set; }
        public IEnumerable<Product> Products { get; set; }
    }
}

The issue is that whenever I load this view, I get an error saying that I have passed the wrong model to the dictionary, and it doesn't specify which one of the partial views is causing the problem. Each partial has a different model type, one IEnumerable called Product, another IEnumerable called Service, and the Invoice partial view having a viewmodel called InvoiceViewModel.

Can anybody explain how to go about making this work? I'm a bit noob at Razor and MVC by the way.

UPDATE

I get this error message:

The model item passed into the dictionary is of type 'ProOptInteractive.ViewModels.InvoiceViewModel', but this dictionary requires a model item of type 'ProOptInteractive.ViewModels.InvoicePageViewModel'.

**[Try loading the partial view sequentially](http://stackoverflow.com/a/15793019/2007801)** — , May 08 '13 at 12:13
The model item passed into the dictionary is of type 'ProOptInteractive.ViewModels.InvoiceViewModel', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[ProOptInteractive.Models.Service]'. — barnacle.m, May 08 '13 at 12:19
Try loading the Partial View Asynchronously. If you get error you can add more parameters to check **[which Partial View is causing the error as mentioned here](http://stackoverflow.com/a/16245682/2007801)** — , May 08 '13 at 12:21
Can you post your partialView code, maybe you didn't reference right view model there? — freshbm, May 08 '13 at 12:28
What are you passing from action method? ideally it should be InvoicePageViewModel. Also check the model specified in Invoice.cshtml that should InvoiceViewModel — vinodpthmn, May 08 '13 at 14:59

score 2 · Answer 1 · answered May 08 '13 at 12:48

2

The error is because you have set your Invoice partial view to have a model of type InvoicePageViewModel, yet you are passing it a model of type InvoiceViewModel.

Either update your InvoiceViewModel property to be of type InvoicePageViewModel, or change the Invoice view to use a model of type InvoiceViewModel.

answered May 08 '13 at 12:48

Mathew Thompson

55,877
15
127
148

Yes, almost certainly a type-o in the model declaration for the Invoice partial. – Forty-Two May 08 '13 at 14:01
It's exactly like this now, Invoice.cshtml has a model declaration called InvoiceViewModel. I've checked. Hence my confusion. – barnacle.m May 08 '13 at 19:41

score 2 · Answer 2 · answered May 08 '13 at 13:08

Error is in line <div>@Html.Partial("Invoice", Model.InvoiceViewModel)</div>

Your view Invoice is accepting model of type InvoicePageViewModel and you are passing InvoiceViewModel

Change your code to <div>@Html.Partial("Invoice", Model)</div>

or modify your Invoice view to accept InvoiceViewModel as

@model ProOptInteractive.ViewModels.InvoiceViewModel

score 2 · Answer 3 · edited May 08 '13 at 14:20

2

Invoice.cshtml likely starts with:

@model ProOptInteractive.ViewModels.InvoicePageViewModel

replace it with:

@model ProOptInteractive.ViewModels.InvoiceViewModel

edited May 08 '13 at 14:20

Radim Köhler

122,561
47
239
335

answered May 08 '13 at 14:02

rlesias

4,786
3
15
20

freshbm · Answer 4 · 2013-05-08T15:12:29.390

1

You can pass model to your partial view like this:

@Html.Partial("Invoice", Model.InvoiceViewModel)

or something similar.

Model for main view:

class InvoicePageViewModel {
...
    public InvoiceViewModel InvoiceViewModel { get; set; }
    public IEnumerable<Service> Services { get; set; }
    public IEnumerable<Product> Products { get; set; }
...
}

Then update your partial view to accept view model like this:

@model InvoiceViewModel

...

edited May 08 '13 at 15:12

answered May 08 '13 at 12:14

freshbm

5,540
5
46
75

that would require i instantiate three different models in one view, which is impossible – barnacle.m May 08 '13 at 12:17
You can create one Model and put all three partial models in it and pass it like Model.Product or something else – freshbm May 08 '13 at 12:20
I updated the question, I think I was already doing something similar to what you suggested. – barnacle.m May 08 '13 at 12:35

score 1 · Accepted Answer · answered May 08 '13 at 19:54

I discovered the error. It was lying in the controller method. When I called the Index view (which corresponds to the ActionResult Index method) I was returning the viewmodel InvoiceViewModel to the Index page, even though it was strongly typed to InvoicePageViewModel. I changed it to this, which works:

public ActionResult Index()
{

    var invoice = InvoiceLogic.GetInvoice(this.HttpContext);

    // Set up our ViewModel
    var pageViewModel = new InvoicePageViewModel
    {
        Products = proent.Products.ToList(),
        Services = proent.Services.ToList(),
        InvoiceViewModel = new InvoiceViewModel
    {

        InvoiceItems = invoice.GetInvoiceItems(),
        Clients = proent.Clients.ToList(),
        InvoiceTotal = invoice.GetTotal()
    }
};
    // Return the view
    return View(pageViewModel);
}

Thanks to everyone for all the help and suggestions.

Render multiple strongly typed partial views inside a view?

5 Answers5