asp.net控件開發基礎(8) ----------在複合控件中中的事件處理(事件冒泡)

上一篇寫了複合控件基本的概念,這次就繼續上次的話題,來學習複合控件如何觸發事件 

有一些複合控件直接把按鈕觸發事件所需的事情封裝好,另外一種則是自定義事件,更具靈活性,當然這是根據需要設計的。以下會以例子來說明的.下面我們假設我們控件中有兩個按鈕.以下不列出所有代碼,具體可在文章最後下載代碼.

(1) 直接實現按鈕事件

在控件中(以下代碼並非實現複合控件)直接實現事件則無需自定義事件,如下代碼(如果對數據回傳有些不熟悉的話,可先看第三篇,希望對你有幫助)

示例一(只列出局部代碼,具體可在文章最後下載代碼)

void IPostBackEventHandler.RaisePostBackEvent(string eventArgument)
{
if (eventArgument == "Previous")
PreviousText 
= "你點擊了PreviousText按鈕";
else if (eventArgument == "Next")
NextText 
= "你點擊了NextText按鈕";
}


protected override void RenderContents(HtmlTextWriter writer)
{
writer.AddAttribute(HtmlTextWriterAttribute.Onclick, Page.GetPostBackEventReference(
this"Previous"));
writer.RenderBeginTag(HtmlTextWriterTag.Button);
writer.Write(
this.PreviousText);
writer.RenderEndTag();

writer.AddAttribute(HtmlTextWriterAttribute.Onclick, Page.GetPostBackEventReference(
this"Next"));
writer.RenderBeginTag(HtmlTextWriterTag.Button);
writer.Write(
this.NextText);
writer.RenderEndTag();
}


還記得第三篇時示例一中下面的代碼嗎?此控件中只觸發了一個事件,所以無需根據服務器傳遞的參數來判斷出發哪個事件
//實現RaisePostBackEvent方法,處理回發事件
public void RaisePostBackEvent(string eventArgument)
{
OnClick(EventArgs.Empty);
}

RaisePostBackEvent方法有一個eventArgument參數用來傳遞事件數據.代碼實現了一個空參數傳遞(eventArgument參數爲空)的事件OnClick(EventArgs.Empty)

再比較一下示例一的代碼,因爲其用到了兩個按鈕

Page.GetPostBackEventReference方法用來傳遞參數

RaisePostBackEvent方法則以傳遞參數來判斷觸發哪個按鈕

小結:

在控件中直接實現按鈕事件,則無需定義自定義事件,但別忘了在RaisePostBackEvent方法中根據傳遞過來的不同參數來加以判斷.

(2)以自定義事件實現

根據示例一上面的代碼加上自定義委託和事件,如下代碼(只列出局部代碼,具體可在文章最後下載代碼)

示例二

void IPostBackEventHandler.RaisePostBackEvent(string eventArgument)
{
if (eventArgument == "Previous")
OnClickPrevious(EventArgs.Empty);
else if (eventArgument == "Next")
OnClickNext(EventArgs.Empty);
}

調用代碼如下

protected void NavButtons2_1_ClickPrevious(object sender, EventArgs e)
{
Label1.Text 
= "你點擊了PreviousText按鈕";
}


protected void NavButtons2_1_ClickNext(object sender, EventArgs e)
{
Label1.Text 
= "你點擊了NextText按鈕";
}

小結:在示例一的基礎上去除直接實現好的按鈕事件,然後自定義事件.

再次提醒如果大家對回發事件,還請再參考一些文章先弄清楚,或者也可以看看我寫的第三篇文章.

好了,上面講的都非複合控件,但複合控件實現起來卻很相似,或者可以說更加簡單.

下面先來看個簡單的示例(大家知道button按鈕有CommandName屬性和CommandArgument屬性)

示例三

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected 
void Button1_Click(object sender, EventArgs e)
{
Label1.Text 
= "你點擊了左按鈕";
}


protected 
void Button2_Click(object sender, EventArgs e)
{
Label1.Text 
= "你點擊了右按鈕";
}


protected 
void btn_command(object sender, CommandEventArgs e)
{
switch (e.CommandName)
{
case "left":
Label2.Text 
= "你點擊了左按鈕";
break;
case "right":
Label2.Text 
= "你點擊了右按鈕";
break;
}

}


