在視圖中渲染多個強類型的局部視圖？

Question

我有這個Index.cshtml類：

@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>

這是我的InvoicePageViewModel：

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

問題在於，無論何時加載此視圖，我都會收到錯誤消息，說我已將錯誤的模型傳遞給字典，並且未指定哪個部分視圖導致問題。 每個部分都有不同的模型類型，一個名為Product的IEnumerable，一個名為Service的IEnumerable，以及一個名為InvoiceViewModel的視圖模型的Invoice局部視圖。

任何人都可以解釋如何使這項工作？ 順便說一句，我在Razor和MVC上有點菜鳥。

UPDATE

我收到此錯誤消息：

傳遞到字典中的模型項的類型為“ProOptInteractive.ViewModels.InvoiceViewModel”，但此字典需要“ProOptInteractive.ViewModels.InvoicePageViewModel”類型的模型項。

Answer 1

該錯誤是因為您已將“ Invoice部分視圖設置為具有類型為InvoicePageViewModel的模型，但您正在InvoicePageViewModel傳遞InvoiceViewModel類型的模型。

更新您的InvoiceViewModel屬性為類型InvoicePageViewModel ，或更改Invoice使用類型的模型圖InvoiceViewModel 。

Answer 2

錯誤在行<div>@Html.Partial("Invoice", Model.InvoiceViewModel)</div>

您的視圖Invoice正在接受InvoicePageViewModel類型的模型，並且您正在傳遞InvoiceViewModel

將您的代碼更改為<div>@Html.Partial("Invoice", Model)</div>

或修改您的Invoice視圖以接受InvoiceViewModel為

@model ProOptInteractive.ViewModels.InvoiceViewModel

Answer 3

Invoice.cshtml可能以以下內容開頭：

@model ProOptInteractive.ViewModels.InvoicePageViewModel

替換為：

@model ProOptInteractive.ViewModels.InvoiceViewModel

Answer 4

您可以將模型傳遞到部分視圖，如下所示：

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

或類似的東西。

主視圖模型：

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

然后更新您的局部視圖以接受這樣的視圖模型：

@model InvoiceViewModel

...

Answer 5

我發現了錯誤。 它在於控制器方法。 當我調用Index視圖（對應於ActionResult Index方法）時，我將viewmodel InvoiceViewModel返回到Index頁面，即使它強烈鍵入InvoicePageViewModel。 我把它改成了這個，它有效：

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);
}

感謝大家的所有幫助和建議。