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

留言