[Asp.net MVC]Asp.net MVC5系列——佈局視圖

時間 2019-11-18

標籤 asp.net asp mvc mvc5 系列佈局視圖欄目 ASP 简体版

原文原文鏈接

系列文章

[Asp.net MVC]Asp.net MVC5系列——第一個項目java

[Asp.net MVC]Asp.net MVC5系列——添加視圖jquery

[Asp.net MVC]Asp.net MVC5系列——添加模型web

[Asp.net MVC]Asp.net MVC5系列——從控制器訪問模型中的數據mvc

[Asp.net MVC]Asp.net MVC5系列——添加數據asp.net

[Asp.net MVC]Asp.net MVC5系列——在模型中添加驗證規則佈局

[Asp.net MVC]Asp.net MVC5系列——實現編輯、刪除與明細信息視圖post

[Asp.net MVC]Asp.net MVC5系列——Razor語法

[Asp.net MVC]Asp.net MVC5系列——Routing特性

概述

因爲前段時間，項目一直吃緊，mvc的學習中斷了，週末了，內心一直惦記這事，很早就起來了，把以前寫的文章看了一遍，以便找到再次入手的地方，想開始，就想着最近的lync項目的管理端有用到asp.net的模版MasterPage，那就順便就說說asp.net mvc 中的佈局視圖吧。目前項目告一段落，我的正在將lync的羣組空間，使用mvc進行改寫。

佈局視圖

新建一個mvc5項目，你會在Views目錄下看到一個shared的文件夾，其中視圖_Layout.cshtml就是佈局視圖，相似於webform中的Masterpage。以下圖所示，

新建一個內容視圖，來應用該佈局視圖，如圖所示，

使用佈局頁後，會在視圖中生成以下代碼，每個視圖經過使用Layout屬性指定它的佈局：

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

<h2>Index</h2>

若是每一個視圖，應用同一個佈局，就會產生冗餘的代碼，而且難以維護，上面第一張圖中你也看到了有個_ViewStart.cshtml的視圖，該視圖很是簡單，只有一句代碼，指定默認的佈局：

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

這個文件中的代碼優先於同目錄下的任何視圖代碼的執行。這個文件也能夠遞歸地應用到子目錄下的任何視圖。

因爲這個代碼優先於任何視圖的運行，因此一個視圖能夠重寫Layout屬性的默認值，從而從新選擇一個不一樣的佈局。若是一組視圖擁有共同的設置，那麼_ViewStart.cshtml文件的好處就體現出來了，由於咱們能夠在它裏面對共同的視圖配置進行統一的設置。若是有視圖要覆蓋統一的的設置，咱們只須要修改對應的屬性值值便可。

若是不想應用模板頁，則指定Layout屬性爲null便可。

在_Layout.cshtml佈局視圖中，你總能夠找到相似下面的代碼：

   <div class="container body-content">
        @RenderBody()
   </div>

@RenderBody()是一個佔位符，用來標記使用這個佈局的視圖將渲染它們的主要內容的位置，若是您喲webform基礎，你它的功能就相似於webform中的ContentPlaceHolder，可是跟ContentPlaceHolder仍是有區別的，webform中ContentPlaceHolder根據id的不一樣能夠有多個，可是@RenderBody()有且只能有一個。

那若是咱們想在內容頁中使用引用的資源，好比css或者js怎麼辦？

在webform中咱們一般是這樣作的

MasterPage中

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

應用該模版的webform內容頁

1 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
2  <script type="text/javascript" src="../js/zTree/jquery-1.4.4.min.js"></script>
3 
4 </asp:Content>

在Asp.net mvc中是這樣處理的

@RenderSection

用於在模板佈局中定義一個區域，在內容頁能夠定義一些內容來填充這個區域，例如內容頁中引用的JS文件，能夠填充到模板頁的section位置。每一個內容頁的單獨一些信息，能夠在模板頁中這個區域顯示。

@RenderSection有兩個參數，第一個參數用於定義section的名稱，第2個參數是布爾類型，若是爲true，表示內容頁必須定義這個section,若是爲false,則表示內容頁可定義section，也能夠不定義。

例如在佈局頁中這樣寫

<head>
 @RenderSection("script",false);
</head>

在使用該佈局的視圖中

1 @section script{
2     <script type="text/javascript" src="../js/ParameterConfigJs.js"></script>
3     }

@RenderPage

另外也能夠使用 @RenderPage進行佈局

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

咱們在Shared文件夾下面新建一個footer.cshtml文件，而後裏面寫上版權信息，而後在模板頁中用來呈現footer頁面，以下：

1 <footer>
2             <p>@RenderPage("~/Views/Shared/footer.cshtml")</p>
3 </footer>

@Html.Partial()與Html.RenderPartial()

分部頁也能夠達到佈局的目的。

這兩個方法能夠用來輸出一個分部頁，右鍵添加新建項，選擇MVC5分部頁，就能夠添加一個分部頁，至關於webform中用戶控件頁。

@Html.Partial()的參數爲用戶控件名稱，也就是分部頁名稱，返回值爲string類型，能夠直接輸出。

@Html.RenderPartial()的參數也爲用戶控件名稱，返回值爲void,調用的時候直接把內容輸出到Response中。

例如：

1             @Html.Partial("_PartialDeptTree")
2             @{
3                 Html.RenderPartial("_PartialDeptTree");
4             }

能夠將組織結構數放在分佈視圖中來用。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。