在网页设计中,有时会希望同一个自定义控件会有不同的样式出现在网页上,下面举个小例子,看看这种效果是怎么实现的吧!
1、首先添加一个自定义控件TextBox.ascx：
<%...@ Control Language="C#" AutoEventWireup="true" CodeFile="TextBox.ascx.cs" Inherits="WebUserControl" %>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>2、设置控件的不同样式：
using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class WebUserControl : System.Web.UI.UserControl...{
protected string style; protected void Page_Load(object sender, EventArgs e)
...{ style = Style; if (style == "Orange") ...{ TextBox1.BorderStyle = System.Web.UI.WebControls.BorderStyle.Solid; TextBox1.BorderColor = System.Drawing.Color.Orange;
} else if (style == "Purple") ...{ TextBox1.BorderStyle = System.Web.UI.WebControls.BorderStyle.Dotted; TextBox1.BorderColor = System.Drawing.Color.Purple; } } public virtual string Style //为自定义控件添加属性 ...{ get ...{ if (ViewState["style"] != null) ...{ return ViewState["style"].ToString(); } else ...{ return ""; } } set ...{ ViewState["style"] = value; } }
}3、将该自定义控件添加到不同的页面，并设置不同的样式：
<%...@ Page Language="C#" AutoEventWireup="true" CodeFile="Test1.aspx.cs" Inherits="test" %><%...@ Register Src="TextBox.ascx" TagName="TextBox" TagPrefix="uc1" %><!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 runat="server"> <title>无标题页</title></head><body> <form id="form1" runat="server"> <div> <uc1:TextBox id="TextBox1" runat="server"> </uc1:TextBox></div> </form></body></html>
using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class test : System.Web.UI.Page...{ protected void Page_Load(object sender, EventArgs e) ...{ TextBox1.Style = "Orange"; }}
<%...@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2.aspx.cs" Inherits="Test2" %><%...@ Register Src="TextBox.ascx" TagName="TextBox" TagPrefix="uc1" %><!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 runat="server"> <title>无标题页</title></head><body> <form id="form1" runat="server"> <div> <uc1:TextBox ID="TextBox1" runat="server" /> </div> </form></body></html>
using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class Test2 : System.Web.UI.Page...{ protected void Page_Load(object sender, EventArgs e) ...{ TextBox1.Style = "Purple"; }}运行这两个页面看看，同一个自定义控件有不同的样式了！（也可以在同一页面中实现或有更多变化）