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。