• ASP.NET使用母版页后动态加载JS/CSS

    ASP.NET中使用母版页最大的好处就是当有许多相似的页面时只用加一个母版页,每个页面用这个母版页生成内容页,然后根据情况修改每个内容页中的内容,保持页面布局的统一,同时也减少了代码量。

    但另一个突出的问题是使用母版页后,每个内容页中没有了<head></head>标记,因为这都在母版页中有了,而这对修改标题、加载JS/CSS等文件都有影响,前面我已经说过在ASP.NET中使用母版页后统一网页标题,那这篇就来说说如何加载JS/CSS等文件。

    ASP.NET中使用母版页后统一网页标题中修改标题的原理一样,加载JS/CSS等文件可以在内容页中加,也可以在母版页中统一加载。

    1、在单个内容页中加载

    将下面两段段代码放入内容页的Page_Load中即可,很简单了,也不再多解释。

    • 加载JS文件
    #region 加载JS文件
    HtmlGenericControl JSControl = new HtmlGenericControl("script");
    JSControl.Attributes.Add("type", "text/javascript");
    JSControl.Attributes.Add("src", "JS/js.js");
    Page.Header.Controls.Add(JSControl);
    #endregion
    
    • 加载CSS文件
    HtmlLink CssControl = new HtmlLink();
    CssControl.Href = "/CSS/Style.css";
    CssControl.Attributes.Add("rel", "stylesheet");
    CssControl.Attributes.Add("type", "text/css");
    Page.Header.Controls.Add(CssControl);
    

    2、在母版页中统一加载

    string requestContentType = this.ContentPlaceHolder1.Page.GetType().ToString();
    if (requestContentType == "ASP.admin_c2c_user_management_aspx")//获取请求的内容页类型,格式如ASP.目录名_文件名_aspx(好像文件名中的“-”都会被转换成了“_”)
    {
        //加载JS文件
        HtmlGenericControl JSControl = new HtmlGenericControl("script");
        JSControl.Attributes.Add("type","text/javascript");
        JSControl.Attributes.Add("src", "JS/js.js");
        Page.Header.Controls.Add(JSControl);
        // 加载CSS文件
        HtmlLink CssControl = new HtmlLink();
        CssControl.Href = "/CSS/Style.css";
        CssControl.Attributes.Add("rel", "stylesheet");
        CssControl.Attributes.Add("type", "text/css");
        Page.Header.Controls.Add(CssControl);
    }
    
  • ASP.NET使用母版页统一网页标题

    在做网页的时候给每个网页设置一个合理的标题是很有必要的事情,而做一个网站的时候需要将所有的标题的格式统一起来,比如将所有网页的标题统一为“XX页面 | XX网站”。

    我在用VS2005做的时候开始没用母版页,后来用母版页的时候发现改内容页的标题其实挺麻烦的,因为每个内容页都要设置标题,而每个标题中都要有网站的名字。如果手工给每个内容页加上该内容页的标题,再加上网站名字,岂不是很麻烦?好在我们用的是动态语言,至少网站名字可以在母版页中直接统一起来。

    下面说下我用的两种方法改写网页标题。

    1、所有的网页标题设置为“XX页面 | XX网站”。

    这种方法很简单,只用在母版页的xx.aspx.cs文件中写上这样一句代码(BasePage.GetSiteName()为获取网站标题的方法)

    Page.Header.Title += " | " + BasePage.GetSiteName();//设置前台页面所有内容页标题

    然后在每个内容页中加上内容页的标题就OK了。

    2、在母版页中改写所有内容页标题

    这样做的好处是如果要修改标题的内容页有很多,那么只用修改母版页就OK了,内容页中的标题可以不用管。这种方式的原理是先判断是哪个内容页请求的母版页,然后根据内容页的文件名来强制改写内容页的标题。

    这种方式下可以用if else判断,也可以用switch case来做

    A、如果只是首页的格式不同(比如首页的标题是“欢迎光临XX网站”,而其他页面都是“XX页面 | XX网站”)

    那么用母版页中xx.aspx.cs用这段代码,其中ContentBox为在母版页中的一个ContentPlaceHolder控件。

    string requestContentType = this.ContentBox.Page.GetType().ToString();//获取请求的内容页类型,格式如ASP.文件名_aspx
    if (requestContentType == "ASP.index_aspx")
    {
        Page.Header.Title = "欢迎光临" + BasePage.GetSiteName();
    }
    else
    {
        Page.Header.Title += " | " + BasePage.GetSiteName();//设置前台页面所有内容页标题
    }
    

    这段代码先判断内容页是不是首页(所有aspx文件名都被转换成形如“ASP.文件名_aspx”,首页文件名为indxe.aspx ,所以就被转成 ASP.index_aspx),然后根据结果改写标题。

    B、如果大部分网页的标题格式都不同或需要在母版页改写所有内容页标题

    string requestContentType = this.ContentBox.Page.GetType().ToString();//获取请求的内容页类型,格式如ASP.文件名_aspx
    
    switch (requestContentType)
    {
        case "ASP.A_aspx" :
        {
            Page.Header.Title = "A的网页标题";
            break;
        }
        case "ASP.B_aspx":
        {
            Page.Header.Title = "B的网页标题";
            break;
        }
        case "ASP.C_aspx":
        {
            Page.Header.Title = "C的网页标题";
            break;
        }
    }
    

    当然应该还有别的方法来改写网页标题,这只是我目前用到的两种,也不一定是最好的。

  • VS2005母版页使用中的一点问题

    近日在学习ASP.NET做网站,然后用到了VS2005中的MasterPage(母版页),不过我还比较菜,遇到了些问题。

    问题如下

    首先我做了个母版页(MasterPage.master),母版页里面就放了一个id为Content的ContentPlaceHolder.

    然后又做了两个内容页,一个Login.aspx,一个Register.aspx

    这两个内容页里面都放的是一个content控件,页面结构相似,调用CSS也只是在母版页中,问题是Register.aspx页面显示正常,而Login.aspx中的CSS显示就不正常了,content控件中内容的CSS好像就没有起作用。有朋友提示说是不是路径的问题,但我检查后发现不是路径的问题,实在奇怪。

    两个内容页的代码如下

    1、Register.aspx的content控件代码

    <asp:Content ID=”Content2″ ContentPlaceHolderID=”Content” Runat=”Server”>
    <div id=”main_no_sidebar”>
    <div id=”register”>
    <form id=”registerform” name=”register” action=”Register.aspx” method=”post” >
    <p>
    <label><span>用户名</span><input type=”text” id=”username” value=”” /></label>
    </p>
    <p>
    <label><span>真实姓名</span><input type=”text” id=”realname” value=”” /></label>
    </p>
    <p>
    <label><span>邮箱地址</span><input type=”text” id=”email” value=”” /></label>
    </p>
    <p>
    <label><span>密码</span><input type=”password” id=”password” value=”” /></label>
    </p>
    <p>
    <label><span>重复密码</span><input type=”password” id=”repassword” value=”” /></label>
    </p>
    <p>
    <label><input type=”submit” name=”register” id=”submit” value=”注册” /><input type=”reset” id=”reset” value=”清除”/></label>
    </p>
    </form>
    </div>
    </div>
    </asp:Content>

    2、Login.aspx的content控件代码

    <asp:Content ID=”Content2″ ContentPlaceHolderID=”Content” Runat=”Server”>
    <div id=”main_no_sidebar”>
    <div id=”login_box”>
    <form id=”loginform” name=”loginform” action=”Login.aspx” method=”post” >
    <p>
    <label><span>用户名</span><input type=”text” id=”username” value=”” /><a href=”#”>还未注册?</a></label>
    </p>
    <p>
    <label><span>密码</span><input type=”password” id=”password” value=”” /><a href=”#”>忘记密码?</a></label>
    </p>
    <p>
    <label><input type=”submit” name=”submit” id=”submit” value=”登录” /><input type=”reset” id=”reset” value=”清除”/></label>
    </p>
    </form>
    </div>
    </div>
    </asp:Content>

    ***************************************************

    问题解决后记

    这两个内容页由于都用了form,在24号中这个问题进一步凸显,form嵌套导致IE8下面DIV重复显示。