Ajax Calls on ASP.NET UserControls

You cannot make Ajax calls on ASP.NET user controls can you? So what’s the solution? give up? absolutely not.

While believing arrogantly that I am a genius or that C# is the most beautiful piece of software ever created (and will be), ideas had been floating in my head non-stop, and most of the problems I faced just got solved, of course with nasty non advised tricks :-), keep reading.

I needed to call a web method on a usercontrol, and all I wanted was the result of the processing returned by this method, so I tried the ASP.NET AJAX PageMethods but the result was PageMethods is not defined!

Cool, if we need the result of the web method in our JavaScript, we can profit of the ASP.NET server controls and the UpdatePanel for Ajax calls, here are the steps:

1. Inserting an UpdatePanel on you usercontrol, and within it, inserting a Label and a button or a timer (or whatever way you want to callback you usercontrol)

  1. <asp:UpdatePanel ID="UpdatePanel1" runat="server">
  2.     <ContentTemplate>
  3.         <asp:Timer ID="Timer1" runat="server" Interval="4000" ontick="Timer1_Tick">
  4.         </asp:Timer>
  5.         <br />
  6.         <asp:Label ID="Label1" runat="server" Text="Label" CssClass="ResultPlaceHolder"></asp:Label>
  7.     </ContentTemplate>
  8. </asp:UpdatePanel>

The label above will be a placeholder of our Ajax call result, it has a class name ResultPlaceHolder so that it will be found easier using jQuery, as you should know, ids and names on server controls get messed up in client side with ASP.NET.

2. Setting up the result from within the Timer tick method (or the click method of your button)

  1. protected void Timer1_Tick(object sender, EventArgs e)
  2. {
  3.     Label1.Text += "a: ";
  4.     return;
  5. }

3. Exploiting these fresh results in your JavaScript, the best way would be by setting an interval for a function that checks the results in the placeholder every given moments.

  1. <script src="http://my-super-slow-uncool-laptop/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
  2.  
  3. <script>
  4.     $(document).ready(function () {
  5.         $("#button1").click(function () {
  6.                 alert($(".ResultPlaceHolder").text());
  7.         });
  8.     });
  9.  
  10.    var i = 1;
  11.    function updateResult() {
  12.         // DO WHAT EVER YOU WISH WITH THE RESULTS
  13.        i++;
  14.        if (i < 10)
  15.            $("#show").html($("#show").html() + "<br/>" + $(".ResultPlaceHolder").text());
  16.        else {
  17.            $("#show").html($(".ResultPlaceHolder").text());
  18.            i = 1;
  19.        }
  20.    }
  21.  
  22.    setInterval(updateResult, 1000);
  23. </script>
  24. <p>
  25.     <input type="button" value="Ajax it" id="button1"/>
  26.     <div id="show"/>
  27. </p>

And voila, this is a nasty nonadviced method to do Ajax calls to webcontrols’ methods, a la “vite fait”. Enjoy.

Bookmark the permalink. RSS feed for this post.

comments powered by Disqus

Swedish Greys - a WordPress theme from Nordic Themepark. Converted by LiteThemes.com.