Asp.net MVC4高级编程学习笔记-视图学习第三课Razor页面布局20171010

Razor页面布局

1)  在布局模板页中使用@RenderBody标记来渲染主要内容。比如很多web页面说头部和尾部相同,中间内容部分使用@RenderBody来显示不同的页面内容。

2)  在布局模板页中使用@RenderSection(“SectionName”)来渲染SectionName的节点内容。

定义一个节点 Example:

@section SectionName{
    This is the <strong>Foot page</strong>.
}

   

默认情况下每个页面需要为布局提供相应的节点定义。这里有另外一个重载方法可以使页面可选实现这个节点。

Example:

<foot>@RenderSection(“Foot”,required,false)</foot>

  

还有一种做法是没有定义相应的section可以使用默认输出内容。

Example:

@if(IsSectionDefined(“Foot”))
{
  RenderSection(“Foot”);
}
else
{
  <span>This is the default foot.</span>
}

   

注意:模板委托更好的实现该方法,后续会学习到。 

 

3)  _ViewStart.cshtml用于指定一个默认的布局,适用于多套模板时随意切换布局。如果某个视图需要自定义布局,可以重写Layout值来改变布局方式。

以下是_ViewStart.cshtml文件中指定默认布局页的示例代码:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

  

2)       指定部分视图。

Example: 

public ActionResult Message()
{
      ViewBag.Message = "This is a partial view";
      return PartialView();
 }

 

这里需要注意如果Message.cshtml的默认布局由ViewStart指定的话,这里将不会渲染布局页面,除非在Message.cshtml中指定layout布局才可以渲染相应的布局页面。

4)  使用Ajax更新分部视图。

在A视图中加载B视图(message视图),A视图代码Example: 

<div id="result">测试消息</div> 

@section scripts
{
  <script type="text/javascript"> 
      $(function () {  
          $("#result").load("/home/message");
      });
  </script>
}

 

视图部分基础知识学习就此告一段落了,以后还需要在项目中灵活运用。接下来后续会学习模型-Model。

posted on 2017-10-10 17:27 shuyisheng 阅读(...) 评论(...) 编辑 收藏

导航

公告

统计