ASP.NET Core MVC 拆分 cshtml

在 MVC 中我們預設會將網頁寫在 Views 資料夾下的和 Controller 同名的資料夾內的和 Action 同名的 cshtml 檔案中，常常寫著寫著 cshtml 就越來越胖，通常我們會希望單一檔案負責的部分不要太多，讓職責分明，也能夠容易復用程式碼，這時候就可以使用下面的方式來拆分 cshtml 檔案

建立部分頁面(Partial View)

我們通常會在 Controller 同名的資料夾內建立以底線開頭的 cshtml 檔案存放 Partial View，例如 _StudentGrid.cshtml ，若檔案較多也可以建立 Partial 資料夾並放置在內。

假設我們有一個表格用來呈現學生資料，在多個地方都會使用到同樣的表格，那我們就可以建立一個 Partial View ，將呈現表格的 HTML 寫在裡面，就可以不用每次都重寫了。

學生物件：

    
public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }
}
    

表格：

    
@model List<Student>?

<h2>這是精美的表格</h2>

<table class="table">
	<thead>
	<tr>
		<th>學號</th>
		<th>姓名</th>
	</tr>
	</thead>
	<tbody>
	@if(@Model != null)
	{
		foreach (var student in @Model)
		{
			<tr>
				<td>@student.Id</td>
				<td>@student.Name</td>
			</tr>
		}
	}
	</tbody>
</table>
    

顯示 Partial View :

    
<partial name="_StudentGrid.cshtml" />
    

在 Partial View 裡面可以讀取到原本頁面的 @Model，但如果想要傳入資料進去的話也可以使用 model

    
@{
	List<Student> students = new()
	{
		new Student { Id = 1, Name = "小明" },
		new Student { Id = 2, Name = "大頭" },
		new Student { Id = 3, Name = "小美" }
	};
}
<partial name="_StudentGrid.cshtml" model="students"/>
    

延伸閱讀：
ASP.NET Core MVC 動態使用 cshtml partial