工作已经五个年头了，在进入工作岗位时最初在.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里面的控件，那确实是功德一件；今天就到此吧，以后有空了再研究研究。。

Mvc4 Layout布局与页面SEO信息title,keyword,description的更多相关文章

  1. 【seo】title / robots / description / canonical

    1.title title,就是浏览器上显示的那些内容,不仅用户能看到,也能被搜索引擎检索到(搜索引擎在抓取网页时,最先读取的就是网页标题,所以title是否正确设置极其重要. 1)title一般不超 ...

  2. 前端页面 title keyword description的添加

    用法:<title>网站标题</title> 用法:<meta name=”Keywords” Content=”关键词1,关键词2,关键词3,关键词4″> 用法: ...

  3. 在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计

    在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今 ...

  4. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  5. 前端页面 SEO 优化

    SEO要点:1.语义化html标签,用合适的标签嵌套合适的内容,不可过分依赖div,对浏览器更友善就能更容易被抓取.2.重要的内容html代码放在前面/左边.搜索引擎爬虫是从左往右,从上到下进行抓取的 ...

  6. h1、h2、h3标签及strong标签对页面seo的影响

    今天和大家来聊下h1,h2,h3,strong几个标签,在网页中的使用对页面seo的影响,也阐述了个人的一些想法. 首先简要讲下H标签及strong标签的含义:<h1>.<h2> ...

  7. 页面头部title、description、keywords标签的优化

    页面头部优化<Head></Head>中间的区域中间的区域,我们称为网页的头部.在网页的头部中,通常存放一些介绍页面内容的信息,例如页面标题.描述及关键字等等.在头部优化中,除 ...

  8. ASP.NET MVC3 系列教程 – 新的Layout布局系统

    原文地址:http://www.cnblogs.com/highend/archive/2011/04/18/asp_net_mvc3_layout.html I:回忆MVC2当中MasterPage ...

  9. 解决thymeleaf layout布局不生效

    今天使用thymeleaf layout布局时总是不生效,特此把解决问题的步骤和几个关键点记录下来备忘. 一.检查依赖 1.thymeleaf必备maven依赖: <dependency> ...

随机推荐

  1. VMWare虚拟机“锁定文件失败“怎么办？

    虚拟机突然蓝屏了,然后就启动不了了,提示"锁定文件失败,打不开磁盘或快照所依赖的磁盘"的解决方法: 如果使用VMWare虚拟机的时候突然系统崩溃蓝屏,有一定几率会导致无法启动,会提 ...

  2. git检查与放弃本地的代码修改情况

    git diff  可以查看当前没有add 的内容修改(不在缓冲区的文件变化) git diff --cached查看已经add但没有commit 的改动(在缓冲区的文件变化) git diff HE ...

  3. IP共享重新验证

    大家在进入共享机器的时候,在运行窗口中输入了 \\IP 然后会有账户和密码验证, 有时为了方便选择了记忆密码账号,这样下次就不会再验证了. 但是,有时你当时输入的账户没有你需要打开的某个文件的权限,就 ...

  4. iOS- 快速实现展示布局

    概述 比较有规律的页面, 快速实现展示布局, 提高开发效率. 详细 代码下载:http://www.demodashi.com/demo/10713.html 看到这个界面,是不是觉得不像那种比较有规 ...

  5. spring.net aop 讲解

    spring.net aop几个术语: 切面:针对类 切点:针对方法 object.xml <?xml version="1.0" encoding="utf-8& ...

  6. Python接通图灵机器人

    图灵机器人 图灵机器人特别low,问答水平并不高. import requests print("你好,我是图灵机器人") while 1: s = input() resp = ...

  7. JavaScript：用JS实现加载页面前弹出模态框

    用JS实现加载页面前弹出模态框 主要的JavaScript 代码是: <script> //加载模态框 $('#myModal').modal(); $(document).ready(f ...

  8. linux 常用awk命令

    linux awk命令详解awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每 ...

  9. 有效Log4j按指定级别定向输出日志到指定的输出文件地址配置Threshold，log4j中如何屏蔽父logger输出源rootlogger的additivity配置，log4j向多个文件记录日志

    log4j向多个文件记录日志 关键配置,指定想要的日志级别信息输出到指定的日志文件中: log4j.appender.errorLogger.Threshold=ERROR #扩展,可指定只在子类自己 ...

  10. 分享一款眼睛保健小软件 EyeDefender 多关注下眼睛的健康

    http://www.nowamagic.net/librarys/veda/detail/2248 感觉最近视力又下降了不少,估计又要重新配眼镜了.总是对着电脑一坐就好几个小时,眼睛老是紧绷着,焦距 ...