程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> ASP編程 >> 關於ASP編程 >> UpdatePanel觸發javascript腳本的方法附代碼

UpdatePanel觸發javascript腳本的方法附代碼

編輯:關於ASP編程
一.預呈現數據無法更改

  1.大家知道,預呈現的數據是無法更改的,以前可能提到過,這裡再看demo,自定義一個控件

[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頁面

protected void Button1_Click(object sender, EventArgs e)
{
JsControl1.Text = "I want to change the Text property"; 
}
  你會發現你並未更改屬性.這牽涉到控件生命周期的執行.為什麼要說這個,因為控件的大部分腳本都是在預呈現中注冊的. 

  這有什麼問題嗎? 其本身想法很好,腳本在此事件(指OnPreRender)中注冊,注冊腳本資源在前(控件夾中間),腳本初始化在最後.這符合javascript的使用原則,先導入腳本,然後有標簽,初始化的腳本須放在標簽後面.

  二.UpdatePanel引起的問題

  上面的問題如果是服務器提交回傳的則可行,主要問題是我們要用ajax無刷新注冊腳本.以下我們再來看asp.net2.0內置的treeview控件,拖個控件要頁面看其生成的html代碼。

  你已經看到很多的腳本注冊和初始化了.

  我們來測試下UpdatePanel能干什麼事情,我們設置其屬性Visible為False到True

  借助FireBug的威力我們來看下UpdatePanel在無刷新狀態下返回給了我們什麼
 
  出錯了,大家可能也遇到過此情況,很正常嘛,UpdatePanel沒有為我們注冊腳本也沒未我們初始化,在屬於正常現象,UpdatePanel只管其容器裡面的,其他的不歸它管.

  三.解決方法

  要解決TreeView控件,我是想不出來,這個控件算是在asp.net ajax模式下算是完蛋了.為了迎合asp.net ajax框架的運用,我們需要知道UpdatePanel無刷新更新范圍,當我們自己定義控件的時候就需要注意.

1.控件本身標簽
2.控件內部
3.UpdatePanel容器內部

  若想使用UpdatePanel更新數據後再觸發客戶端事件的,有以下方案

  1.通過更改現有控件屬性,如

Button1.Attributes["onmouseover"] = "alert('hello')"; 
  2.在呈現過程中腳本初始化

  第一種方法簡單運用還可以,復雜就不行了,我們還是需要把腳本封裝好跟控件結合使用的,我們不再在預呈現中注冊腳本,而在呈現中實現(即RederContent方法).
我們只要保證腳本資源在前,初始化在後,控件在中間這一原則就可以了...以下方法是可行的

如下
protected override void RenderContents(HtmlTextWriter output)
{
output.Write("<script src=\"xxxx.js\"></script>"); 
output.Write(Text); 
output.Write("<script>alert('hello')</script>"); 
}
  四.幾個誤區

  1.驗證控件在ajax框架中可以完好使用
其實是其加載了一段腳本,不然其也會掛掉
  2.狀態保留
  在UpdatePanel中更新數據後,再Postback,無刷新更新的數據狀態還保留
  3.更新數據後執行客戶端腳本

曾經我們天真的會這麼寫

protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "alert('hello')"; 
}
  結果什麼也沒發生,window.onload事件已過,除非你刷新(可你不想刷新),不然沒人幫你觸發。
  誰來觸發?微軟幫我們准備好了。你要的大概就是這個了,數據更新前後都是一個事件觸發。我們可以圍繞著這兩個事件為控件做點事情。這個狀態適合於數據取到後就立馬觸發的需要。
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; 
 }
  其他的話我們也可以更改控件屬性,就如加個onclick事件什麼的都可以

  五.另類解決方法

此方法比較的絕,但用起來比較的爽。UpdatePanel之所以無法獲取到腳本數據,是因為其獲取范圍還不夠。。。接著的想法是:

  照樣無刷新取數據,但取回來的數據跟Postback回來的數據一樣。
可能有人說會比較耗性能,那都是相對的。不過也是一個很好的想法。Telerik公司的RadAjaxPanel就是這麼實現的,有興趣的可以下載一個用用 
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved