起因

這是知識星球內的一個網友提出的，按理說ASP.NET MVC中一個檢視只能繫結一個模型（Model），在檢視頂部標識如下：

@model IEnumerable<FineUICore.Examples.Areas.DataModel.Models.Student>

檢視中可以表格列可以使用RenderFieldFor來繫結：

@(F.Grid().IsFluid(true).CssClass("blockpanel").Title("表格").ShowHeader(true).ShowBorder(true).ID("Grid1").DataIDField("Id").DataTextField("Name")
    .Columns(
        F.RowNumberField(),
        F.RenderFieldFor(m => m.Name),
        F.RenderFieldFor(m => m.Gender).RendererFunction("renderGender").Width(80),
        F.RenderFieldFor(m => m.EntranceYear),
        F.RenderCheckFieldFor(m => m.AtSchool).RenderAsStaticField(true),
        F.RenderFieldFor(m => m.Major).RendererFunction("renderMajor").ExpandUnusedSpace(true),
        F.RenderFieldFor(m => m.Group).RendererFunction("renderGroup").Width(80),
        F.RenderFieldFor(m => m.EntranceDate)
    ).DataSource(Model)
)
 

使用 RenderFieldFor 而不是 RenderField 列型別，好處是不需要書寫每個列屬性，FineUIMvc會檢視模型屬性的註解並自動完成屬性賦值工作：

作為對比，我們看下使用 RenderField 時檢視的標籤定義：

問題是，如果頁面上有多個表格需要繫結多個模型，該怎麼辦呢？

探索之路

拋開表格的資料繫結不談，如果想向檢視中傳遞多個數據，可以把一個作為模型物件傳入，其他的作為ViewBag傳入。

但是這個常見解決方法不適用於表格和表格的 RenderFieldFor 列，因為這個列是和檢視模型密切相關的，在VS的智慧提示幫助下，我們很容易發現這種關係：

可以看到傳入 RenderFieldFor 的 lambda表示式左側會被識別為模型的一部分，也就是說使用 RenderFieldFor 時模型類必須是 IEnumerable<> 泛型才對。

而一個檢視不可能傳入多個模型物件。

如果能將 模型和表格 繫結到一塊，類似 ASP.NET WebForms 中的使用者控制元件（UserControl），然後在主檢視中引入這些繫結好的塊豈不是很好？

其實ASP.NET MVC中有類似的解決方法，只不過不叫使用者控制元件，而稱為分部檢視（PartialView），下面我們就用分部檢視來實現上述功能。

1. 模型類（Student）上面已經介紹過了

2. 控制器，返回包含兩個物件元組物件

public IActionResult Index()
{
    var students = StudentHelper.GetSimpleStudentList();
    var model = new Tuple<IEnumerable<Student>, IEnumerable<Student>>(students.Where(m => m.AtSchool), students.Where(m => !m.AtSchool));
    return View(model);
}

3. 主檢視

@{
    var F = Html.F();
}

@using FineUICore.Examples.Areas.DataModel.Models;

@model Tuple<IEnumerable<Student>, IEnumerable<Student>>

@section body 
{

    @(Html.Partial("PartialGrid", Model.Item1, new ViewDataDictionary(ViewData) { { "__Title", "表格一（在校生）" } }))
    <br />
    @(Html.Partial("PartialGrid", Model.Item2, new ViewDataDictionary(ViewData) { { "__Title", "表格一（畢業生）" } }))
}

注意一下幾點：

3.1 模型型別是：Tuple<IEnumerable<Student>, IEnumerable<Student>>

3.2 在檢視中可以通過 Model.Item1 獲取元組中的第一個物件，相應的 Model.Item2 獲取第二個物件，從而省去了自定義類的麻煩

3.3 使用 Html.Partial 來渲染一個分部檢視，傳入三個引數：

----1. 分部檢視的名稱，會先在主檢視所在目錄中檢索，如果找不到會轉到 Shared 目錄檢索

----2. 傳入分部檢視的模型

----3. 額外的ViewData物件，如果需要引入多個分部檢視，可以在為每個分部檢視自定義顯示資料

4. 分部檢視（PartialGrid.cshtml）

@{
    var F = Html.F();
}

@model IEnumerable<FineUICore.Examples.Areas.DataModel.Models.Student>


@{
    var __Title = ViewData["__Title"].ToString();
}

@(F.Grid().IsFluid(true).CssClass("blockpanel").Title(__Title).ShowHeader(true).ShowBorder(true).DataIDField("Id").DataTextField("Name")
    .Columns(
        F.RowNumberField(),
        F.RenderFieldFor(m => m.Name),
        F.RenderFieldFor(m => m.Gender).RendererFunction("renderGender").Width(80),
        F.RenderFieldFor(m => m.EntranceYear),
        F.RenderCheckFieldFor(m => m.AtSchool).RenderAsStaticField(true),
        F.RenderFieldFor(m => m.Major).RendererFunction("renderMajor").ExpandUnusedSpace(true),
        F.RenderFieldFor(m => m.Group).RendererFunction("renderGroup").Width(80),
        F.RenderFieldFor(m => m.EntranceDate)
    ).DataSource(Model)
)

首先從 ViewData 獲取引數 __Title，然後在表格初始化時傳入 .Title(__Title)。

需要注意的一點，這裡不能將Grid的ID屬性設為固定值，因為頁面上可能會多次渲染此分部檢視，比如下面的程式碼：

@(F.Grid().ID("Grid1").IsFluid(true).CssClass("blockpanel").Title(__Title).

如果頁面上引入兩次本分部檢視，則頁面上會有兩個ID為 Grid1 的表格物件，這就搞錯了！

解決辦法有兩個：

1. 不設定 Grid 的 ID 屬性，這樣 FineUIMvc 會在頁面範圍內自動生成一個不重複的

2. 在主檢視呼叫 Html.Partial 時，傳入一個類似 __Prefix 的屬性，然後在分部檢視中為表格ID加上這個字首，有沒有一種ASP.NET WebForms的感覺：

主檢視：

@(Html.Partial("PartialGrid", Model.Item1, new ViewDataDictionary(ViewData) { { "__Prefix", "Connector1" }, { "__Title", "表格一（在校生）" } }))
<br />
@(Html.Partial("PartialGrid", Model.Item2, new ViewDataDictionary(ViewData) { { "__Title", "Connector2" }, { "__Title", "表格一（畢業生）" } }))

分部檢視：

@(F.Grid().ID(ViewData["__Prefix"].ToString() + "_Grid1").IsFluid(true).CssClass("blockpanel").Title(__Title).

最終頁面的顯示效果：

小結

這篇文章講解了如何在ASP.NET MVC檢視中繫結多個模型，解決之道就是分部檢視（PartialView），分部檢視類似於ASP.NET WebForms中的使用者控制元件，而不同之處在於分部檢視不會給內部的控制元件ID加上所在的層次結構，因此如果一個頁面中多次引入同一個分部檢視就需要注意ID是否重複的問題了。

這個示例會更新到 FineUIMvc v5.3.0 版本中，檢視 FineUIMvc 線上示例：http://mvc.fineui.com/