在视图中渲染多个强类型的局部视图？

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'.

Answer 1

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 .

Answer 2

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

Answer 3

Invoice.cshtml likely starts with:

@model ProOptInteractive.ViewModels.InvoicePageViewModel

replace it with:

@model ProOptInteractive.ViewModels.InvoiceViewModel

Answer 4

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

...

Answer 5

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.