Mvc4 Layout布局与页面SEO信息title,keyword,description
工作已经五个年头了,在进入工作岗位时最初在.net 2.0平台一直到现在的.net 4.0平台下,开发了不少的winform、webform项目;五年的工作时间,在公司主持开发和维护了不少的电子商务web项目,基本上可以说使用webform开发项目达到收发自如境界; 尽管mvc2,3,4都已经出来那么长时间了,却从来没有正式在项目中使用过。于是两月前买了本mvc4的书来通看了一遍,知道了原理,我也就直接过渡到MVC4的学习及使用阶段了。 今天成都的天气很凉爽,下了一天的雨,也算是一场秋雨一场凉了,就没有出去耍了,宅在家里学习提高,练习练习mvc4,要不然咱们技术就真out了。
上图是一个常见网站的页面布局,每个页面除了Header和Footer几乎不变外,中间部份是变化最多的;在以前使用webform做网站的时候,一般可以使用母版页与用户控件来进行布局。
如下代码所示(母版页):
<%@ Page Title="" Language="C#" MasterPageFile="~/SystemManagement/admin_page.master" AutoEventWireup="true" CodeBehind="OrderList.aspx.cs" Inherits="SystemManagement.Order.OrderList" %> <asp:Content ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ContentPlaceHolderID="pagetitle" runat="server"> 用户订单管理 </asp:Content> <asp:Content ContentPlaceHolderID="pageinfo" runat="server"> <hr style="border: 1px dashed #DDDDDD;" /> </asp:Content> <asp:Content ContentPlaceHolderID="pagesarch" runat="server"> </asp:Content> <asp:Content ID="Body" ContentPlaceHolderID="body" runat="server"> </asp:Content>
我相信很多的开发者都使用过母版页来布局的;随着工作时间的越长,后来我更倾向于使用UserControl来布局了。
如下代码所示(用户控件)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WeiKe.Site.aspx.Default" %> <%@ Import Namespace="WeiKe.Common" %> <%@ Register Src="controls/Head.ascx" TagName="Head" TagPrefix="uc1" %> <%@ Register Src="controls/Footer.ascx" TagName="Footer" TagPrefix="uc2" %> <%@ Register Src="controls/TopStar.ascx" TagName="TopStar" TagPrefix="uc3" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> <%=PageTitle %></title> </head> <body> <div id="bc"> <uc1:Head runat="server" /> <div class="right">每个页面的内容区。。。</div> <uc2:Footer runat="server" /> </div> </body> </html>
使用用户控件相当灵活是其优点之一。
我们再来体验一把mvc4使用Layout布局。
新建一个mvc4项目时选择Internet Application时会自动生成8个目录,里面有很多文件;默认用于mvc4项目布局的就是_Layout.cshtml文件了,如下图所示:
_Layout.cshtml文件就相当于母版页的作用了,Layout的作用就是统一整个站点的风格,减少大部分页面的html,head,body标签。互联网的项目少不了要做seo,针对每个页面的titl,keyword,description写不同的内容。
现有问题:使用Layout时,每个页面怎样设置titl,keyword,description,这些内容可以是从数据库里面取出来的。
使用webform的时候,我们可以写一个基类(BasePage),让所有的页面继承此基类,就可以在此基类里面统一控制所有页面的title,keyword,description等信息;如下加粗显示代码所示:
public class BasePage : Page { /// <summary> /// 页面的SEO信息的变量 /// </summary> protected string PageTitle, PageKeyWords, PageDescription; /// <summary> /// 构造函数 /// </summary> public BasePage(SeoEnum seo) { Model.SeoPageInfo model = new BLL.SeoPageInfo().GetModel((int)seo); if (model != null) { this.PageTitle = model.PageTitle; this.PageKeyWords = model.PageKeyWords; this.PageDescription = model.PageDescription; } this.Load += new EventHandler(BasePage_Load); } /**************其它省略的代码*****************/ }
上面代码加粗部分是直接在基类定义的受保护变量。继承了BasePage类的页面只需要在构造函数里面如下调用即可。
public partial class Default : BasePage.BasePage { public Default() : base(SeoEnum.首页) { } }
前台html代码如下:
<head> <title> <%=PageTitle %></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="zh-CN" /> <meta name="keywords" content="<%=PageKeyWords %>" /> <link href="/favicon.ico" type="image/x-icon" /> <meta name="description" content="<%=PageDescription %>" /> <link href="/style/style.css" rel="stylesheet" type="text/css" /> </head>
当然上面的实现方式可以修改下,以编程的方式向head里面添加keywords,description等信息,这样就可以不用在html代码里面出现小脚本代码了。
上面说的都是webform时代的处理方式,那使用mvc4全新开发的项目这些细节的东西是我们不得不考虑的东西,那我们又怎样实现呢?
方式一:
首先在Layout文件里面写如下代码:
<title>@ViewBag.Title</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="description" content="@ViewBag.Description" /> <meta name="keywords" content="@ViewBag.Keywords" />
然后在Controller或者View文件里面写如下代码了。
public class HomeController : Controller { public ActionResult Index() { ViewBag.Title = "这是网站的标题,格老子,每个页面都要这样子写好求烦人!当然,这里可以从数据库里面取了"; ViewBag.Description = "这是网站的描述信息,不要乱求整!当然,这里可以从数据库里面取了"; ViewBag.Keywords = "这是网站的关键字信息,请不要乱求写!当然,这里可以从数据库里面取了"; ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application."; return View(); } }
视图文件里面可以直接写
@{ ViewBag.Title = "这是网站的标题,格老子,每个页面都要这样子写好求烦人!"; ViewBag.Description = "这是网站的描述信息,不要乱求整!"; ViewBag.Keywords = "这是网站的关键字信息,请不要乱求写!"; }
方式二:
在layout文件里面如下定义:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> @RenderSection("metas") <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head>
之后在视图(View)文件这样子干即可:
@section metas { <title>这是网站的标题,格老子,每个页面都要这样子写好求烦人!</title> <meta name="description" content="这是网站的描述信息,不要乱求整!" /> <meta name="title" content="Title" /> <meta name="keywords" content="这是网站的关键字信息,请不要乱求写!" /> }
上面的两种方式我都觉得好麻烦,感觉没有webform下的那种做法方便,一个项目至少上百个页面的话,这样子手工一个一个页面文件的写,工作量太大了,对于想偷懒又想后期维护方面,确实我还没有找到好的方式,如有更好的方式统一接管了每个页面head里面的控件,那确实是功德一件;今天就到此吧,以后有空了再研究研究。。
最新文章
- JS网站右下角悬浮视窗可关闭广告
- AIX 环境下Telnet返回提示所有端口已经被占用,处理方法
- MVC 微信扫码支付
- 在Salesforce中创建Web Service供外部系统调用
- html5表单新特性
- 通过 XtraBackup 实现不停机不锁表搭建主从同步
- substr函数
- HTML5学习(七)----地理定位
- Spring对远程服务的支持
- 简单迷宫算法(递归与非递归C++实现)
- 第五节: Quartz.Net五大构件之Trigger的四大触发类
- md5Util
- 获取 Google USB 驱动程序
- python 数据序列化(json、pickle、shelve)
- AWS邮件通知服务:实时监控邮件状态
- MySQL死锁原因分析
- 【Semantic segmentation】Fully Convolutional Networks for Semantic Segmentation 论文解析
- 利用你的Mission Control--设置快速回到桌面等操作
- 配置idea解决乱码
- import学习
热门文章
- Succession
- CSS3 GPU硬件加速
- cookie 设置有效期 检测cookie
- HTTP协议详解之响应篇
- 5、main方法详解
- webview使用遇到 It is possible that this object was over-released, or is in the process of deallocation错误的解决办法
- HUDOJ-----1394Minimum Inversion Number
- POJ--Strange Way to Express Integers
- mongoDB系列之(二):mongoDB 副本集
- 总结Codeigniter的一些优秀特性