开发和使用Web用户控件
?在 ASP.NET 的開發中 Web 用戶控件的開發和使用是一項必不可少的技術,在對這項技術的一番研究后寫下了這篇隨筆,不過確實擔心這么初級的東東放到原創首頁上會被拍磚頭。
1.簡介 2.創建 Web 用戶控件 3.在 Web 窗體中使用 Web 用戶控件 4.添加屬性 5.添加方法 6.添加自定義事件 7.控件內客戶端角本訪問服務器控件的方法 8.代碼下載
1.簡介 ???
當 ASP.NET 內置的 Web 服務器控件不能滿足我們開發的需要時,通過我們會創建自己的控件。而在 ASP.NET 中有兩個選擇:
?? 1)用戶控件:用戶控件是能夠在其中放置標記和 Web 服務器控件的容器。然后,可以將用戶控件作為一個單元對待,為其定義屬性和方法。(這就是咱們這次要講的啦) ??? 2)自定義控件:自定義控件是編寫的一個類,此類從 Control 或 WebControl 派生。(關于這個方面的技術,目前為止我只按MSDN的演練做了一個練習,后面有時間針對它的開發與使用再寫一篇更詳細一點的)
??? 創建用戶控件要比創建自定義控件方便很多,因為可以重用現有的控件,所以最適合創建具有復雜界面元素的控件。用戶控件與 Web 窗體(.aspx)很相似,可以同時具有前臺頁面和后臺代碼,在前臺可以向其中添加所需的標簽和服務器控件,在后臺可以針對這些對象進行邏輯操作。不過它們存在以下這些區別:
??? 1)用戶控件的文件擴展名為 .ascx,而 Web 窗體的擴展名為 .aspx; ??? 2)用戶控件使用 @Control 指令聲明,而 Web 窗體使用 @Page 指令; ??? 3)用戶控件不能作為獨立文件運行,而必須其它服務器控件一樣,將它們添加到 Web 窗體中; ??? 4)用戶控件中不能包含 <html>、<body> 和 <body> 等標簽。
2.創建 Web 用戶控件
首先建立一個 ASP.NET 網站,如圖所示:
在解決方案資源管理器里選中網站,點擊右鍵菜單中的[添加新項],在彈出窗口選擇 Web 用戶控件,如圖所示
點擊[添加],在解決方案中可以看到一個新的 Web 用戶控件做好了,如圖所示:
什么?什么?這就做好了?呵呵,做是做好了,不過沒什么功能,現在我們給它加點東西。 編輯TestWebUserControl.ascx,切換到[設計]視圖,從工具箱拖動一個 TextBox、一個 Button 和一個 Label 控件到頁面上,如圖所示:
選中 Button 控件,雙擊,為其添加 Click 事件的響應代碼:
OK!到此為止,一個簡單的 Web 用戶控件搞定了。
3.在 Web 窗體中使用 Web 用戶控件
現在我們把做好的用戶控件放到窗體上進行測試,選中 Default.aspx 切換到[設計]視圖(注意:一定要在設計視圖里),在解決方案中拖動 TestWebUserControl.ascx 到頁面上,如圖所示:
現在我們運行程序,在文本框中填入“Hello World!”,點擊 Button ,Label 就會顯示相應內容了,如圖所示:
停止程序,回到 Default.aspx 的[源]視圖,我們來看看剛才的“一拖”,IDE到底為我們做了什么工作。可以發現在代碼里增加了一行 @Register 指令,這就是對用戶控件引用要做的聲明,代碼如下:
這個指令很簡單,通過字面就可以看出各屬性的含義了。現在我們為了使我們的控件前綴更有意義,而不是什么“uc1”之類的,對這條語句做點修改,代碼如下:
<%@ Register Src="TestWebUserControl.ascx" TagName="TestWebUserControl" TagPrefix="Clark"%>當然,相應的其它地方也要進行修改了,如下: 將
<uc1:TestWebUserControl ID="TestWebUserControl1" runat="server"/>改為
<Clark:TestWebUserControl ID="TestWebUserControl1" runat="server"/>這樣,以后我們再在此頁面使用 TestWebUserControl 控件時前綴自動就變成Clark了,如下所示,我又拖了一個控件到頁面里,代碼如下:
<%@ Page Language="C#" AutoEventWireup="true"? CodeFile="Default.aspx.cs" Inherits="_Default"%><%@ Register Src="TestWebUserControl.ascx" TagName="TestWebUserControl" TagPrefix="Clark"%>
<!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> ??????? <Clark:TestWebUserControl ID="TestWebUserControl1" runat="server"/> ??????? <br /> ??????? <Clark:TestWebUserControl ID="TestWebUserControl2" runat="server"/> ? ?? </div> ??? </form> </body> </html>
當然,通過在 Web.Config 里進行配置也可以注冊組件,并且是針對整個網站適用的,這里就不再述。
4.添加屬性
下面我們來為做好的控件添加一個屬性,添個什么好呢?(本人最大的弱點就是不會寫例子。。。)隨便來一個吧,編輯 TestWebUserControl.ascx.cs 添加如下代碼:
這樣一個可讀寫的文本屬性就做好,太簡單了。。。
選中 Default.aspx 切換到[設計]視圖,分別選中兩個用戶控件,在屬性查看器里對 LabelContext 進行設置,如圖所示:
為了測試該屬性的實現,我們再在 Default.aspx 的頁面上添加一個 Button 控件,對其 Click 事件添加響應代碼,如下:
運行程序,點擊該按鈕,效果如圖所示:
5.添加方法
屬性加好了,現在再添加一個方法,編輯 TestWebUserControl.ascx.cs ,添加如下代碼:
大家可能注意到,我這個方法有一個 sender ,這是干什么用的呢?別著急,在后面添加事件里會講到的。
為了測試這個方法,選中 Default.aspx ,切換到[設計]視圖,再添加一個按鈕,為其 Click 事件添加如下的響應代碼:
現在運行程序,點擊該按鈕,效果如圖所示:
6.添加自定義事件
屬性和方法我們做好了,那么事件呢? 繼續編輯 WebUserControlTest.ascx.cs ,首先定義一個代理,代碼如下:
publicclass LabelContextChangedEventArgs : EventArgs { ??? privatestring labelContext;
??? public LabelContextChangedEventArgs(string value) ??? ??? { ??????? labelContext = value; ??? } ??? ???? publicstring LabelContext ??? { ??????? get { return labelContext; } ??? } }
再為 TestWebUserControl 這個類添加一個事件變量和事件觸發函數,代碼如下:
??? publicevent LabelContextChangedHandler LabelContextChanged;??? privatevoid OnLabelContextChanged(object sender, LabelContextChangedEventArgs e) ??? { ??????? if (LabelContextChanged !=null) ??????? ??????????? LabelContextChanged(sender, e); ??????? ?? }
然后,在 ChangeLabelContext 函數里增加對事件的觸發,需要修改原來的代碼,如下: 將
??? publicvoid ChangeLabelContext(object sender, string value) ??? { ??????? Label1.Text = value; ??? }改為
??? publicvoid ChangeLabelContext(object sender, string value) ??? { ??????? Label1.Text = value; ??????? OnLabelContextChanged(sender, new LabelContextChangedEventArgs(value)); ??? } OK!到此,我們就完成了對用戶控件事件的定義并確定了在何時觸發這個事件,下面我們來測試一下。
編輯Default.aspx.cs,先添加一個響應事件的函數,代碼如下:
實現的效果就是將觸發事件的 Button 控件的 Text 屬性設置成用戶控件 LabelContext 的值。
現在,再在頁面的 Page_Load 事件的響應代碼里將兩個用戶近件的 LabelContextChanged 和 這個函數“連接”起來就OK啦!代碼如下:
現在我們運行程序,點擊頁面第二個按鈕,效果如圖所示這:
6的實際運行順序:1.load事件里運行LabelContextChangedHandler,然后給labelContext賦值,然后再點擊第二個按鈕。
7.控件內客戶端角本訪問服務器控件的方法
這個問題實際上并不屬于 Web 用戶控件開發的范疇,但實際開發中多多少少會碰到這個問題,所以本著我這“牽?;ā钡钠饩桶阉盃俊边M來了,哈哈。
有人要問了,為什么控件內客戶端角本訪問服務器控件會是一個問題呢,這主要是因為,ASP.NET在將頁面解釋成客戶端瀏覽器使用的頁面時,將用戶控件內的服務器控件ID做了一定的改動。如在咱們開發的這個用戶控件里有一個 TextBox 控件,ID本來是 TextBox1 ,但在解釋后的頁面里它變成了 TestWebUserControl1_TextBox1,我們通過在瀏覽器里查看源代碼可以看到,如下所示:
也就是說,用戶控件被解釋成客戶端頁面后,其中的服務器控件的ID規則是用戶控件ID_服務器控件ID,知道這個規律我們就好辦了。
編輯 TestWebUserControl.ascx ,切換到[設計]視圖,從 HTML 面板拖一個 Input(Button) 控件(注意:這里要的是一個客戶端控件)。再切換到[源視圖]為其添加 onclick 屬性,設成調用一個客戶端函數 ShowTextBoxContext ,而這個函數要操作用戶控件里的一個服務器控件,完整代碼如下:
<script type="text/javascript" language="javascript"> ??? function ShowTextBoxContext(obj) ? ?? { ??????? alert(obj.value); ??? } </script>
注意這里的<%= TextBox1.ClientID%>,為了獲取客戶端的對象,我們執行了一個服務端操作,“<%=”和 “%>”之間的代碼將會在服務端運行,如此而己,是不是很簡單?
現在我們運行程序,在第一個文本框里輸入“開發和使用 Web 用戶控件,OK!!!”,點擊用戶控件中剛添加的客戶端 Button 按鈕,將彈出一個對話框,顯示我們填寫的內容,效果如圖所示:
另:如果使用的是外鏈角本而非這種內嵌的,那么這種訪問方法并不能勝任。我的解決方案是將被訪問的服務器控件放到一個 DIV 層里(它本來就是客戶端組件),這樣在客戶端通過先查找到這個 DIV 層,再訪問它的處Children 屬性,就可以獲取到相應的控件了。但由于在用戶控件里使用這種外鏈角本將來在部署上多少有點麻煩,不建議使用,所以就沒有列出詳細的解決方案。
轉載至http://tech.it168.com/KnowledgeBase/Articles/3/1/a/31a5f7631ac4498b04cea4f830858ee0.htm
轉載于:https://www.cnblogs.com/dieaz5/archive/2012/10/15/2725095.html
總結
以上是生活随笔為你收集整理的开发和使用Web用户控件的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: GNU ARM汇编--(二)汇编编译链接
- 下一篇: WebService安全 身份验证与访问