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。