Razor使用布局

1、创建布局页

布局页命名以下划线"_"开头

将布局页创建在Views/Shared文件夹下

Razor使用布局_第1张图片

布局页创建后内容:

html>

 

    ="viewport" content="width=device-width" />

    <title>@ViewBag.Titletitle>

<body>

   

        @RenderBody()

   

body>

@RenderBody 方法调用会将控制器Action方法定义的视图内容插入布局标记中

@ViewBag.Titile 布局页中的另一个Razor表达式会查找ViewBag.Title的属性,以便设置title元素的内容

ViewBag允许在应用程序中传递数据值,本例是指在布局和视图之间的传递,当布局应用到视图时,将可以看到这是如何工作的

2、设置布局

红色代码表示新增代码

html>

    ="viewport" content="width=device-width" />

    <title>@ViewBag.Titletitle>

   

 

@await RenderSectionAsync("Links", required: false)

<body>

   

产品信息

   

        @RenderBody()

   

body>

@await RenderSectionAsync 方法:与RenderBody方法一致,但RenderBody只能使用一次

都是允许 应用该布局的视图在该方法位置进行内容填写

3、操作视图应用布局

Home/Index.cshtml文件中内容改为以下代码:

@{

    Layout = "_MyLayoutPage";

    ViewBag.Title = "学生信息";

}

@section Links{

="stylesheet" href="~/css/MyCss.css" />

}

    <tr><th>名称th>  <th>性别th>tr>

 

    <tr><td>张三td>  <td>td>tr>

 

    <tr><td>李四td>  <td>td>tr>

Layout:指定该视图使用的布局页

运行:

Razor使用布局_第2张图片

4、代码讲解:

红色部分为视图页面的Html

Html源码:

    ="viewport" content="width=device-width" />

    <title>学生信息title>

    <style>

        #mainDiv {

            padding: 20px;

            border: solid medium black;

            font-size: 20pt;

        }

   

 

   

 

<body>

    <h1>产品信息h1>

    <div  id='mainDiv'>

       

           

               

               

           

 

           

               

               

           

 

           

               

               

           

       

名称 性别
张三
李四

body>

布局页:

@await RenderSectionAsync("Links", required: false)

 

视图页:

@section Links{

="stylesheet" href="~/css/MyCss.css" />

}

RenderSectionAsync

@RenderBody方法概念相同,但@RenderBody只能出现一次,RenderSectionAsync可以出现多次

参数1:该RenderSectionAsync的名称,不可重名

参数2:使用该布局的视图是否一定要使用此RenderSectionAsync

视图页使用方法:

@section 布局的RenderSectionAsync名称

{

//填写的内容..

}

你可能感兴趣的:(ASP.Net,MVC,.net,asp.net,c#)