如何在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>

  

  3.  在根目录下,创建一个Shared文件夹。

注:在Web页面中通常将存在公共页面文件的文件夹命名为Shared。

  4.  在Shared文件夹下,创建一个_Header.cshtml视图文件。

    5.  用以下内容替换之:

<div class="header">This is header text.</div>

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

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

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

  7. 在Index.cshtml页面中,调用两次RenderPage()方法,如下所示:

<!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

    @RenderPage("~/Shared/_Header.cshtml")

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

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

  </body>
</html>

  以上展示了如何在一个web页面中添加内容块。调用RenderPage()方法并传入您希望插入内容的文件名。在这个示例中,您正在将_Header.cshtml和_Footer.cshtml文件中的内容插入到Index.cshtml文件中。

  8. 在浏览器中运行Index.cshtml页面。

  9. 在浏览器中,查看页面源代码。(例如,IE中,右建->点击查看源[View Source])。

  您会看到合并了Index页面标签和内容块(_Header.cshtml和_Footer.cshtml)之后,发送到浏览器的整个页面。下面的示例展示了Index.cshtml渲染之后的源代码。您添加到Index.cshtml中的RenderPage()方法调用被替换成了header和footer文件中实际内容。

<!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

  <div class="header">
    This is header text.
  </div>

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

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

  </body>
</html>
View Code

相关文章:

  • 2021-06-21
  • 2021-09-07
  • 2022-01-21
  • 2022-12-23
  • 2022-02-14
  • 2021-06-29
  • 2022-01-11
猜你喜欢
  • 2022-12-23
  • 2021-06-27
  • 2021-10-16
  • 2022-12-23
  • 2021-07-14
  • 2022-12-23
  • 2021-06-24
相关资源
相似解决方案