Asp.net MVC4高級編程學習筆記-視圖學習第三課Razor頁面佈局20171010

Razor頁面佈局

1)  在佈局模板頁中使用@RenderBody標記來渲染主要內容。好比不少web頁面說頭部和尾部相同，中間內容部分使用@RenderBody來顯示不一樣的頁面內容。

2)  在佈局模板頁中使用@RenderSection(「SectionName」)來渲染SectionName的節點內容。

定義一個節點 Example:

@section SectionName{
    This is the <strong>Foot page</strong>.
}

　　 

默認狀況下每一個頁面須要爲佈局提供相應的節點定義。這裏有另一個重載方法能夠使頁面可選實現這個節點。

Example:

<foot>@RenderSection(「Foot」,required,false)</foot>

　　

還有一種作法是沒有定義相應的section能夠使用默認輸出內容。

Example:

@if(IsSectionDefined(「Foot」))
{
  RenderSection(「Foot」);
}
else
{
　　<span>This is the default foot.</span>
}

　　 

注意：模板委託更好的實現該方法，後續會學習到。 

 

3)  _ViewStart.cshtml用於指定一個默認的佈局，適用於多套模板時隨意切換佈局。若是某個視圖須要自定義佈局，能夠重寫Layout值來改變佈局方式。

如下是_ViewStart.cshtml文件中指定默認佈局頁的示例代碼：

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

　　

2)       指定部分視圖。

Example: 

public ActionResult Message()
{
      ViewBag.Message = "This is a partial view";
      return PartialView();
 }

 

這裏須要注意若是Message.cshtml的默認佈局由ViewStart指定的話，這裏將不會渲染布局頁面，除非在Message.cshtml中指定layout佈局才能夠渲染相應的佈局頁面。

4)  使用Ajax更新分部視圖。

在A視圖中加載B視圖(message視圖)，A視圖代碼Example: 

<div id="result">測試消息</div> 

@section scripts
{
　　<script type="text/javascript"> 
   　　 $(function () {  
       　　 $("#result").load("/home/message");
   　　 });
　　</script>
}

 

視圖部分基礎知識學習就此告一段落了，之後還須要在項目中靈活運用。接下來後續會學習模型－Model。