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.最终页面效果如下:

 

muzizongheng CSDN认证博客专家 育儿达人 心理学爱好者
熟悉.net技术栈、web技术栈、ELK、xml/xslt/xsd、mfc、python等;熟悉DICOM、IHE熟悉敏捷、DDD
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页