LA.NET [EN]

Apr 22

A few months ago, I”ve written a post on a forum which shows how to trigger a conditional postback from an HTML client control. Today I was asked about it again. It”s not really complicated after you understand that triggers are maintained in a javascript array by the client PageRequestManager object. When there”s a postback, the PageRequestManager checks that array and if the control responsible for the postback is on that list, you”ll get a partial postback (in fact, there are much more things done by the PageRequestManager, but none is important for this example). The rest of the “normal” behavior associated with triggers is accomplished by server side code.

Here”s an example that shows how you can create a “virtual” trigger on a client HTML input:

<%@ Page Language=”C#” AutoEventWireup=”true”  %>
   <script runat=”server”>
       protected override void OnLoad(EventArgs e)
       {
           base.OnLoad(e);
           if (ScriptManager1.IsInAsyncPostBack &&
               Request.Params[“__EVENTTARGET”] == “txt”)
           {
               panel.Update();
           }
       }
   </script>
   <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
   <html xmlns=”http://www.w3.org/1999/xhtml” >
   <head id=”Head1″ runat=”server”>
       <title>Untitled Page</title>
   <script>
   function main()
   {
       // Add Client Code here
   }
   </script>
   </head>
   <body>
       <form id=”form1″ runat=”server”>
           <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
           </asp:ScriptManager>
           <asp:updatepanel runat=”server” id=”panel” UpdateMode=”Conditional”>
            <ContentTemplate>
                panel 1:
                <%= DateTime.Now.ToString() %>
            </ContentTemplate>
           </asp:updatepanel>
           <asp:updatepanel runat=”server” id=”Updatepanel1″ UpdateMode=”Conditional”>
            <ContentTemplate>
                panel 2:
                <%= DateTime.Now.ToString() %>
            </ContentTemplate>
           </asp:updatepanel>
           <input type=”text”  id=”txt” onchange=”__doPostBack(”txt”,””);”; />
       </form>
       <script type=”text/javascript”>
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded( function() {
            Sys.WebForms.PageRequestManager.getInstance()._asyncPostBackControlClientIDs.push( “txt” );} );
       </script>   
   </body>
   </html>

During the load event, we add a reference to the textbox on the _asyncPostBackControlClientIDs array. We also configure the textbox so that when its content changes, we initiate a postback. This is all that is required for getting a partial postback from an HTML control placed outside an UpdatePanel.

In this case, the example also shows how to refresh a panel when the postback is caused by our HTML textbox control: we check the Params collection and see if the __EVENTTARGET is txt (which is the id of the texbox). And that”s it. simple, right?

3 comments so far

  1. ujlqazfxln
    9:41 am - 11-26-2007

    Hello! Good Site! Thanks you! tkodfwiwrih

  2. Kevin
    6:50 am - 12-25-2007

    But, ”panel” can”t be found in javascript while runing in IE. Why?

  3. Adrian
    1:58 pm - 6-9-2008

    Kevin, panel is the id of a control. The author has used IE only syntax, but also if you”re using master pages, or the “panel” is nested, the id will change dynamically.

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>