UpdatePanel觸發(fā)javascript腳本的方法附代碼
更新時(shí)間:2007年10月13日 21:27:58 作者:
一.預(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引起的問(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)下返回給了我們什么
出錯(cuò)了,大家可能也遇到過(guò)此情況,很正常嘛,UpdatePanel沒(méi)有為我們注冊(cè)腳本也沒(méi)未我們初始化,在屬于正常現(xiàn)象,UpdatePanel只管其容器里面的,其他的不歸它管.
三.解決方法
要解決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ā)客戶端事件的,有以下方案
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("<script src=\"xxxx.js\"></script>");
output.Write(Text);
output.Write("<script>alert('hello')</script>");
}
四.幾個(gè)誤區(qū)
1.驗(yàn)證控件在ajax框架中可以完好使用
其實(shí)是其加載了一段腳本,不然其也會(huì)掛掉
2.狀態(tài)保留
在UpdatePanel中更新數(shù)據(jù)后,再Postback,無(wú)刷新更新的數(shù)據(jù)狀態(tài)還保留
3.更新數(shù)據(jù)后執(zhí)行客戶端腳本
曾經(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)比較的爽。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è)用用
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引起的問(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)下返回給了我們什么
出錯(cuò)了,大家可能也遇到過(guò)此情況,很正常嘛,UpdatePanel沒(méi)有為我們注冊(cè)腳本也沒(méi)未我們初始化,在屬于正常現(xiàn)象,UpdatePanel只管其容器里面的,其他的不歸它管.
三.解決方法
要解決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ā)客戶端事件的,有以下方案
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("<script src=\"xxxx.js\"></script>");
output.Write(Text);
output.Write("<script>alert('hello')</script>");
}
四.幾個(gè)誤區(qū)
1.驗(yàn)證控件在ajax框架中可以完好使用
其實(shí)是其加載了一段腳本,不然其也會(huì)掛掉
2.狀態(tài)保留
在UpdatePanel中更新數(shù)據(jù)后,再Postback,無(wú)刷新更新的數(shù)據(jù)狀態(tài)還保留
3.更新數(shù)據(jù)后執(zhí)行客戶端腳本
曾經(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)比較的爽。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è)用用
您可能感興趣的文章:
- js 觸發(fā)select onchange事件代碼
- 代碼觸發(fā)js事件(click、change)示例應(yīng)用
- js獲取觸發(fā)事件元素在整個(gè)網(wǎng)頁(yè)中的絕對(duì)坐標(biāo)(示例代碼)
- javascript 動(dòng)態(tài)改變onclick事件觸發(fā)函數(shù)代碼
- JavaScript 動(dòng)態(tài)添加腳本,并觸發(fā)回調(diào)函數(shù)的實(shí)現(xiàn)代碼
- 文本框中,回車(chē)鍵觸發(fā)事件的js代碼[多瀏覽器兼容]
- 用javascript獲取當(dāng)頁(yè)面上鼠標(biāo)光標(biāo)位置和觸發(fā)事件的對(duì)象的代碼
- 用按鈕觸發(fā)Javascript動(dòng)態(tài)生成一個(gè)表格的代碼
- FireFox與IE 下js兼容觸發(fā)click事件的代碼
- 鼠標(biāo)放上去觸發(fā)一個(gè)javascript提示框效果代碼
- JS代碼觸發(fā)事件代碼實(shí)例
相關(guān)文章
過(guò)濾掉危險(xiǎn)的HTML標(biāo)記:script,ifame,object
過(guò)濾掉危險(xiǎn)的HTML標(biāo)記:script,ifame,object...2007-01-01asp 使用正則表達(dá)式替換word中的標(biāo)簽,轉(zhuǎn)為純文本
asp里使用正則表達(dá)式清除后臺(tái)編輯器里復(fù)制粘貼內(nèi)容的word格式,將其轉(zhuǎn)換成純文本2010-04-04ASP版實(shí)現(xiàn)cookies注入加速工具
ASP版實(shí)現(xiàn)cookies注入加速工具...2007-11-11asp在iis7報(bào)錯(cuò)行號(hào)不準(zhǔn)問(wèn)題的解決方法
這篇文章主要介紹了asp在iis7報(bào)錯(cuò)行號(hào)不準(zhǔn)問(wèn)題的解決方法,需要的朋友可以參考下2020-08-08Tsys OkHtm.com修改版數(shù)據(jù)采集方法
Tsys OkHtm.com修改版數(shù)據(jù)采集方法...2007-01-01asp下用replace非正則實(shí)現(xiàn)代碼運(yùn)行功能的代碼
asp下用replace非正則實(shí)現(xiàn)代碼運(yùn)行功能的代碼...2007-09-09Asp Conn.execute的參數(shù)與返回值總結(jié)
這篇文章主要介紹了Asp Conn.execute的參數(shù)與返回值總結(jié),數(shù)據(jù)庫(kù)對(duì)象的execute方法參數(shù)與返回值總結(jié),需要的朋友可以參考下2014-07-07