<< Оценка времени проекта | Time Management: Матрица Приоритетов >>

How To: Вызвать Javascript функцию после обновления UpdatePanel

UpdatePanel - это контрол Microsoft ASP.NET AJAX, который позволяет довольно удобно интегрировать AJAX в ваше приложение. Но именно ввиду его удобства и простоты использования со стороны разработчика, некоторые вещи далеко не очевидны. К примеру как вызвать клиентский JavaScript по завершению очередного обновления этой панели? Трюк заключается в том, чтобы добавить EndRequestHandler в request manager: Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); Вот пример формы с двумя TextBox, куда вы вводите текст, а сервер возвращает длину текста и отображает ее во втором TextBox: &lt;%@ page language=&quot;C#&quot; autoeventwireup=&quot;true&quot; codebehind=&quot;DemoJScriptUpdate.aspx.cs&quot; inherits=&quot;CharterWeb.DemoJScriptUpdate&quot; %&gt; &nbsp; &nbsp;&lt;script runat=&quot;server&quot;&gt; &nbsp;protected void txtDataOnChange(object sender, EventArgs e) { &nbsp;txtLength.Text = txtData.Text.Length.ToString(); &nbsp;} &nbsp;&lt;/script&gt; &nbsp;&lt;html xmlns=&quot;&lt;a href=&quot;http://www.w3.org/1999/xhtml&quot;&gt;http://www.w3.org/1999/xhtml&lt;/a&gt;&quot;&gt; &nbsp;&lt;head id=&quot;Head1&quot; runat=&quot;server&quot;&gt; &nbsp; &nbsp; &nbsp;&lt;script type=&quot;text/javascript&quot;&gt; &nbsp;function EndRequestHandler(sender, args) { &nbsp;if (args.get_error() == undefined) &nbsp;alert(&quot;Your text has: &quot; + document.getElementById(&quot;txtLength&quot;).value + &quot; character(s)&quot;); &nbsp;else &nbsp;alert(&quot;There was an error&quot; + args.get_error().message); &nbsp;} &nbsp;function load() { &nbsp;Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); &nbsp;} &nbsp;&lt;/script&gt; &nbsp; &nbsp;&lt;form id=&quot;form1&quot; runat=&quot;server&quot;&gt; &nbsp;&lt;?xml:namespace prefix =&quot;&quot; asp /&gt;&lt;/asp:scriptmanager id=&quot;_scriptManager&quot; runat=&quot;server&quot;&gt; &nbsp; &nbsp;&lt;asp:updatepanel id=&quot;UpdatePanel1&quot; runat=&quot;server&quot;&gt; &nbsp;&lt;contenttemplate&gt; &nbsp;Write something: &lt;/asp:textbox id=&quot;txtData&quot; runat=&quot;server&quot; autopostback=&quot;true&quot; ontextchanged=&quot;txtDataOnChange&quot;&gt; &nbsp;&lt;br /&gt; &nbsp;Server says the length is: &lt;/asp:textbox id=&quot;txtLength&quot; runat=&quot;server&quot; autopostback=&quot;true&quot;&gt; &nbsp;&lt;/contenttemplate&gt; &nbsp;&lt;/asp:updatepanel&gt; &nbsp; &nbsp;&lt;/form&gt;&nbsp;

UpdatePanel - это контрол Microsoft ASP.NET AJAX, который позволяет довольно удобно интегрировать AJAX в ваше приложение. Но именно ввиду его удобства и простоты использования со стороны разработчика, некоторые вещи далеко не очевидны. К примеру как вызвать клиентский JavaScript по завершению очередного обновления этой панели?

Трюк заключается в том, чтобы добавить EndRequestHandler в request manager:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

Вот пример формы с двумя TextBox, куда вы вводите текст, а сервер возвращает длину текста и отображает ее во втором TextBox:

<%@ page language="C#" autoeventwireup="true" codebehind="DemoJScriptUpdate.aspx.cs" inherits="CharterWeb.DemoJScriptUpdate" %>

<script runat="server">
protected void txtDataOnChange(object sender, EventArgs e) {
txtLength.Text = txtData.Text.Length.ToString();
}
</script>
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head id="Head1" runat="server">

<script type="text/javascript">
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined)
alert("Your text has: " + document.getElementById("txtLength").value + " character(s)");
else
alert("There was an error" + args.get_error().message);
}
function load() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
</script>

<form id="form1" runat="server">
<?xml:namespace prefix ="" asp /></asp:scriptmanager id="_scriptManager" runat="server">

<asp:updatepanel id="UpdatePanel1" runat="server">
<contenttemplate>
Write something: </asp:textbox id="txtData" runat="server" autopostback="true" ontextchanged="txtDataOnChange">
 
Server says the length is: </asp:textbox id="txtLength" runat="server" autopostback="true">
</contenttemplate>
</asp:updatepanel>

</form>

Sencha touch sources listFor those who want to debug sencha touch applications in more convenient way here is a list of sourc...Динамическое добавление ASP.NET пользовательского контрола с использованием JQuery

Недавно у меня возникла необходимость динамически подгружать пользовательские контролы на ...FireUnit: Javascript Unit Testing Extension

Юнит-тесты это то, на что никогда нет времени. А если есть время, то нет желания. И наконец, ес...

blog comments powered by Disqus

February 3. 19:43
The week of work going away... http://t.co/KW9OY030

January 28. 20:56
Schlep Blindness http://t.co/BHRAJtJI

January 22. 02:31
IE10 Compat Inspector http://t.co/AHe3tPXX

January 21. 09:12
JavaScript pattern and antipattern collection http://t.co/FnWMq9yX

January 18. 19:00
Tell Congress: Don’t censor the web! http://t.co/CsZkbFgb

January 17. 21:50
Rethinking Information Diversity in Networks | Facebook http://t.co/42BFBDaA

January 17. 19:50
Nice true story about hacked GMail account. http://t.co/moN7EPG4 Have something to learn from it...

January 10. 07:25
Language of stamps http://t.co/mceT6Yk6 - an old way to send encrypted messages

December 29. 13:30
drinking tea at the top of the mountain http://t.co/RqzgIT2R

Follow me on twitter

Pavel Podlipensky

The art of programming the WEB

How To: Вызвать Javascript функцию после обновления UpdatePanel

Related posts

Recent Posts