Layout的使用

最新推荐文章于 2024-07-30 09:35:02 发布

wuke666666

最新推荐文章于 2024-07-30 09:35:02 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

文章标签： Layout的使用

本文链接：https://blog.youkuaiyun.com/wuke666666/article/details/89926986

本文介绍了如何使用Layout在Razor模板中实现页面组件化搭建，通过_Layout.cshtml作为母板页实现整体框架的重用，并讲解了子页面如何设置主内容以替换到母板页的 RenderBody() 方法中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文目标

1.能够重用Razor模板进行页面的组件化搭建
**

本文目录

1.母板页_Layout.cshtml

2.用户自定义控件

3.默认Layout引用的使用(_ViewStart.cshtml)
1.母板页_Layout.cshtml
类似于传统WebForm中的.master文件，起到页面整体框架重用的目地

1.母板页代码预览


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>List</title>
</head>
<body>
    <div>
         <div style="width:100%;height:200px;background-color:thistle;text-align:center;color:honeydew">
             @RenderSection("Header")
         </div>
        <div style="width:100%;height:500px;background-color:tomato;text-align:center;color:aliceblue">
            @RenderBody()
        </div>
        <div style="width:100%;height:200px;background-color:plum;text-align:center;color:dimgray">
            @RenderSection("Footer")
        </div>
    </div>
</body>
</html>

子页面主内容的设置

**
页面主内容是由@RenderBody()来标识的。子页面的内容直接替换到该方法处。


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

@section Header{
    这是头部内容
    }
    这是身体内容
@section Footer{
    这是脚部内容
    }

效果如下：
在这里插入图片描述