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