protected 
void btn2_command(object sender, CommandEventArgs e)
{
switch (e.CommandName)
{
case "left":
Button1_Click(
this, e);
break;
case "right":
Button2_Click(
this, e);
break;
}

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無標題頁</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="左按鈕" />
<asp:Button ID="Button2" runat="server" Text="右按鈕" OnClick="Button2_Click" /><br />
<br />
<asp:Label ID="Label1" runat="server"></asp:Label><br />
<br />
<asp:Button ID="Button3" runat="server" Text="左按鈕" CommandName="left" OnCommand="btn_command" />
<asp:Button ID="Button4" runat="server"
Text
="右按鈕" OnCommand="btn_command" CommandName="right" /><br />
<br />
<asp:Label ID="Label2" runat="server"></asp:Label><br />
<br />
<asp:Button ID="Button5" runat="server" Text="左按鈕" CommandName="left" OnCommand="btn2_command" /><asp:Button ID="Button6" runat="server"
Text
="右按鈕" OnCommand="btn2_command" CommandName="right" /></div>
</form>
</body>
</html>

以上代碼以三種方式來實現按鈕的觸發事件.這裏本應該再舉一個數據綁定控件如(DataList控件的使用)的一個例子的一個例子的,這裏目的只爲了說明冒泡法的使用,冒泡法在DataList等數據綁定控定控件中最能體現出來.

那我們先來看下,在複合控件中怎麼做?


1.直接實現按鈕事件
2.以自定義事件實現


(1)以下爲微軟網站的示例代碼,如下代碼

示例四

namespace CompositionSampleControls
{

public class Composition2 : Control, INamingContainer
{

public int Value
{
get
{
this.EnsureChildControls();
return Int32.Parse(((TextBox)Controls[1]).Text);
}

set
{
this.EnsureChildControls();
((TextBox)Controls[
1]).Text = value.ToString();
}

}


protected override void CreateChildControls()
{

// Add Literal Control

this.Controls.Add(new LiteralControl("<h3>" + "Value: "));

// Add Textbox

TextBox box 
= new TextBox();
box.Text 
= "0";
this.Controls.Add(box);

// Add Literal Control

this.Controls.Add(new LiteralControl("</h3>"));

// Add "Add" Button

Button addButton 
= new Button();
addButton.Text 
= "Add";
addButton.Click 
+= new EventHandler(this.AddBtn_Click);
this.Controls.Add(addButton);

// Add Literal Control

this.Controls.Add(new LiteralControl(" | "));

// Add "Subtract" Button

Button subtractButton 
= new Button();
subtractButton.Text 
= "Subtract";
subtractButton.Click 
+= new EventHandler(this.SubtractBtn_Click);
this.Controls.Add(subtractButton);

}


private void AddBtn_Click(Object sender, EventArgs e)
{
this.Value++;
}


private void SubtractBtn_Click(Object sender, EventArgs e)
{
this.Value--;
}

}

}


因爲內部事件已經實現好了,所以比較簡單,相信大家都看的懂。

再看複合控件的自定義事件,這裏纔是我們所要講的重點.通常我們提倡在複合控件中採用冒泡法實現事件的上傳,上一篇已經說過了,複合控件是一個樹結構的控件,最典型的就是asp.net的數據邦定控件(特殊的複合控件)瞭如DataList,此控件有很多以Command結尾的事件,我們剛開始學這個控件的時候,總要考慮,如何在此控件中實現按鈕事件,所採用的就是我們常說的"事件冒泡",當然還有另一種方法,應該說是普通的實現方法,asp.net服務器控件開發技術與示例稱之爲包含法,下面我們以例子來說明上面兩種方法.

1.包含法

還是以微軟的快速入門教程的代碼爲例.與上面的代碼對比有幾處變動,如下

注意粗體字,自定義事件爲複合控件頂層的事件,而非其子控件button按鈕的事件,button按鈕的事件需調用頂層事件處理程序.即實現子控件事件上傳的過程.

示例五

//自定義事件
public event EventHandler Change;
//自定義事件處理程序
protected void OnChange(EventArgs e) 

{ Change(this, e); }
//子控件事件處理程序調用頂層事件處理程序,此處需注意
private void AddBtn_Click(Object sender, EventArgs e) 

this.Value++; OnChange(EventArgs.Empty); } 

 2.冒泡法

上面已經介紹過了,並且MSDN也已經作出了詳細的解釋,控件可以將其定義的事件上傳到控件頂層,在引發事件時處理事件,瞭解冒泡法,你需要了解以下兩個方法


protected virtual bool OnBubbleEvent(
   
object source,
   EventArgs args
);
protected void RaiseBubbleEvent(
   
object source,
   EventArgs args 
);


RaiseBubbleEvent不可重寫,用於向上傳遞數據
要引發冒泡事件,控件必重寫 OnBubbleEvent 看OnBubbleEvent方法,看下面代碼
你需要先熟悉一下CommandEventArgs,其爲Command事件提供了數據,通過其可以訪問控件命令名稱和參數,並根據不同參數和名稱觸發不同事件.其下代碼爲上一篇登錄控件例子實現事件冒泡的方法,具體代碼可在最後下載,且CreateChildControls方法中的觸發事件的控件無須添加一個事件委託
 

addButton.Click += new EventHandler(this.AddBtn_Click);

 

        protected override bool OnBubbleEvent(object source, EventArgs e) {   
            
bool handled = false;
            
if (e is CommandEventArgs) {
                CommandEventArgs ce 
= (CommandEventArgs)e;
                
if (ce.CommandName == "Logon"{
                    OnLogon(EventArgs.Empty);
                    handled 
= true;   
                }
  
            }

            
return handled;            
        }


你也可以爲控件定義的事件定義事件冒泡,引發該時間則必須調用RaiseBubbleEvent,示例三就是具體的例子使用

protected virtual void OnCommand(CommandEventArgs e) {
            CommandEventHandler handler 
= (CommandEventHandler)Events[EventCommand];
            
if (handler != null)
                handler(
this,e);

            
// The Command event is bubbled up the control hierarchy.
            RaiseBubbleEvent(this, e);
        }




本次講的重點在於冒泡法的使用,但我卻用很多篇幅介紹寫前面的東西,主要目的是爲了讓大家用複合控件與非符合控件進行比較,總的來說複合控件爲我們帶來了便利,不用實現IPostBackEventHandler接口,簡化了操作.如果大家熟悉事件回傳機制,則不難了解冒泡法的使用.最後還是要注意一點的是複合控件是一個樹級的控件,即由子控件組成的一個控件,這次的例子很多都是直接取自書上和微軟的教程上,只供大家參考吧. 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章