如何在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方法被调用的地方。最终合并的页面就会被发送到浏览器。
接下来这个过程中,您将会创建一个包含两个内容块(一个Header和一个Footer)的页面,这些内容块是单独存在在不同文件中的。您也可以在网站中的任何页面中使用这些内容块。操作完成之后,您将会得到一个类似效果:
- 在网站的根目录下,创建一个名为Index.cshtml的文件。
- 用以下内容替换文件默认生成的所有内容:
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">© 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"> © 2012 Contoso Pharmaceuticals. All rights reserved. </div> </body> </html>