您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 當(dāng)head遇上runat=server之后發(fā)生的糾結(jié)之事

當(dāng)head遇上runat=server之后發(fā)生的糾結(jié)之事

文章來源：365jz.com 點(diǎn)擊數(shù)：355 更新時(shí)間：2011-02-10 12:10 參與評論

關(guān)于這個(gè)問題網(wǎng)上很少有說到,本早想寫一篇文章來記錄,擱淺了挺久,其實(shí)在第一天寫asp.net程序時(shí)問題就誕生了,但是在上次項(xiàng)目之前做項(xiàng)目都沒有在意,甚至是注意它,其實(shí)也算是可以忽略掉的,碰巧上次項(xiàng)目正與它糾結(jié)上了,為了不影響項(xiàng)目導(dǎo)致大面積的修改嘗試了很多方法,請教了很多人,google了n遍,最后在項(xiàng)目上線之后一段時(shí)間才得以解決,心中大快,跟大家分享...

或許很多人也一樣沒有在意甚至注意這個(gè)問題吧,我們在Visual Studio中新建一個(gè).aspx或者.master頁面時(shí),html中的title標(biāo)簽?zāi)J(rèn)是加上runat="server"的,為什么會加?當(dāng)然是aspx頁面模版文件本身就有這個(gè)屬性的,也正是因?yàn)榧恿瞬拍芟硎艿絘sp.net特性帶來的便利(在服務(wù)器端進(jìn)行處理,比如asp.net4.0下MetaDescription，MetaKeywords的特性等),但便利的同時(shí)也出現(xiàn)了一些小小的瑕疵。

下圖為頁面head標(biāo)簽不加runat="server"運(yùn)行之后的效果,很整潔的按照我想要的格式輸出了：

但是給它加上runat="server"運(yùn)行之后,卻變成了如下圖的效果:

head加了runat="server"的效果

也許你會說這也沒什么啊,完全沒啥影響,我喜歡緊湊的感覺...

起初我也是這樣認(rèn)為,但是每次查看頁面源代碼的時(shí)候越看越覺得它不順眼,覺得它丑陋不堪,違背了我的意愿,為什么好好的代碼,格式不受我控制,加之領(lǐng)導(dǎo)說"你這個(gè)title換行是會影響SEO的啊,這個(gè)你注意下啊",這里暫時(shí)先不討論它是否真會影響SEO,既然領(lǐng)導(dǎo)也提出來了,可想而知,越來越糾結(jié),必須得解決它,cnblogs提問,未解,google了n遍,未解,但是在園子里玉開的這篇文章中找到了些線索,在這里非常感謝他的指引,雖然當(dāng)時(shí)給了建議，但是出于本人對asp.net也只是淺嘗輒止的程度所以當(dāng)時(shí)沒能解決問題,于是擱淺了段時(shí)間.有天在優(yōu)化網(wǎng)站的時(shí)候,查看網(wǎng)頁的源代碼又發(fā)現(xiàn)了它,真是冤家路窄的感覺,于是又開始google,帶著玉開給我的ControlAdapter終于還是發(fā)現(xiàn)一個(gè)跟我同樣糾結(jié)的哥們,當(dāng)然問題也得到了解決...下面給出解決方案以及demo下載:

示例解決方案圖如下:

WithoutRunatServer.aspx頁面是正常頁面只做對比用，詳細(xì)代碼請下載demo查看

WithRunatServer.aspx代碼如下:

WithRunatServer.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WithRunatServer.aspx.cs"
  Inherits="Web.WithRunatServer" %>
<!doctype html>
<html>
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible" />
    <title>Head With Runat Server</title>
    <meta name="keywords" content="Head With Runat Server" />
    <meta name="description" content="Head With Runat Server" />
    <link href="c1.css" type="text/css" />
    <link href="c2.css" type="text/css" />
    <link href="c3.css" type="text/css" />
    <script src="j1.js"></script>
    <script src="j2.js"></script>
    <script src="j3.js"></script>
</head>
<body>
    <h1>Head With Runat Server</h1>
</body>
</html>

注意head標(biāo)簽是runat="server"的,不加處理運(yùn)行頁面得到源代碼如下圖效果:

格式非?；靵y,看起來頭皮非常發(fā)麻,有時(shí)調(diào)試頁面的時(shí)候看到亂七八糟的代碼會非常沒心情,接下來講關(guān)鍵部分,BaseControlAdapter.cs文件代碼如下

BaseControlAdapter.cs

using System;
using System.Globalization;
using System.Web.UI;
using System.Web.UI.HtmlControls;

namespace Adapter
{
    public class HtmlHeadAdapter : System.Web.UI.Adapters.ControlAdapter
    {
        protected override void Render(HtmlTextWriter writer)
        {
            writer.WriteLine("<head>");
            RenderChildren(writer);
            writer.Write("</head>");
        }

        protected override void OnPreRender(EventArgs e)
        {
            bool hasTitle = false;
            foreach (Control cntrl in this.Control.Controls)
            {
                if (cntrl is HtmlTitle)
                {
                    hasTitle = true;
                    break;
                }
            }
            if (!hasTitle)
            {
                HtmlTitle ht = new HtmlTitle();
                ht.Text = Page.Title;
                Control.Controls.Add(ht);
            }
            base.OnPreRender(e);
        }
    }

