ASP.Net MVC中页面嵌套的使用教程

版权声明:.net/web/医疗技术的木子纵横的个人分享 https://blog.csdn.net/muzizongheng/article/details/85164740
  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.最终页面效果如下:

猜你喜欢

转载自blog.csdn.net/muzizongheng/article/details/85164740