這篇文章主要介紹了ASP.NET中如何為服務(wù)器控件添加客戶端功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了峨山縣免費建站歡迎大家使用！

ASP.NET控件開發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能1.減輕服務(wù)器壓力,增加用戶體驗

服務(wù)器功能是強大的,客戶端腳本一點也不弱,現(xiàn)在的ajax技術(shù)和Atlas技術(shù)就是***的證明,我們總是期待UI有一個好的效果,flash動畫給我們帶來了很酷的效果,我們至少也可以為我們的服務(wù)器控件添加客戶端腳本,一方面減少了服務(wù)器端的回傳,一方面又能為控件提供非?？岬男Ч?我想我們都很喜歡ATLAS里面很多很酷的控件吧,而且無刷新,服務(wù)器控件與客戶端腳本交互使用,那會服務(wù)器控件變的更加***.

經(jīng)過上面的廢話,下面我們進入正題

ASP.NET控件開發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能2.簡單為服務(wù)器控件添加客戶端腳本

我們已經(jīng)了解到服務(wù)器控件呈現(xiàn)后的代碼仍然為HTML,只要你熟悉此服務(wù)器控件呈現(xiàn)后標簽和此標簽的元素,你就可以直接在服務(wù)器控件中添加

屬性,事件,樣式等等

簡單的添加方法如下:

(1)直接在控件添加屬性,如為Button控件添加簡單的客戶端事件

﹤asp:Button ID="Button2" runat="server" Text="Button"    onmouseover="this.value='鼠標經(jīng)過'" onmouseout="this.value='鼠標離開'"  /﹥

(2)使用AttributeCollection在后臺添加添加簡單的客戶端事件,很典型的使用如我們在刪除數(shù)據(jù)的時候總要彈出一個窗口提醒用戶是否刪除.

Button2.Attributes.Add("onmouseover", "this.value='鼠標經(jīng)過'");   Button2.Attributes.Add("onmouseout", "this.value='鼠標離開'");

ASP.NET控件開發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能3.復(fù)雜客戶端功能處理

先不論服務(wù)器端的功能,當客戶端腳本復(fù)雜以后,我們會寫在一個js文件里,可以復(fù)用,簡單的腳本邏輯可以﹤script﹥標簽內(nèi).我們需要封裝.

Page類為我們提供了幾個方法用于實現(xiàn)以下內(nèi)容,但需要注意的是,asp.net2.0新加了一個類ClientScriptManager,專門用于管理客戶端腳本的方法,使用方法為

ClientScriptManager = Page.ClientScript;

(1)注冊腳本庫(js文件)

RegisterClientScriptInclude 方法

(2)發(fā)出位于頁面頂部和尾部的腳本

RegisterStartupScript方法和RegisterClientScriptBlock方法

(3)確保腳本塊在頁面只出現(xiàn)一次

以Is帶頭Registered結(jié)尾的四個方法

(4)將控件事件處理程序與客戶端提交事件關(guān)聯(lián)起來

RegisterOnSubmitStatement 方法

(5)注冊一個數(shù)組用來存儲控件自身變量

RegisterArrayDeclaration方法

(6)注冊一個隱藏域

RegisterHiddenField 方法

對于以上方法的具體使用MSDN均給出了具體的示例,剛看的時候感覺方法名比較長,接觸后就會感覺簡單了,對以上方法的使用一定要了解.如果你不想看MSDN的話,那么推薦看下面幾篇文章,相信對你會有很大幫助.還有建議大家可以看下呈現(xiàn)后的HTML代碼,這樣會加深理解.

從 ASP.NET 服務(wù)器控件插入客戶端腳本

使用客戶端腳本

ASP.NET控件開發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能4.了解預(yù)呈現(xiàn)PreRender事件

這里還是要講控件的生命周期,在控件呈現(xiàn)Render方法之前,還有一個預(yù)呈現(xiàn)OnPreRender 方法.其周期是在OnLoad之后的MSDN給出了其解釋

在呈現(xiàn)輸出之前執(zhí)行任何更新?？梢员４嬖陬A(yù)呈現(xiàn)階段對控件狀態(tài)所做的更改，而在呈現(xiàn)階段所對的更改則會丟失

總結(jié)的話,總是很簡單的,要深刻理解的話,還是需要我們?nèi)ピ囼炓幌?再回來體驗上面這句話

先看一個簡單的例子,在頁面上重寫了Page_PreRender,在其事件中給label1賦值,然后再定義了button事件,你會發(fā)現(xiàn)button事件觸發(fā)后label的值還是保持不變.

ASP.NET控件開發(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)的時候Render方法中實現(xiàn)呢?如果這么做的話,那你就要屬性定死了.

