ASP.NET控件開(kāi)發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能
上一篇討論了如何為子控件添加集合樣式,這次我們討論如何為服務(wù)器控件添加客戶端功能 .
ASP.NET控件開(kāi)發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能1.減輕服務(wù)器壓力,增加用戶體驗(yàn)
服務(wù)器功能是強(qiáng)大的,客戶端腳本一點(diǎn)也不弱,現(xiàn)在的ajax技術(shù)和Atlas技術(shù)就是***的證明,我們總是期待UI有一個(gè)好的效果,flash動(dòng)畫(huà)給我們帶來(lái)了很酷的效果,我們至少也可以為我們的服務(wù)器控件添加客戶端腳本,一方面減少了服務(wù)器端的回傳,一方面又能為控件提供非常酷的效果.我想我們都很喜歡ATLAS里面很多很酷的控件吧,而且無(wú)刷新,服務(wù)器控件與客戶端腳本交互使用,那會(huì)服務(wù)器控件變的更加***.
經(jīng)過(guò)上面的廢話,下面我們進(jìn)入正題
ASP.NET控件開(kāi)發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能2.簡(jiǎn)單為服務(wù)器控件添加客戶端腳本
我們已經(jīng)了解到服務(wù)器控件呈現(xiàn)后的代碼仍然為HTML,只要你熟悉此服務(wù)器控件呈現(xiàn)后標(biāo)簽和此標(biāo)簽的元素,你就可以直接在服務(wù)器控件中添加
屬性,事件,樣式等等
簡(jiǎn)單的添加方法如下:
(1)直接在控件添加屬性,如為Button控件添加簡(jiǎn)單的客戶端事件
- ﹤asp:Button ID="Button2" runat="server" Text="Button"
- onmouseover="this.value='鼠標(biāo)經(jīng)過(guò)'" onmouseout="this.value='鼠標(biāo)離開(kāi)'" /﹥
(2)使用AttributeCollection在后臺(tái)添加添加簡(jiǎn)單的客戶端事件,很典型的使用如我們?cè)趧h除數(shù)據(jù)的時(shí)候總要彈出一個(gè)窗口提醒用戶是否刪除.
- Button2.Attributes.Add("onmouseover", "this.value='鼠標(biāo)經(jīng)過(guò)'");
- Button2.Attributes.Add("onmouseout", "this.value='鼠標(biāo)離開(kāi)'");
ASP.NET控件開(kāi)發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能3.復(fù)雜客戶端功能處理
先不論服務(wù)器端的功能,當(dāng)客戶端腳本復(fù)雜以后,我們會(huì)寫(xiě)在一個(gè)js文件里,可以復(fù)用,簡(jiǎn)單的腳本邏輯可以﹤script﹥標(biāo)簽內(nèi).我們需要封裝.
Page類為我們提供了幾個(gè)方法用于實(shí)現(xiàn)以下內(nèi)容,但需要注意的是,asp.net2.0新加了一個(gè)類ClientScriptManager,專門(mén)用于管理客戶端腳本的方法,使用方法為
ClientScriptManager = Page.ClientScript;
(1)注冊(cè)腳本庫(kù)(js文件)
RegisterClientScriptInclude 方法
(2)發(fā)出位于頁(yè)面頂部和尾部的腳本
RegisterStartupScript方法和RegisterClientScriptBlock方法
(3)確保腳本塊在頁(yè)面只出現(xiàn)一次
以Is帶頭Registered結(jié)尾的四個(gè)方法
(4)將控件事件處理程序與客戶端提交事件關(guān)聯(lián)起來(lái)
RegisterOnSubmitStatement 方法
(5)注冊(cè)一個(gè)數(shù)組用來(lái)存儲(chǔ)控件自身變量
RegisterArrayDeclaration方法
(6)注冊(cè)一個(gè)隱藏域
RegisterHiddenField 方法
對(duì)于以上方法的具體使用MSDN均給出了具體的示例,剛看的時(shí)候感覺(jué)方法名比較長(zhǎng),接觸后就會(huì)感覺(jué)簡(jiǎn)單了,對(duì)以上方法的使用一定要了解.如果你不想看MSDN的話,那么推薦看下面幾篇文章,相信對(duì)你會(huì)有很大幫助.還有建議大家可以看下呈現(xiàn)后的HTML代碼,這樣會(huì)加深理解.
從 ASP.NET 服務(wù)器控件插入客戶端腳本
使用客戶端腳本
ASP.NET控件開(kāi)發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能4.了解預(yù)呈現(xiàn)PreRender事件
這里還是要講控件的生命周期,在控件呈現(xiàn)Render方法之前,還有一個(gè)預(yù)呈現(xiàn)OnPreRender 方法.其周期是在OnLoad之后的MSDN給出了其解釋
在呈現(xiàn)輸出之前執(zhí)行任何更新?？梢员４嬖陬A(yù)呈現(xiàn)階段對(duì)控件狀態(tài)所做的更改，而在呈現(xiàn)階段所對(duì)的更改則會(huì)丟失
總結(jié)的話,總是很簡(jiǎn)單的,要深刻理解的話,還是需要我們?nèi)ピ囼?yàn)一下,再回來(lái)體驗(yàn)上面這句話
先看一個(gè)簡(jiǎn)單的例子,在頁(yè)面上重寫(xiě)了Page_PreRender,在其事件中給label1賦值,然后再定義了button事件,你會(huì)發(fā)現(xiàn)button事件觸發(fā)后label的值還是保持不變.
ASP.NET控件開(kāi)發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能示例一
- protected void Page_PreRender(object sender, EventArgs e)
- {
- Label1.Text="PreRender";
- }
- protected void Button1_Click(object sender, EventArgs e)
- {
- Label1.Text = "Click";
- }
再理解上面這句話,可能我們想為什么不在呈現(xiàn)的時(shí)候Render方法中實(shí)現(xiàn)呢?如果這么做的話,那你就要屬性定死了.
我們還需要說(shuō)明一點(diǎn),不同事件負(fù)責(zé)不同的事情,Render方法只負(fù)責(zé)呈現(xiàn),不要把別的事情交給他做.
你可以在Render方法為控件添加需要呈現(xiàn)的屬性,但其他事情則需要在呈現(xiàn)之前完成.整個(gè)控件的周期是有階段,不同階段完成不同事情.
我們這次討論的是為服務(wù)器控件添加客戶端腳本,那么我們就要在控件適當(dāng)?shù)臅r(shí)機(jī)調(diào)用ClientScriptManager類的方法.而這個(gè)適當(dāng)?shù)臅r(shí)機(jī)就是OnPreRender 方法了.
ASP.NET控件開(kāi)發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能5.在自定義控件中添加客戶端腳本
(1)簡(jiǎn)單的實(shí)現(xiàn):你可以重些OnPreRender方法,然后用AttributeCollection的Add方法,添加簡(jiǎn)單客戶端腳本
- protected override void OnPreRender(EventArgs e)
- {
- base.OnPreRender(e);
- Attributes.Add("onclick","alert('" + ClickText + "');");
- }
(2)復(fù)雜的實(shí)現(xiàn): 這里我們用的例子還是簡(jiǎn)單點(diǎn)吧,效果還是按鈕確認(rèn)之前有一個(gè)彈出窗口,重要的是大家要了解ClientScriptManager類中幾個(gè)方法的使用,以下的代碼使用的是 asp.net服務(wù)器控件開(kāi)發(fā)技術(shù)與實(shí)例的實(shí)例2 ,我偷懶,直接就用Page里的幾個(gè)方法的.
以下列出代碼
ASP.NET控件開(kāi)發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能示例二
- /**//// ﹤summary﹥
- /// NormalButton 顯示為一個(gè)普通樣式按鈕。
- /// 當(dāng)用戶點(diǎn)擊按鈕之后，跳出一個(gè)確認(rèn)對(duì)話框來(lái)確定其動(dòng)作。
- /// 通常多用于確認(rèn)用戶是否確實(shí)要進(jìn)行刪除/修改等類似的操作。
- /// ﹤/summary﹥
- [ToolboxData("﹤{0}:NormalButton runat=server﹥﹤/{0}:NormalButton﹥")]
- public class NormalButton : Button
- {
- private string _scriptPath = "ControlClientScript/";
- //構(gòu)造函數(shù)
- public NormalButton():base()
- {
- Message = "您確實(shí)要這樣做嗎？";
- }
- 定義屬性#region 定義屬性
- [Bindable(true),
- Category("Appearance"),
- DefaultValue("您確實(shí)要這樣做嗎？"),
- Description("自定義提示信息")]
- public string Message
- {
- get
- {
- return (string)ViewState["Message"];
- }
- set
- {
- ViewState["Message"] = value;
- }
- }
- [Category("Other"),
- DefaultValue("ControlClientScript/"),
- Description("腳本路徑")]
- public String ScriptPath
- {
- get
- {
- return _scriptPath;
- }
- set
- {
- _scriptPath = value;
- }
- }
- #endregion
- //重寫(xiě)AddAttributesToRender方法
- protected override void AddAttributesToRender(HtmlTextWriter output)
- {
- Attributes.Add("confirmationmessage",Message);
- base.AddAttributesToRender(output);
- }
- //重寫(xiě)OnPreRender方法
- protected override void OnPreRender( EventArgs e )
- {
- Page.RegisterClientScriptBlock( "WebUIConfirmation",
- "﹤script language='javascript' src='" + ScriptPath +
- "WebUIConfirmation.js" + "'﹥﹤/script﹥" );
- Page.RegisterArrayDeclaration("Page_Confirmations",
- "'" + ClientID + "'" );
- Page.RegisterStartupScript( "WebUIConfirmation Startup",
- "﹤script language='javascript' src='" + ScriptPath +
- "WebUIConfirmationStartup.js" + "'﹥﹤/script﹥" );
- base.OnPreRender(e);
- }
- }
主要看OnPreRender方法,只要你對(duì)其幾個(gè)方法熟悉后,那剩下就是你對(duì)javaScript的掌握程度了.掌握上面幾個(gè)方法可以說(shuō)很容易,對(duì)javaScript的掌握那需要平時(shí)的積累了,所以要開(kāi)發(fā)一個(gè)好的控件,并不容易呀.
下面再列出js文件,我對(duì)其梢有改動(dòng)
- WebUIConfirmationStartup.js
- ConfirmationOnLoad();
- WebUIConfirmation.js
- //String去空格
- String.prototype.Trim = function()
- {
- return this.replace(/(^\s*)|(\s*$)/g, "");
- }
- //初始化獲取控件ID
- function ConfirmationOnLoad() {
- if (typeof(Page_Confirmations) == "undefined") return;
- var i, confirmButton;
- for (i = 0; i ﹤ Page_Confirmations.length; i++) {
- confirmButton = Page_Confirmations[i];
- if (typeof(confirmButton) == "string") {
- confirmButton = document.getElementById( confirmButton );
- }
- if (typeof(confirmButton.confirmationmessage ) != "undefined" ) {
- if ( confirmButton.attributes["confirmationmessage"].value.Trim() != "" ) {
- confirmButton.confirmationmessage = confirmButton.attributes["confirmationmessage"].value;
- } else {
- confirmButton.confirmationmessage = "您確實(shí)要這樣做嗎？";
- }
- }
- ConfirmationHookupControl(confirmButton);
- }
- }
- //添加onclick事件
- function ConfirmationHookupControl( confirmButton ) {
- var ev = confirmButton.onclick;
- if (typeof(ev) == "function" ) {
- ev = ev.toString();
- ev = ev.substring(ev.indexOf("{") + 1, ev.lastIndexOf("}"));
- }
- else {
- ev = "";
- }
- var func = new Function("if ( !ConfirmationOnClick( this ) ){return false;} " + ev);
- confirmButton.onclick = func;
- }
- //彈出確認(rèn)窗口
- function ConfirmationOnClick( confirmButton ) {
- return window.confirm( confirmButton.confirmationmessage );
- }
OK,上面的服務(wù)器控件代碼還是挺簡(jiǎn)單的,你看的懂JS的話,那這個(gè)效果就沒(méi)問(wèn)題了.其實(shí)說(shuō)真的,難點(diǎn)在于JavaScript腳本,呵呵.
下面再說(shuō)一個(gè)例子吧,也是asp.net服務(wù)器控件開(kāi)發(fā)技術(shù)與實(shí)例的例子,是一個(gè)可伸縮面板控件,其是一個(gè)集合屬性和客戶端腳本一起實(shí)現(xiàn)的效果
但此控件卻并在呈現(xiàn)頁(yè)面上用到j(luò)s腳本,也沒(méi)重寫(xiě)OnPreRender方法,而是定義了一個(gè)HTC,其關(guān)鍵實(shí)現(xiàn)是服務(wù)器控件的集合屬性的實(shí)現(xiàn),還有就是客戶端腳本的實(shí)現(xiàn),具體代碼可以在后面下載.
ASP.NET控件開(kāi)發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能其他需要注意的問(wèn)題:
1.客戶端腳本在服務(wù)器控件中的最頻繁的使用則是驗(yàn)證控件的使用了,你也可以自定義驗(yàn)證控件,但我感覺(jué)用處不是很大,如果需要你可以了解下System.Web.UI.IValidator 接口和System.Web.UI.WebControls.BaseValidator類
2.另外還有客戶端回調(diào),你可以了解下ICallbackEventHandler接口,具體還是看相關(guān)文章或者M(jìn)SDN吧.
好了又寫(xiě)完一篇了,如果你剛接觸這些東西的話,對(duì)你還是有幫助的,如果你已經(jīng)了解了,我上面講的對(duì)你來(lái)說(shuō)就很簡(jiǎn)單了.還是想那樣說(shuō),關(guān)鍵在于你對(duì)JavaScript的熟練程度.一些東西還需要你自己去挖掘.
ASP.NET控件開(kāi)發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能的相關(guān)內(nèi)容就向你介紹到這里，希望對(duì)你了解ASP.NET控件開(kāi)發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能有所幫助。
【編輯推薦】