    public class HtmlTitleAdapter : System.Web.UI.Adapters.ControlAdapter
    {
        protected override void Render(HtmlTextWriter writer)
        {
            HtmlTitle htmlTitle = (HtmlTitle)this.Control;
            //writer.Indent = 1;//控制標(biāo)簽開始處縮進(jìn)
            writer.Write("<title>");
            writer.Write(htmlTitle.Text);
            writer.WriteLine("</title>");
        }
    }

    public class HtmlLinkAdapter : System.Web.UI.Adapters.ControlAdapter
    {
        protected override void Render(HtmlTextWriter writer)
        {
            AttributeCollection attributes = ((HtmlLink)this.Control).Attributes;
            if (null != attributes && attributes.Count > 0)
            {
                writer.Write("<link");
                foreach (string key in attributes.Keys)
                {
                    writer.Write(" ");
                    writer.Write(key);
                    writer.Write("=\"");
                    if (0 == String.Compare("href", key, true, CultureInfo.InvariantCulture))
                        writer.Write(this.Control.ResolveUrl(attributes[key]));
                    else
                        writer.Write(attributes[key]);
                    writer.Write("\"");
                }
                writer.WriteLine(" />");
            }
        }
    }

    public class HtmlMetaAdapter : System.Web.UI.Adapters.ControlAdapter
    {
        protected override void Render(HtmlTextWriter writer)
        {
            HtmlMeta metaTag = (HtmlMeta)this.Control;
            writer.Write("<meta");
            if (!String.IsNullOrEmpty(metaTag.HttpEquiv))
            {
                writer.Write(" http-equiv=\"");
                writer.Write(metaTag.HttpEquiv);
            }

            if (!String.IsNullOrEmpty(metaTag.Name))
            {
                writer.Write(" name=\"");
                writer.Write(metaTag.Name);
            }
            writer.Write("\" content=\"");
            writer.Write(metaTag.Content);
            writer.WriteLine("\" />");
        }
    }
}

BaseControlAdapter文件包括了4個(gè)分別類是HtmlHeadAdapter,HtmlTitleAdapter,HtmlLinkAdapter,HtmlMetaAdapter用來處理<head>,<title>,<link>,<meta>標(biāo)簽(如果有其他標(biāo)簽要進(jìn)行處理可以添加相應(yīng)的類)

可以看到基本上是處理了標(biāo)簽的換行的問題,代碼中注釋了縮進(jìn)是因?yàn)榈玫降男Ч]有想象中的好,之后再進(jìn)行嘗試

Adapter類庫準(zhǔn)備好了當(dāng)然得引入到Web項(xiàng)目中去,然后是如何指定上面的類去處理相應(yīng)的標(biāo)簽?zāi)?這時(shí)就要用上App_Browsers這個(gè)文件夾,新建一個(gè)Default.browser代碼如下:

Default.browser

<browsers>
  <browser refID="Default">
    <controlAdapters>
      <adapter
      controlType="System.Web.UI.HtmlControls.HtmlHead"
      adapterType="Adapter.HtmlHeadAdapter"/>
      <adapter
      controlType="System.Web.UI.HtmlControls.HtmlTitle"
      adapterType="Adapter.HtmlTitleAdapter" />
      <adapter
      controlType="System.Web.UI.HtmlControls.HtmlLink"
      adapterType="Adapter.HtmlLinkAdapter"/>
      <adapter
      controlType="System.Web.UI.HtmlControls.HtmlMeta"
      adapterType="Adapter.HtmlMetaAdapter"/>
    </controlAdapters>
  </browser>
</browsers>

關(guān)于App_Browsers特殊文件夾以及.browser文件的作用可以參考下面連接:

ASP.NET Web Project Folder Structure

http://msdn.microsoft.com/en-us/library/ex526337.aspx

Browser Definition File Schema (browsers Element)

http://msdn.microsoft.com/en-us/library/ms228122.aspx

這樣編譯整個(gè)解決方案并運(yùn)行WithRunatServer.aspx頁面發(fā)現(xiàn)代碼已經(jīng)整理很多了

問題是得到了解決,不過還是發(fā)現(xiàn)有一些瑕疵，比如縮進(jìn),script等文中沒有提到過的標(biāo)簽的處理等,我在實(shí)際項(xiàng)目中用了些不優(yōu)雅的方式進(jìn)行了處理,由于項(xiàng)目特殊性就不詳談了,希望給同樣糾結(jié)的童靴一個(gè)思路,覺得還行的話給個(gè)推薦,存在不對之處請指出,謝謝:)

附上一些參考連接:

http://www.cnblogs.com/yukaizhao/archive/2010/05/18/asp_net_40_seo_enhancement_new_feature.html

http://blogs.x2line.com/al/archive/2007/01/10/2773.aspx
http://blogs.x2line.com/al/archive/2007/01/31/2814.aspx
http://blogs.x2line.com/al/archive/2007/01/31/2816.aspx
http://codebetter.com/blogs/jeff.lynch/archive/2008/05/02/asp-net-quot-head-quot-rendering-issues.aspx

附上本文的demo下載:http://files.cnblogs.com/aNd1coder/ControlAdapterExample.rar

如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答??！點(diǎn)擊進(jìn)入論壇