模拟Asp.Net Forums实现可以换皮肤的控件
2008-04-03 23:24
507 查看
为了帮助您理解《Asp.Net Forums2.0深入分析》之 Asp.Net Forums是如何实现代码分离和换皮肤的,现在我们一起来写一个代码分离带换皮肤功能的登陆页面:
第一步:新建ThemeDemo项目
第二步:添加基类SkinnedWebControl.cs
![](http://www.chenjiliang.com/Image/Extension/cs.ico)
复制
![](http://www.chenjiliang.com/Image/Save.jpg)
保存
第三步:创建Themes目录,并创建两个用户控件文件Login.ascx和Login1.ascx。布局样式不同,但是都必须包含以下控件:
TextBox Username
TextBox Password
Button LoginButton
Label Result
Login.ascx
![](http://www.chenjiliang.com/Image/Extension/htm.ico)
阅读
![](http://www.chenjiliang.com/Image/Extension/edithtml.ico)
编辑
![](http://www.chenjiliang.com/Image/Extension/runhtml.ico)
运行
![](http://www.chenjiliang.com/Image/Extension/htm.ico)
复制
![](http://www.chenjiliang.com/Image/Save.jpg)
保存
<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
![](http://www.chenjiliang.com/Image/Extension/htm.ico)
阅读
![](http://www.chenjiliang.com/Image/Extension/edithtml.ico)
编辑
![](http://www.chenjiliang.com/Image/Extension/runhtml.ico)
运行
![](http://www.chenjiliang.com/Image/Extension/htm.ico)
复制
![](http://www.chenjiliang.com/Image/Save.jpg)
保存
<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
![](http://www.chenjiliang.com/Image/Extension/cs.ico)
复制
![](http://www.chenjiliang.com/Image/Save.jpg)
保存
第五步:新建两个aspx页,分别把两种风格的登陆控件加入。
Login.aspx
![](http://www.chenjiliang.com/Image/Extension/aspx.ico)
复制
![](http://www.chenjiliang.com/Image/Save.jpg)
保存
Login1.aspx
![](http://www.chenjiliang.com/Image/Extension/aspx.ico)
复制
![](http://www.chenjiliang.com/Image/Save.jpg)
保存
___html_
最后,分别运行看看效果:)
![](http://www.chenjiliang.com/Article/ArticleImage/89/811/login1.gif)
![](http://www.chenjiliang.com/Article/ArticleImage/89/811/login2.gif)
![](http://www.chenjiliang.com/Article/ArticleImage/89/811/login3.gif)
源代码下载
http://webuc.net/download/ThemeDemo.rar
第一步:新建ThemeDemo项目
第二步:添加基类SkinnedWebControl.cs
复制
![](http://www.chenjiliang.com/Image/Save.jpg)
保存
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
阅读
编辑
运行
复制
![](http://www.chenjiliang.com/Image/Save.jpg)
保存
<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>
<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
阅读
编辑
运行
复制
![](http://www.chenjiliang.com/Image/Save.jpg)
保存
<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"/>
<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
复制
![](http://www.chenjiliang.com/Image/Save.jpg)
保存
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
复制
![](http://www.chenjiliang.com/Image/Save.jpg)
保存
<%@ 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
复制
![](http://www.chenjiliang.com/Image/Save.jpg)
保存
<%@ 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://www.chenjiliang.com/Article/ArticleImage/89/811/login1.gif)
![](http://www.chenjiliang.com/Article/ArticleImage/89/811/login2.gif)
![](http://www.chenjiliang.com/Article/ArticleImage/89/811/login3.gif)
源代码下载
http://webuc.net/download/ThemeDemo.rar
相关文章推荐
- 模拟Asp.Net Forums实现可以换皮肤的控件
- [转]模拟Asp.Net Forums实现可以换皮肤的控件
- 模拟Asp.Net Forums实现可以换皮肤的控件 (转载)
- 模拟Asp.Net Forums实现可以换皮肤的控件
- 《Asp.Net Forums2.0深入分析》之 Asp.Net Forums是如何实现代码分离和换皮肤
- 《Asp.Net Forums2.0深入分析》之 Asp.Net Forums是如何实现代码分离和换皮肤的
- 《Asp.Net Forums2.0深入分析》之 Asp.Net Forums是如何实现代码分离和换皮肤的
- 前面在《Asp.Net Forums中对.Net中序列化和反序列化的应用》一文中讲了,对于一些扩展属性,可以将字符串集合序列化为二进制,也可以从二进制反序列化为字符串集合。其实我一直有个疑问,对于asp.net中可以很容易实现,但是在asp中该如何?
- ASP.NET中运用DataList控件来实现编辑、更新、删除、取消等功能
- ASP.NET Forums N层架构实现,以功能举例
- 简单的asp.net模拟邮箱系统基础实现(一 总体功能版块的设计,与简单数据库的设计)
- ASP.NET高级里面的repeater控件的应用实现样式设置,并添加删除按钮
- Ajax 实现在WebForm中拖动控件并即时在服务端保存状态数据 (Asp.net 2.0)(示例代码下载)
- asp.net 中GridView控件实现全选及反选的功能
- 在asp.Net中使用fileuplod控件实现上传图片的功能
- Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载)
- asp.net GridView控件中实现全选的解决方案