.NET MVC第六章、@Html.Partial(string name)分布視圖
目錄
.NET MVC第六章、@Html.Partial(string name)分布視圖
Partial視圖
引入Partial
母版頁測試
Partial視圖
使用HTML輔助方法 Html.Partial()可以直接引用分部視圖
使用Partial需要單獨聲明一個【視圖層】
控制器
public ActionResult Show() {
return View();
}
partial視圖層
@{
ViewBag.Title = "Show";
}
<h2>作為Partial[ˈpɑːʃl]展示頁面</h2>
<hr />
<div>
<ul class="nav nav-pills">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">正文</a></li>
<li><a href="#">展示</a></li>
<li><a href="#">資源</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>
<hr/>
引入Partial
在首頁直接引入Partial(string)即可
@{
ViewBag.Title = "Index";
}
<h2>引入Partial</h2>
<hr />
@Html.Partial("Show")
<hr/>
母版頁測試
畫UI比較麻煩,我就簡單處理了一下。
很多時候插入模闆的方式還是使用母版頁進行處理的。一般使用上下結構/上左右結構這兩個類型比較多。我們可以根據具體的需求進行編輯。
在Razor引擎中沒有了“母版頁”,取而代之的是叫做“布局”的頁面(_Layout.cshtml)放在了共享視圖檔案夾中。在這個頁面中,會看到<body>标簽裡有這樣一條語句:
@RenderBody()
其實它的作用和母版頁中的<contentplaceholder>伺服器控件類似,當建立基于此布局頁面的視圖時,視圖的内容會和布局頁面合并,而新建立視圖的内容會通過布局頁面的@RenderBody()方法呈現在<body>标簽之間。
這個方法不需要參數,而且隻能出現一次。
RenderPage
從名稱可以猜出來這個方法是要呈現一個頁面。比如網頁中固定的頭部可以單獨放在一個共享的視圖檔案中,然後在布局頁面中通過這個方法調用,用法如下:
@RenderPage(“~/Views/Shared/_Header.cshtml”)
@RenderBody()
RenderSection
布局頁面還有節(Section)的概念,用于單獨呈現視圖模闆中定義的一個節,用法如下:
@RenderPage(“~/Views/Shared/_Header.cshtml”)
@RenderBody()
@RenderSection(“footer”)
當然還要在視圖中定義節,否則會出現異常:
@section footer {
<b>Footer Here</b>
}
為了防止因缺少節而出現異常,可以給RenderSection()提供第2個參數:
@RenderSection(“footer”, false)
MVC 中Html.RenderPartial與Html.RenderAction 和 Html.Partial 差別
Html.Partial是将視圖内容直接生成一個字元串并傳回
Html.RenderPartial方法是直接輸出至目前HttpContext
Html.RenderAction調用一下Action再重新執行一次Controller → Model → View的順序
它們在視圖中的使用方式是不同的:
<%Html.RenderPartial("MyPartialView");%>
<%Html.RenderAction("MyPartialView");%>
<%=Html.Partial("MyPartialView")%> (相當于一個字元串)
注意:RenderPartial以<%開頭,末尾有分号。而Partial,RenderAction以<%=開頭,末尾沒有分号。
這裡RenderPartial,RenderAction 方法不是傳回一個字元串,而是直接輸出内容到調用視圖模闆的輸出流中。 方法後使用分号,否則會導緻編譯器錯誤。這是因為<% %>代碼塊是一串代碼語句,在C#代碼中,需要通過分号辨別語句結束。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - 我的 ASP.NET 應用程式</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div>
<ul class="nav nav-pills">
<li class="active"><a href="~/Test/Index">首頁</a></li>
<li><a href="~/Test/Show">正文</a></li>
<li><a href="#">展示</a></li>
<li><a href="#">資源</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>
<div class="row">
<div class="col-lg-2">
<ul class="nav nav-stacked">
<li class="active"><a href="~/Test/Index">首頁</a></li>
<li><a href="~/Test/Show">正文</a></li>
<li><a href="#">展示</a></li>
<li><a href="#">資源</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>
<div class="col-lg-10">
@RenderBody()
</div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>