1. 程式人生 > >Web用戶自定義控件

Web用戶自定義控件

rop 參數 自定義樣式 nbsp alt 頭部 his 信息 文件

在新建項的時候,選擇Web用戶控件,可用來自定義自己的控件,做好後,直接拖到頁面即可使用
自定義控件與WEB交互,需要在 自定義控件裏面 寫 屬性,如:

技術分享
    public string CityID
    {
        get { return this.DropDownList1.SelectedValue; }
        
        set{ this.DropDownList1.SelectedValue = value;} 
    }
技術分享

在外面調用的時候如下即可:

Label1.Text = this.City1.CityID;

自定義樣式(公開屬性)

    public ConsoleColor Color { get; set; }
    public string Title { get; set; }

定義 樣式屬性

<h1><%=this.Title  %></h1>
<div style=‘%=this.Color%>‘>
    組裝的一些控件
</div>

樣式調用

 this.City1.Title = "標題";
 this.City1.Color = ConsoleColor.Blue;

Web用戶控件 公開事件

由於控件是 封裝過的,所以當用戶控件激發事件時,最外層是得不到數據的,解決辦法有3種:

註:用戶控件需設置 AutoPostBack="True"

-------- 1.利用系統的 EventHandler 委托

<1>.在用戶控件後臺文件內新建一個屬性

    public string CityID 
    {
        get { return DropDownList1.SelectedValue; }
        set { DropDownList1.SelectedValue = value; }
    }

<2>.新建一個 event 事件

public event EventHandler CitySelected = null;

<3>.當用戶控件中的SelectedIndexChanged事件觸發時,激活 CitySelected 事件

技術分享
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (this.CitySelected != null)
        {
            this.CitySelected(this, null);
        }
    }
技術分享

<4>.在頁面的後臺 新建一個方法,用來處理用戶控件返回的信息

    public void showCity(object sender, EventArgs e)
    {
        this.Label1.Text = this.City1.CityID;
    }

<5>.在頁面的用戶控件中 註冊事件

<uc1:City ID="City1" runat="server" OnCitySelected="showCity" />

利用自定義的 委托

<1>.自定義一個委托

public delegate void CitySelectedEventHander(string CityID);

<2>.自定義一個事件

    public event CitySelectedEventHander CitySeleted = null;

<3>.當用戶控件觸發時,激活自定義事件

技術分享
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (CitySeleted != null)
        {
            string CityID = this.DropDownList1.SelectedValue;
            this.CitySeleted(CityID);
        }
    }
技術分享

<4>.在頁面後臺新建一個方法,用於處理用戶控件的事件

    public void ShowCity(string id)
    {
        this.Label1.Text = id;
    }

<5>.在頁面的用戶控件中 註冊事件

    <uc1:City2 ID="City21" runat="server" onCitySeleted="ShowCity" />

利用系統委托 泛型事件(推薦使用)

<1>.定義一個類,繼承EventArgs類,主要用於封裝屬性,以便日後擴展

    public class CityEventArgs:EventArgs
    {
       public string CityID { get; set; }
    }

<2>.定義一個 泛型事件,用自定義的類做 參數

    public event EventHandler<CityEventArgs> CitySeleted = null;

<3>.在頁面後臺新建一個方法,用於處理用戶控件的事件

    public void ShowCity(object sender,CityEventArgs e)
    {
        this.Label2.Text = e.CityID;
    }

<4>.在頁面的用戶控件中 註冊事件

    <uc1:City3 ID="City31" runat="server" OnCitySeleted="ShowCity" />

註:註冊事件也可用如下方法:

技術分享
    protected void Page_Load(object sender, EventArgs e)
    {
       this.City31.CitySeleted += new EventHandler<CityEventArgs>(City31_CitySeleted);
    }

    void City31_CitySeleted(object sender, CityEventArgs e)
    {
        this.Label2.Text = e.CityID;
    }
技術分享

動態增加用戶控件

在上面的基礎上,增加如下內容:

Control c = this.LoadControl("City3.ascx");
City3 uc = c as City3;
uc.CityID = "SH";
this.PlaceHolder1.Controls.Add(uc);

註:PlaceHolder1是容器,當前頁面需要在頭部註冊信息

<%@ Register src="~/UC/City3.ascx" tagname="City3" tagprefix="uc1" %>

Web用戶自定義控件