MVC4 Razor @RenderSection -母版设置

本文详细介绍了MVC4中@RenderSection的使用方法及其在母版页和子页间的交互过程,包括如何在母版页中定义Section,以及子页如何实现或不实现该Section,并提供了异常处理策略。通过实例展示了如何在不同情况下呈现或自定义Section内容。


Mvc4的Razor视图引擎还提供了@RenderSection

我的理解:@RenderSection在母版页中占个位,然后让使用此母版页的子页自己去呈现他们的Section。

母版页_Layout.cshtml中定义@RenderSection("Section名")

复制代码
< body >
    
< div  id ="header" > @{Html.RenderAction("Menu", "Global");} </ div >
    
< div  id ="sideBar" >
      @RenderSection("SubMenu")
    
</ div >
    
< div  id ="container" > @RenderBody() </ div >
    
< div  id ="footer" > @{Html.RenderAction("Footer", "Global");} </ div >
</ body >
复制代码

 

添加一个About.cshtml,使用_Layout.cshtml做母版页

然后就可以在About.cshtml中定义"SubMenu"要呈现的内容

复制代码
@{
    ViewBag.Title = "About";
 }

 @section SubMenu{
    Hello This is a section implement in About View.
 }
复制代码

这里我在About.cshtml中实现了SubMenu,运行结果

 

但是当如果使用了_Layout.cshtml做母版页的页没有实现Section的话,

譬如我新建的Index.cshtml没有实现@section SubMenu{...},就会抛出异常

 

这是因为我在_Layout.cshtml中使用的是@RenderSection("SubMenu")他要求所有子页都要实现,

可以使用它的另外一个重载@RenderSection("SubMenu",false),第二个参数代表它不是必须的,就不会抛出异常。

 

还有,当我在母版页中定义了@RenderSection("SubMenu",false)的时候,我希望当所有子页都没有实现这个Section

的时候,母版页可以有自己的呈现内容,就可以用

 

复制代码
  < div id = " sideBar " >
       @if (IsSectionDefined(
" SubMenu " ))
        {
            @RenderSection(
" SubMenu " false )
        }
        
else
        {
            
< p > SubMenu Section  is  not defined !</ p >
        }
 
</ div >
复制代码

 这样当没有任何页面呈现Section的时候,就会默认显示定义的内容。

 

还有一种比较灵活的方法,通过扩展方法来实现

复制代码
  public   static   class  Utility
    {
        
public   static  HelperResult RenderSection( this  WebPageBase page,  string  sectionName, Func < object , HelperResult >  defaultContent)
        {
            
if  (page.IsSectionDefined(sectionName))
            {
                
return  page.RenderSection(sectionName);
            }
            
else
            {
                
return  defaultContent( null );
               
            }
        }
    }
复制代码

 

 在母版页中

@this.RenderSection( " SubMenu " , @ < div > default  section content </ div > )

 

 OK了!没有呈现Section时,就默认显示<div>default section content</div>.

`@RenderSection("style", required: false)` 和 `@RenderSection("scripts", required: false)` 是 ASP.NET MVCRazor 视图引擎的语法,用于在布局(Layout)中定义可选的内容区域。它们允许子视图(View)向布局注入自定义的样式和脚本内容。 --- ### 1. **作用说明** - **`@RenderSection("style", required: false)`**: - 允许子视图通过 `@section style { ... }` 向布局头部添加自定义 CSS 样式。 - `required: false` 表示这个区域是可选的,子视图可以不定义它。 - **`@RenderSection("scripts", required: false)`**: - 允许子视图通过 `@section scripts { ... }` 向布局底部(或任意位置)添加自定义 JavaScript 脚本。 - 同样,`required: false` 表示这个区域不是必须的。 --- ### 2. **使用方式** #### 在布局(Layout)中 ```csharp <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> @RenderSection("style", required: false) </head> <body> @RenderBody() @RenderSection("scripts", required: false) </body> ``` #### 在子视图(View)中 ```csharp @section style { <style> .custom-class { color: red; } </style> } @section scripts { <script> alert("Hello from child view!"); </script> } ``` --- ### 3. **注意事项** - 如果子视图没有定义某个 `@section`,而布局又将该区域设为 `required: true`,则会抛出异常。 - 推荐将 `scripts` 放在 `<body>` 结尾以提高面加载性能。 - 可以使用 `@section` 注入外部资源,如 CDN 链接、本地 JS 文件等。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值