程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> C# >> C#入門知識 >> C# Mvc.net 3.0 Razor Leyout布局視圖使用介紹

C# Mvc.net 3.0 Razor Leyout布局視圖使用介紹

編輯:C#入門知識

測試需要一個主頁入口點,這裡使用默認的路由設置就可以測試。

1.首先在默認的 homecollector 中建立一個 action,如下

    public ActionResult index()
    {
      return View();
    }

 

2.在 view/home 文件件下建立 MyLeyout.cshtml 視圖,內容如下

@{
    //some code
}
<!DOCTYPE html>

<html>
<head>
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        開始渲染Body<br />
        @RenderBody()
        渲染Body結束<br />
        <br />
        開始渲染 ViewPage1<br />
        @RenderPage("~/Views/Home/ViewPage1.cshtml")
        結束渲染 ViewPage1<br />
        <br />
        開始渲染 ViewPage2<br />
        @RenderPage("~/Views/Home/ViewPage2.cshtml")
        結束渲染 ViewPage2<br />
        <br />
        學習Section用法了<br />
        開始渲染Section<br />
        聲明方式1(推薦):SectionA:<br />
        @*引用頁無標記也不會異常,第二個三數如果為 true 則要求引用頁必須存在 SectionA 標簽*@
        @RenderSection("SectionA", false)
        -------<br />
       
        聲明方式2:SectionB:<br />
          @{
              //判斷是否存在標記 SectionB
              if (IsSectionDefined("SectionB"))
              {
                  @RenderSection("SectionB")
              }
          }
        -------<br />
       
        聲明方式3:SectionC:<br />
          @{
            //我們測試沒有定義過的 SectionC,頁面將出現異常
            //@RenderSection("SectionC") //測試時將注釋打開
          }
        -------<br />
        渲染Sction結束<br />
    </div>
</body>
</html>


 

3.在view/home 文件夾下建立一個 index.cshtm 文件,內容如下

 

@{
  ViewBag.Title = "首頁";
  Layout = "~/Views/home/MyLeyout.cshtml";
}
<!--
渲染整個頁面到 ~/Views/EBusiness/MyLeyout.cshtml 中的 RenderBody() 占位符
-->
<div>
    這裡就是渲染Body啦.
</div>

<!--
 ~/Views/EBusiness/MyLeyout.cshtml 中的 RenderSection("SectionA", false) 占位符需要的 siction 定義
-->
@section SectionA{
    <div>這裡是SectionA: 在 index 頁中聲明的</div>
}

<!--
 ~/Views/EBusiness/MyLeyout.cshtml 中的 RenderSection("SectionB") 占位符需要的 siction 定義,注意使用 IsSectionDefined("SectionB") 判斷一下
-->
@section SectionB{
    <div>這裡是SectionB: 也是在 index 頁中聲明的</div>
}

<!--
 ~/Views/EBusiness/MyLeyout.cshtml 中的 RenderSection("SectionC") 占位符,
 這裡沒有定義,如果代碼注釋打開就報異常了,以為沒有做判斷占位符是否存在。
-->

4.同上位置,建立 ViewPage1.cshtml 視圖

 

@{
  //ViewBag.Title = "首頁";
  Layout = null;
}
<!--
渲染整個頁面到 ~/Views/EBusiness/MyLeyout.cshtml 中的 RenderPage() 占位符 ,RenderPage 占位符可以使用多次
-->
<div>
    這裡就是渲染 viwpage1.chatml 的所有內容了
</div>
 

5.同上位置,建立 ViewPage2.cshtml 視圖 ,證明 RenderPage() 占位符可以多次聲明

 

@{
  //ViewBag.Title = "首頁";
  Layout = null;
}
<!--
渲染整個頁面到 ~/Views/EBusiness/MyLeyout.cshtml 中的 RenderPage() 占位符 ,RenderPage 占位符可以使用多次
-->
<div>
    這裡就是渲染 viwpage2.chatm2 的所有內容了
</div>
 看著代碼有多又亂,看看注釋應該可以明白的

 

 

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved