類比Asp.Net Forums實現可以換皮膚的控制項

為了協助您理解《Asp.Net Forums2.0深入分析》之 Asp.Net Forums是如何?代碼分離和換皮膚的，現在我們一起來寫一個代碼分離帶換皮膚功能的登陸頁面：

第一步：建立ThemeDemo項目

第二步：添加基類SkinnedWebControl.cs

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

namespace WebUC.ThemeDemo.Controls
{

    [
    ParseChildren(true)
    ]
    /// <summary>
    /// 換皮膚控制項基類
    /// </summary>
    public abstract class SkinnedWebControl : WebControl, INamingContainer
    {

    string skinFilename = null;

    protected override void CreateChildControls()
    {
        Control skin;

        // 裝載使用者控制項檔案
        skin = LoadSkin();

        // 初始化控制項和對控制項綁定
        InitializeSkin(skin);

        Controls.Add(skin);
    }

    /// <summary>
    /// 裝載使用者控制項檔案
    /// </summary>
    /// <returns></returns>
    protected Control LoadSkin()
    {
        Control skin;

        // 使用者控制項檔案預設放在Themes目錄下
        string skinPath = "Themes/" + SkinFilename;

        // 是否定義了使用者控制項檔案？
        if (SkinFilename == null)
        throw new Exception("必須定義SkinFilename屬性，指定使用者控制項檔案路徑");

        // 通過Page.LoadControl(defaultSkinPath)方法，從使用者控制項檔案中擷取 UserControl 對象
        try
        {
        skin = Page.LoadControl(skinPath);
        }
        catch (FileNotFoundException)
        {
        throw new Exception("使用者控制項檔案未找到！");
        }

        return skin;
    }

    /// <summary>
    /// 初始化控制項，並繫結控制項資料
    /// </summary>
    /// <param name="skin"></param>
    protected abstract void InitializeSkin(Control skin);

    /// <summary>
    /// 使用者控制項檔案路徑
    /// </summary>
    public string SkinFilename
    {
        get { return skinFilename;}
        set { skinFilename = value; }
    }

    }
}

第三步：建立Themes目錄，並建立兩個使用者控制項檔案Login.ascx和Login1.ascx。配置樣式不同，但是都必須包含以下控制項：
TextBox    Username
TextBox    Password
Button     LoginButton
Label      Result
Login.ascx

　 <P>登陸頁的預設皮膚樣式</P>
<P>使用者名稱：<asp:TextBox id="Username" runat="server"></asp:TextBox></P>
<P>密  碼：<asp:TextBox id="Password" runat="server" TextMode="Password"/></P>
<P><asp:Button id="LoginButton" runat="server" Text="登陸"/></P>
<P><asp:Label id="Result" runat="server"/></P>

Login1.ascx

　 <P>登陸頁的皮膚樣式1</P>
使用者名稱：<asp:TextBox id="Username" runat="server"/>
密  碼：<asp:TextBox id="Password" runat="server" TextMode="Password"/> 
<asp:Button id="LoginButton" runat="server" Text="登陸"/><asp:Label id="Result" runat="server"/>

第四步：建立Login控制項Login.cs

using System;
using System.Web;
using System.Web.UI.WebControls;

namespace WebUC.ThemeDemo.Controls
{
    /// <summary>
    /// 登陸控制項，繼承自SkinnedWebControl
    /// </summary>
    public class Login : SkinnedWebControl
    {
        string skinFilename = "Login.ascx"; // 指定預設皮膚樣式
        TextBox username; // 帳號輸入框
        TextBox password; // 密碼輸入框
        Button loginButton; // 登陸按鈕
        Label result; // 顯示登陸結果

        public Login()
        {
            if (SkinFilename == null)
                SkinFilename = skinFilename;
        }

        /// <summary>
        /// 重寫InitializeSkin，初始化控制項和對控制項進行綁定
        /// </summary>
        /// <param name="skin"></param>
        protected override void InitializeSkin(System.Web.UI.Control skin)
        {
            // 尋找ascx頁中ID是username的textbox控制項
            username = (TextBox) skin.FindControl("Username");
            // 綁定資料
            username.Text = "demo";

            // 尋找ascx頁中ID是password的textbox控制項
            password = (TextBox) skin.FindControl("Password");
            // 綁定資料
            password.Attributes.Add("value","demo");

            // 初始化Result控制項
            result = (Label) skin.FindControl("Result");

            // 找到登陸按鈕
            loginButton = (Button) skin.FindControl("LoginButton");
            loginButton.Click += new System.EventHandler(LoginButton_Click); // 綁定登陸按鈕的Click事件
        }

        /// <summary>
        /// 響應登陸按鈕事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void LoginButton_Click(Object sender, EventArgs e)
        {
            if (username.Text == "demo" && password.Text == "demo")
                result.Text = "<font color='blue'>登陸成功！";
            else
                result.Text = "<font color='red'>登陸失敗，使用者名稱密碼不匹配！";
        }

    }
}

　

第五步：建立兩個aspx頁，分別把兩種風格的登陸控制項加入。
Login.aspx

<%@ Register TagPrefix="uc" Namespace="WebUC.ThemeDemo.Controls" Assembly="ThemeDemo" %><HTML> <HEAD>  <title>換皮膚控制項測試——預設皮膚</title> </HEAD> <body>  <form runat="server">    <uc:Login runat="server"/>  </form> </body></HTML>

Login1.aspx

<%@ Register TagPrefix="uc" Namespace="WebUC.ThemeDemo.Controls" Assembly="ThemeDemo" %><HTML> <HEAD>  <title>換皮膚控制項測試——另一皮膚</title> </HEAD> <body>  <form runat="server">    <uc:Login runat="server" SkinFilename="Login1.ascx"/>  </form> </body></HTML>

最後，分別運行看看效果：）

源碼下載

原文地址 http://webuc.net/dotey/archive/2004/05/28/835.aspx