[C#]同一自定义控件的在不同页面有不同的样式

在网页设计中,有时会希望同一个自定义控件会有不同的样式出现在网页上,下面举个小例子,看看这种效果是怎么实现的吧!

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";
    }
}

运行这两个页面看看，同一个自定义控件有不同的样式了！（也可以在同一页面中实现或有更多变化）