你的位置:首页 > 软件开发 > ASP.net > 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

发布时间:2015-10-11 18:00:11
如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]一、布局页面介绍[About Layout Pages]  很多网站有些内容需要显示在各个页面中,比如He ...

如何get='_blank'>ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

一、布局页面介绍[About Layout Pages]

  很多网站有些内容需要显示在各个页面中,比如Header,Footer或者告诉用户已经登录的部分。ASP.NET允许你创建一个单独的文件来包含文本、标签和代码的内容块,从而搭建一个风格整齐的网站。接下来你就可以将这个内容块插入到任何你想要让它展示的页面中。采用这种方法您不需要将这部分内容在各个页面中复制粘贴。由于创建了公共内容,也使您的更新维护更加简单。如果你需要修改这些内容,只需更新一个文件即可,这个修改操作但会反映到所有你应用了此内容的页面。

  下面展示了内容块是如何工作的。当一个web服务器请求一个页面时,ASP.NET便会将内容块插入到RenderPage方法被调用的地方。最终合并的页面就会被发送到浏览器。

 

如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

  接下来这个过程中,您将会创建一个包含两个内容块(一个Header和一个Footer)的页面,这些内容块是单独存在在不同文件中的。您也可以在网站中的任何页面中使用这些内容块。操作完成之后,您将会得到一个类似效果:

如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

  1. 在网站的根目录下,创建一个名为Index.cshtml的文件。
  2. 用以下内容替换文件默认生成的所有内容:
     1 <!DOCTYPE html> 2 <html> 3  <head> 4   <title>Main Page</title> 5  </head> 6  <body> 7   <h1>Index Page Content</h1> 8   <p>This is the content of the main page.</p> 9  </body>10 </html>

             注意文件_Header.cshtml是以下划线(_)为前缀的。如果一个页面的名字以下线线开头,ASP.NET则不会将其发送到浏览器。从而阻止人们向这些页面直接发起的请求。因为您并不真的希望用户请求这些页面—他们的存在只是作为插入到其他页面的,所以用下划线前缀为这些内容块页面命名是一个很好的主意。

      6.  在Shared文件夹中,创建_footer.cshtml视图文件,并替换为以下内容:

    <div class="footer">&copy; 2012 Contoso Pharmaceuticals. All rights reserved. </div>

三、设计包含多个内容部分的布局页面[Designing Layout Pages That Have Multiple Content Sections]

  一个内容页面可以包含多个部分,这对于希望使用有可替换内容的多块区域布局是非常有用的。在这样的内容页面中,为每一部分单独命名,名称不能重复。在这个布局页面中,添加RenderBody()方法指定未命名(默认部分就是未命名)的部分出现。接下来添加RenderSection()方法来单独渲染已命名的部分。

  接下来展示ASP.NET如何处理分割成多部分的内容。内容页面中所有已命名的部分包含在一个部分块中。(如下面示例中被命名为Header和List。)框架会在布局页面中调用RenderSection()方法的地方插入内容部分。正如前面所见,未命名(默认)部分会插入到调用RenderBody()方法的位置。

如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

  接下来示范如何创建一个包含多内容部分的内容页面,以及如何使用支持多内容部分的布局页面渲染它。

  1. 在Shared文件夹中,创建_Layout2.cshtml文件
  2. 用以下内容替换生成的所有内容:
    <!DOCTYPE html><html> <head>  <title>Multisection Content</title>  <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> </head> <body>  <div id="header">   @RenderSection("header")  </div>  <div id="list">   @RenderSection("list")  </div>  <div id="main">   @RenderBody()  </div>  <div id="footer">   &copy; 2012 Contoso Pharmaceuticals. All rights reserved.  </div> </body></html>
      3.  在Shared文件夹中,打开_Layout2.cshtml页面并替换掉以下内容:

    @RenderSection("header")

    原标题:如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

    关键词:ASP.NET

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。