我們還需要說明一點,不同事件負責不同的事情,Render方法只負責呈現(xiàn),不要把別的事情交給他做.

你可以在Render方法為控件添加需要呈現(xiàn)的屬性,但其他事情則需要在呈現(xiàn)之前完成.整個控件的周期是有階段,不同階段完成不同事情.

我們這次討論的是為服務(wù)器控件添加客戶端腳本,那么我們就要在控件適當?shù)臅r機調(diào)用ClientScriptManager類的方法.而這個適當?shù)臅r機就是OnPreRender 方法了.

ASP.NET控件開發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能5.在自定義控件中添加客戶端腳本

(1)簡單的實現(xiàn):你可以重些OnPreRender方法,然后用AttributeCollection的Add方法,添加簡單客戶端腳本

protected override void OnPreRender(EventArgs e)  {     base.OnPreRender(e);     Attributes.Add("onclick","alert('" + ClickText + "');");  }

(2)復(fù)雜的實現(xiàn): 這里我們用的例子還是簡單點吧,效果還是按鈕確認之前有一個彈出窗口,重要的是大家要了解ClientScriptManager類中幾個方法的使用,以下的代碼使用的是 asp.net服務(wù)器控件開發(fā)技術(shù)與實例的實例2 ,我偷懶,直接就用Page里的幾個方法的.

以下列出代碼

ASP.NET控件開發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能示例二

/**//// ﹤summary﹥      /// NormalButton 顯示為一個普通樣式按鈕。      /// 當用戶點擊按鈕之后，跳出一個確認對話框來確定其動作。      /// 通常多用于確認用戶是否確實要進行刪除/修改等類似的操作。      /// ﹤/summary﹥      [ToolboxData("﹤{0}:NormalButton runat=server﹥﹤/{0}:NormalButton﹥")]      public class NormalButton : Button      {          private string _scriptPath = "ControlClientScript/";          //構(gòu)造函數(shù)          public NormalButton():base()          {              Message = "您確實要這樣做嗎？";          }                    定義屬性#region 定義屬性           [Bindable(true),           Category("Appearance"),           DefaultValue("您確實要這樣做嗎？"),          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           //重寫AddAttributesToRender方法          protected override void AddAttributesToRender(HtmlTextWriter output)          {              Attributes.Add("confirmationmessage",Message);              base.AddAttributesToRender(output);           }           //重寫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方法,只要你對其幾個方法熟悉后,那剩下就是你對javaScript的掌握程度了.掌握上面幾個方法可以說很容易,對javaScript的掌握那需要平時的積累了,所以要開發(fā)一個好的控件,并不容易呀.

下面再列出js文件,我對其梢有改動

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 = "您確實要這樣做嗎？";              }          }          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;  }   //彈出確認窗口  function ConfirmationOnClick( confirmButton ) {      return window.confirm( confirmButton.confirmationmessage );  }

OK,上面的服務(wù)器控件代碼還是挺簡單的,你看的懂JS的話,那這個效果就沒問題了.其實說真的,難點在于JavaScript腳本,呵呵.

下面再說一個例子吧,也是asp.net服務(wù)器控件開發(fā)技術(shù)與實例的例子,是一個可伸縮面板控件,其是一個集合屬性和客戶端腳本一起實現(xiàn)的效果

但此控件卻并在呈現(xiàn)頁面上用到j(luò)s腳本,也沒重寫OnPreRender方法,而是定義了一個HTC,其關(guān)鍵實現(xiàn)是服務(wù)器控件的集合屬性的實現(xiàn),還有就是客戶端腳本的實現(xiàn),具體代碼可以在后面下載.

ASP.NET控件開發(fā)基礎(chǔ)之服務(wù)器控件客戶端功能其他需要注意的問題:

1.客戶端腳本在服務(wù)器控件中的最頻繁的使用則是驗證控件的使用了,你也可以自定義驗證控件,但我感覺用處不是很大,如果需要你可以了解下System.Web.UI.IValidator 接口和System.Web.UI.WebControls.BaseValidator類

2.另外還有客戶端回調(diào),你可以了解下ICallbackEventHandler接口,具體還是看相關(guān)文章或者MSDN吧.

好了又寫完一篇了,如果你剛接觸這些東西的話,對你還是有幫助的,如果你已經(jīng)了解了,我上面講的對你來說就很簡單了.還是想那樣說,關(guān)鍵在于你對JavaScript的熟練程度.一些東西還需要你自己去挖掘.

感謝你能夠認真閱讀完這篇文章，希望小編分享的“ASP.NET中如何為服務(wù)器控件添加客戶端功能”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!