ASP.NET控件開(kāi)發(fā)之UpdatePanel觸發(fā)JavaScript腳本的實(shí)現(xiàn)相信很多人都已經(jīng)遇到這個(gè)問(wèn)題了.這個(gè)本身不奇怪.下面我們來(lái)具體討論此問(wèn)題.

UpdatePanel觸發(fā)JavaScript腳本的實(shí)現(xiàn)一.預(yù)呈現(xiàn)數(shù)據(jù)無(wú)法更改

1.大家知道,預(yù)呈現(xiàn)的數(shù)據(jù)是無(wú)法更改的,以前可能提到過(guò),這里再看demo,自定義一個(gè)控件

[DefaultProperty("Text")]  
   [ToolboxData("<{0}:JsControl runat=server>{0}:JsControl>")]  
   public class JsControl : WebControl  
   {  
       [Bindable(true)]  
       [Category("Appearance")]  
       [DefaultValue("")]  
       [Localizable(true)]  
       public string Text  
       {  
           get  
           {  
               String s = (String)ViewState["Text"];  
               return ((s == null) ? String.Empty : s);  
           }  
 
           set  
           {  
               ViewState["Text"] = value;  
           }  
       }  
 
       protected override void OnPreRender(EventArgs e)  
       {  
           Text = "hello,you can't change me";  
           base.OnPreRender(e);  
       }  
 
       protected override void RenderContents(HtmlTextWriter output)  
       {  
           output.Write(Text);  
       }  
   } 

aspx頁(yè)面

protected void Button1_Click(object sender, EventArgs e)  
{  
    JsControl1.Text = "I want to change the Text property";  
} 

你會(huì)發(fā)現(xiàn)你并未更改屬性.這牽涉到控件生命周期的執(zhí)行.為什么要說(shuō)這個(gè),因?yàn)榭丶拇蟛糠帜_本都是在預(yù)呈現(xiàn)中注冊(cè)的. 

這有什么問(wèn)題嗎? 其本身想法很好,腳本在此事件(指OnPreRender)中注冊(cè),注冊(cè)腳本資源在前(控件夾中間),腳本初始化在***.這符合javascript的使用原則,先導(dǎo)入腳本,然后有標(biāo)簽,初始化的腳本須放在標(biāo)簽后面.

UpdatePanel觸發(fā)JavaScript腳本的實(shí)現(xiàn)二.UpdatePanel引起的問(wèn)題

上面的問(wèn)題如果是服務(wù)器提交回傳的則可行,主要問(wèn)題是我們要用ajax無(wú)刷新注冊(cè)腳本.以下我們?cè)賮?lái)看asp.net2.0內(nèi)置的treeview控件,拖個(gè)控件要頁(yè)面看其生成的html代碼,如下圖

 

圖一

你已經(jīng)看到很多的腳本注冊(cè)和初始化了.

我們來(lái)測(cè)試下UpdatePanel能干什么事情,我們?cè)O(shè)置其屬性Visible為False到True

借助FireBug的威力我們來(lái)看下UpdatePanel在無(wú)刷新?tīng)顟B(tài)下返回給了我們什么

 

圖二

下面再點(diǎn)下節(jié)點(diǎn),如下圖

 

圖三

出錯(cuò)了,大家可能也遇到過(guò)此情況,很正常嘛,UpdatePanel沒(méi)有為我們注冊(cè)腳本也沒(méi)未我們初始化,在屬于正常現(xiàn)象,UpdatePanel只管其容器里面的,其他的不歸它管.

UpdatePanel觸發(fā)JavaScript腳本的實(shí)現(xiàn)三.解決方法

要解決TreeView控件,我是想不出來(lái),這個(gè)控件算是在asp.net ajax模式下算是完蛋了.為了迎合asp.net ajax框架的運(yùn)用,我們需要知道UpdatePanel無(wú)刷新更新范圍,當(dāng)我們自己定義控件的時(shí)候就需要注意.

1.控件本身標(biāo)簽

2.控件內(nèi)部

3.UpdatePanel容器內(nèi)部

若想使用UpdatePanel更新數(shù)據(jù)后再觸發(fā)客戶(hù)端事件的,有以下方案

1.通過(guò)更改現(xiàn)有控件屬性,如

