基于Razor 语法的动态页面编程（2）- 和谐统一的式样

可复用的界面元素，不仅可以提高开发效率，而且可以统一式样。

接下来，我们介绍：

1. 如何复用界面元素，比如header/footer
2. 如何使用layout page统一界面
3. 如何在runtime传递数据给layout page

以下罗列了几个概念：

• content block, 可以插入多个页面的html格式内容
• Layout page, 在页面间共享的html格式内容、
• RenderPage(),RenderBody(),RenderSection(), 在其调用处，将会插入些页面元素
• Page Data, 在Content block和Layout page间共享的数据字典

创建可复用的Block of Content

在~/Views/Shared/中创建复用的content block，如果不想Browser直接能访问到他们，可以在名字前面加上下划线，例如, _Footer.cshtml

在需要使用他们的页面：

@RenderPage("~/Views/Shared/_Footer.cshtml")

使用Layout Page 创建一致性的式样

同样，在~/Views/Shared/中创建复用的Layout page,例如，，_Layout.cshtml

其中没有实际的内容，只有页面的架子，是一个模板的概念，代码可能是这样：

    <div id="main"> 
      @RenderBody() 
    </div> 

而使用这个_Layout.cshtml的页面是这样，需要指定一个链接去到Layout page：

@{ 
    LayoutPage = "~/Views/Shared/_Layout1.cshtml"; 
} 

在Layout page中设计多个内容段

在Layout page中，当需要由content page指定具体的内容段时，放一个@RenderSection(“sectionName”),多个sectionName不要重复。

      <div id="header"> 
        @RenderSection("header") 
      </div> 
      <div id="list"> 
        @RenderSection("list") 
      </div> 
      <div id="main"> 
        @RenderBody() 
      </div> 

而在content page中，可以提供那些sectionName的内容段：

@section header { 
    <div id="header"> 
        Chapter 3: Creating a Consistent Look 
    </div> 
} 
 
@section list { 
    <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Dolor</li> 
        <li>Consecte</li> 
        <li>Eiusmod</li> 
        <li>Tempor</li> 
        <li>Incididu</li> 
    </ul> 
}

 

与@RenderPage相比，section适合与content page提供更轻便的内容

让内容段成为可选择性的

采用下面两种方法，可以让Layout page里定义的section成为可选择性的，也就是说，content page里可以不定义那些section:

      <div id="header"> 
        @RenderSection("header",optional:true) 
      </div> 
      <div id="list"> 
        @if (IsSectionDefined("list")) { 
            @RenderSection("list") 
        }   
      </div> 

当content page中没有定义这些section,或者section的内容为空时，运行时也不会报错。

传递数据给Layout page

通过PageData字典，可以将content page中的变量传递给Layout page，以便完成一些显示逻辑：

@{  
    LayoutPage = "~/Views/Shared/_Layout3.cshtml"; 
 
    PageData["Title"] = "Passing Data"; 
    PageData["ShowList"] = true; 
     
    if (IsPost) { 
        if (Request["list"] == "off") { 
            PageData["ShowList"] = false; 
        } 
    } 
}

在Layout page可以根据PageData来完成不同显示逻辑：

      @if (PageData["ShowList"] == true) { 
          <div id="list"> 
            @RenderPage("~/Views/Shared/_List.cshtml") 
          </div> 
      }