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

本文介绍如何通过设置属性来改变ASP.NET自定义控件的样式,实现不同页面中同一控件的不同外观表现。

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

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

}

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值