Button1.Attributes["onmouseover"] = "alert('hello')"; 

2.在呈現(xiàn)過(guò)程中腳本初始化

***種方法簡(jiǎn)單運(yùn)用還可以,復(fù)雜就不行了,我們還是需要把腳本封裝好跟控件結(jié)合使用的,我們不再在預(yù)呈現(xiàn)中注冊(cè)腳本,而在呈現(xiàn)中實(shí)現(xiàn)(即RederContent方法).
我們只要保證腳本資源在前,初始化在后,控件在中間這一原則就可以了...以下方法是可行的

如下

protected override void RenderContents(HtmlTextWriter output)  
{  
    output.Write("");  
    output.Write(Text);  
    output.Write("");  
} 

UpdatePanel觸發(fā)JavaScript腳本的實(shí)現(xiàn)四.幾個(gè)誤區(qū)

1.驗(yàn)證控件在ajax框架中可以完好使用,其實(shí)是其加載了一段腳本,不然其也會(huì)掛掉

2.狀態(tài)保留,在UpdatePanel中更新數(shù)據(jù)后,再Postback,無(wú)刷新更新的數(shù)據(jù)狀態(tài)還保留

3.更新數(shù)據(jù)后執(zhí)行客戶(hù)端腳本

曾經(jīng)我們天真的會(huì)這么寫(xiě)

protected void Button1_Click(object sender, EventArgs e)  
{  
    Label1.Text = "alert('hello')";  
} 

結(jié)果什么也沒(méi)發(fā)生，window.onload事件已過(guò)，除非你刷新（可你不想刷新),不然沒(méi)人幫你觸發(fā)。
誰(shuí)來(lái)觸發(fā)？微軟幫我們準(zhǔn)備好了。你要的大概就是這個(gè)了，數(shù)據(jù)更新前后都是一個(gè)事件觸發(fā)。我們可以圍繞著這兩個(gè)事件為控件做點(diǎn)事情。這個(gè)狀態(tài)適合于數(shù)據(jù)取到后就立馬觸發(fā)的需要。

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);  
               Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);  
               function BeginRequestHandler(sender, args)  
               {  
                    var elem = args.get_postBackElement();  
                    ActivateAlertDiv('visible', 'AlertDiv', elem.value + ' processing');  
               }  
               function EndRequestHandler(sender, args)  
               {  
                    ActivateAlertDiv('hidden', 'AlertDiv', '');  
               }  
               function ActivateAlertDiv(visstring, elem, msg)  
               {  
                    var adiv = $get(elem);  
                    adiv.style.visibility = visstring;  
                    adiv.innerHTML = msg;                       
               } 

其他的話我們也可以更改控件屬性，就如加個(gè)onclick事件什么的都可以

五.另類(lèi)解決方法

此方法比較的絕，但用起來(lái)比較的爽。UpdatePanel之所以無(wú)法獲取到腳本數(shù)據(jù)，是因?yàn)槠浍@取范圍還不夠。。。接著的想法是:

照樣無(wú)刷新取數(shù)據(jù)，但取回來(lái)的數(shù)據(jù)跟Postback回來(lái)的數(shù)據(jù)一樣。可能有人說(shuō)會(huì)比較耗性能，那都是相對(duì)的。不過(guò)也是一個(gè)很好的想法。Telerik公司的RadAjaxPanel就是這么實(shí)現(xiàn)的，有興趣的可以下載一個(gè)用用.

漏掉的請(qǐng)大家繼續(xù)補(bǔ)充，這個(gè)問(wèn)題比較的普遍，希望對(duì)大家有幫助。

ASP.NET控件開(kāi)發(fā)之UpdatePanel觸發(fā)JavaScript腳本的內(nèi)容就向大家介紹到這里，希望對(duì)你有所幫助。

【編輯推薦】

1. ASP.NET優(yōu)點(diǎn)淺析
2. ASP.NET組件設(shè)計(jì)淺析
3. ASP.NET組件設(shè)計(jì)代碼實(shí)現(xiàn)淺析
4. ASP.NET網(wǎng)站設(shè)置之文件夾權(quán)限設(shè)置淺析
5. ASP.NET控件開(kāi)發(fā)之修改服務(wù)器控件方法淺析