MVC模板頁

來源:互聯網
上載者:User

標籤:style   blog   http   color   使用   檔案   

http://blog.csdn.net/zx13525079024/article/details/8301943

 

這一節示範下MVC3中怎樣使用模板頁,在傳統的webform設計模式中,我們使用masterpage作為模板頁,在MVC3 razor視圖設計中,我們使用另一種方式作為模板頁。

建立一個MVC3項目,在解決方案資源管理中,我們可以看到VIEWS檔案夾下面有一個Shared檔案夾。在Shared檔案夾裡面有一個_Layout.cshtml頁面。這個就是項目中預設的模板頁面。如

       

    1.建立內容頁

        內容頁在MVC3中也叫做視圖布局頁,可以右鍵選中視圖檔案夾,通過添加視圖來新增內容頁,然後選擇相應的模板。下面就是我們建立的內容頁ViewPageOne.cshtml

   

    使用模板頁的頁面,會自動在頁面中產生代碼。來指定模板頁,使用Layout來指定具體的模板頁。如果內容頁中沒有Layout屬性,則使用的是預設的模板頁

 

@{    ViewBag.Title = "ViewPageOne";    Layout = "~/Views/Shared/_Layout.cshtml";}<h2>ViewPageOne</h2>
View Code

 

如果Layout指定為null,則表示不使用模板頁

@{    ViewBag.Title = "ViewPageOne";    Layout = null;}
View Code

2.建立模板頁

      右鍵選擇Shared檔案,然後在菜單中選擇添加 建立項,彈出添加新項對話方塊,然後選擇MVC3布局頁,這樣就添加完成了布局頁,下面的我們添加的布局頁_LayoutPageOne.cshtml

   

    3.為某個檔案單獨指定模板頁

     假如某個頁面不想使用預設的模板頁,可以單獨為其指定模板頁,下面的代碼把內容頁的模板頁指定為剛建立的模板頁_LayoutPageOne.cshtml

 

@{    ViewBag.Title = "ViewPageOne";    Layout="~/Views/Shared/_LayoutPageOne.cshtml";}<h2>ViewPageOne</h2>
View Code

 

 4.為某個視圖檔案夾指定模板頁

      假如想讓一個Controller下面的所有視圖使用同一個模板檔案,可以在該Controller對應的試圖檔案夾下面建立一個_ViewStart.cshtml檔案,然後在_ViewStart.cshtml裡面指定所使用的模板頁

     

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

這樣就可以把一個controller下面的視圖指定為使用一個模板檔案

    5.頁面不使用模板頁

     如果一個內容頁面不想使用模板頁,可以把_Layout設定為null

     也可以在添加視圖頁面的時候不選擇模板。

 

   [email protected]()

    @RenderBody()在模板頁中使用表示內容頁在模板中的位置。當建立具有模板頁的內容頁的時候,內容頁就呈現在模板頁中@RenderBody()所在的位置,

 一個模板頁中只能有一個@RenderBody().

 

   [email protected]

  @RenderSection用於在模板布局中定義一個地區,在內容頁可以定義一些內容來填充這個地區,例如內容頁中引用的JS檔案,可以填充到模板頁的section位置。每個內容頁的單獨一些資訊,可以在模板頁中這個地區顯示。

  @RenderSection有連個參數,第一個參數用於定義section的名稱,第2個參數是布爾類型,如果為TRUE,表示內容頁必須定義這個section,如果為false,則表示內容頁可定義section,也可以不定義.

   模板頁

 

 

<!DOCTYPE html><html><head>    <title>歡迎 @ViewBag.Title</title></head><body>    <p>第2個模板頁</p>    <div>        @RenderBody()    </div>      <div>          備忘:           @RenderSection("Remark", false);        </div></body></html>
View Code

 

內容頁

@{    ViewBag.Title = "首頁";}<h2>@ViewBag.Message</h2><p>    若要瞭解有關 ASP.NET MVC 的更多資訊,請訪問 <a href="http://asp.net/mvc" title="ASP.NET MVC 網站">http://asp.net/mvc</a>。</p>@section Remark{    我是首頁    }<p>歡迎</p>
View Code

[email protected]

  @RenderPage用於表示在一個頁面中呈現另一個頁面的內容.參數指定要呈現的網頁的位置。

  我們在Shared檔案夾下面建立一個footer.cshtml檔案,然后里面寫上著作權資訊,然後在模板頁中開闢一塊位置用來呈現footer頁面,

 

<!DOCTYPE html><html><head>    <title>歡迎 @ViewBag.Title</title></head><body>    <p>第2個模板頁</p>    <div>        @RenderBody()    </div>      <div>          備忘:           @RenderSection("Remark", false);        </div>    <footer>        @RenderPage("~/Views/Shared/footer.cshtml")    </footer></body></html>
View Code

 

 [email protected]()與Html.RenderPartial()    [email protected]()與Html.RenderPartial()這兩個方法可以用來輸出一個分部頁,右鍵添加建立項,選擇MVC3分部頁,就可以添加一個分部頁,相當於一個使用者控制項,

這時候就可以使用者兩個方法來輸出分部頁的內容,當然,這兩個方法也可以直接輸出視圖頁和內容頁。

   @Html.Partial()的參數為使用者控制項名稱,也就是分部頁名稱,傳回值為string類型,可以直接輸出。

   @Html.RenderPartial()的參數也為使用者控制項名稱,傳回值為VOID,調用的時候直接把內容輸出到Response中。

  用法如下:

 

<div id="logindisplay">                @Html.Partial("_PartialLogin")                @{                    Html.RenderPartial("_PartialLogin");                 }                           </div>
View Code

 

 

 

 

 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.