1. 程式人生 > >ASP.Net MVC中頁面巢狀的使用教程

ASP.Net MVC中頁面巢狀的使用教程

  1. 建立Layout的view, 在Views資料夾右鍵Add/MVC x Layout Page

        

 

       程式碼如下:

 

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta content="width=device-width" name="viewport" />

    <title></title>

</head>

<body>

    <div class="container body-content">

        @RenderBody()

    </div>

</body>

</html>

 

也就是說把Layout指定為null, 防止應用了其他的layout, 然後建立完整的html節點, 在內容使用RenderBody為子頁面佔位。

 

  1. 建立子頁面, 

        

 

        

 

        

 

        生成的程式碼如下:

@{

    Layout = "~/Views/Shared/_Layout.cshtml";

}

 

此頁面屬於子頁面的大頁面,也就是說這個頁面除了導航欄什麼的還可以再分為上下左右等各個區域去渲染屬於它的子頁面。

比如新增下面程式碼到_ViewPage1.cshmtl中:

 

<div id="panel">

    <div id="topPanel">

        @RenderPage("_TopPage.cshtml")

    </div>

    <div id="bottomPanel">

        @RenderPage("_BottomPage.cshtml")

    </div>

</div>

 

此程式碼右把這個頁面分為上下兩個部分, 每個部分渲染的頁面也已指定。 

 

 

對於Layout屬性來說, 如果應用的layout是_ViewStart.cshtml指定的, 後面子頁面都應用的是這個佈局,則不需要重新指定; 否則,需要在view的頭部指定Layout屬性。

 

 

RenderPage指定的頁面不需要指定layout, 比如:

<div>

    <div style="color:#00FF00">

        <h3>This is a header</h3>

        <p>This is a paragraph.</p>

    </div>

</div>

 

3.最終頁面效果如下: