June 29, 2007

ASP.NET AJAX: Canceling an async postback

Lately I have been working quite a bit with the UpdatePanelAnimationExtender control.  I have been using this control along with the animation framework to spice up my ASP.NET GridViews, DetailViews and Wizards by running a simple animation script before and after the control has been updated via an async postback (typically the animation disabled a button, faded out the control, and/or popped up a progress indicator) .  This has worked great for the past few months, but recently a new requirement came in from the field requesting for a way to cancel an async operation.  Being aware of the abortPostBack method the PageRequestManager, I figured (more like hoped) it would be pretty simple to implement this feature.  I added a 'Cancel' button to my progress indicator and wired the onclick handler to invoke the abortPostBack method.   Live Demo | View Source  Clicking cancel did abort the async postback however, because the OnUpdated animation only runs when the UpdatePanel is updated my indicator was never being hidden and it was appearing as if...

June 27, 2007

ASP.NET AJAX: Use PageMethods Proxy to Read and Write Session Data

Ever had the need to read or write a piece of session data from the browser?  Here is an example of an easy way this can be accomplished using ASP.NET AJAX.  The approach is pretty simple.  First, add a couple of static methods to the page for setting and retrieving the session value (SetSession and GetSession) as well as the ASP.NET AJAX ScriptManager control.  Then write the javascript code that calls the PageMethods proxy to invoke these methods on the server (in my simple example, I wired the onclick handlers of 2 buttons). There only 2 details that are really worth mentioning.  The first is that the static methods need to be marked with the System.Web.Services.WebMethod attribute.  The second is that the EnablePageMethods attribute of the ScriptManager needs to be set to true so the ScriptManager will autogenerate the PageMethods proxy for us.  Thats it for the implementation details, but I should probably add a quick disclaimer that the sample below is just for demonstration - showing that...

Topics: ASP.NET , ASP.NET AJAX

June 24, 2007

ASP.NET AJAX: Rendering a Gmail-like 'Loading' Indicator over a Specific ASP.NET Control

I came across a blog post discussing a slick way to use the ASP.NET AJAX UpdateProgress control to add a gmail-like progress indicator to an ASP.NET web page.       I liked the approach the author used and it clearly works great for scenarios where you want to display a single 'something is happening' message to the user while the page is being updated.  However, after the operation completes and the indicator disappears, it is still up to the user to figure out where on the screen (i.e. what control was updated?) to look for the new changes.  If your screens are relatively simple, or if you feel the update should be obvious this is probably not an issue for you.  Unfortunately things aren't so for the web application I am currently working on.  A few of the screens contain a number of different sections and users would like to see the indicator rendered over the control (most commonly a GridView...

June 20, 2007

EventHandlerList - Declaring .Net Events that Conserve Memory

Ever heard of the EventHandlerList object that lives in the System.ComponentModel namespace of the .Net framework?  I hadn't until I disassembled the System.Windows.Forms.Control class while debugging the other day.  I did a few google searches and ended up on an MSDN page titled 'How to: Declare Events That Conserve Memory Use'.  I found the content rather interesting.  Typically, a class declares an event as follows:public class Book { public event EventHandler PagedChanged; public void TurnThePage() { if (this.PagedChanged != null) { this.PagedChanged(this, EventArgs.Empty); } } } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color:...

June 18, 2007

ASP.NET AJAX: Invoke a static method from script

Did you know that with ASP.NET AJAX you can easily invoke static methods declared on your ASP.NET page from script on the client?  To enable this you will need to do the following: Define the method you want invoked and make it static Add the System.Web.Services.WebServiceAttribute to the method Include the ASP.NET AJAX ScriptManager component to the web page and set the EnablePageMethods property to true Once this is done, you can asynchronously invoke the static method by using the PageMethods proxy the ScriptManager adds to the page.  The following markup and code demonstrate this by using the classic AJAX example that retrieves the current time on the server.  Because the method is invoked asynchronously, you need to supply the callback javascript function that handles dealing with the return value. View Demo The example page below demonstrates this.  GetServerTime is the static method on the page that is decorated with the WebMethod attribute.  It returns the...

Topics: ASP.NET , ASP.NET AJAX

June 03, 2007

Quick Ajax Tip: Provide a better asp:Wizard user experience

In a recent post I outlined an technique that I have been using to center an animated gif over an asp:GridView while it is being refreshed via the asp:UpdatePanel.  I like this approach because it provides the user with 2 visual cues (the control fades in/out and the animated gif displays a progress bar) letting the user know the panel is in the process of being refreshed.  In this sample, I use a similar approach and apply it to the asp:Wizard control. Download code | View live demo Here is the outline of the technique: Wrap the asp:Wizard within an asp:UpdatePanel (requires the Ajax.Net) Add an HTML div tag to the page containing the animated gif that will be rendered over the asp:Wizard while the panel is refreshing Set the display style to 'none' so the image is initially hidden<div id="updateProgressDiv" style="display: none; height: 40px; width: 40px"> <img src="simple.gif" /> </div> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier,...


Sponsor

Recent Comments

  • Neil wrote: Fantastic demo. Cool!...
  • chandra wrote: Matt, Excellent Blog and am grateful to you for sharing your work. I'd like to suggest a small chan...
  • Ismael SolĂ­s wrote: thank you very much all the ideas that I've found here have been helpful. ...
  • Frank wrote: Hi I was wondering if you know why this is happening: I have a details page that contains a DetailsV...
  • benjib98 wrote: Hi Matt. I have found your resourceful blog and decided to extend your modal popup animator. Unfortu...
  • Gordon wrote: Thanks, that is absolute brilliant work....
  • jeremiah wrote: Matt, I've been pouring over your blog most of the day and was surprised to see you went to NDSU. Sh...
  • Justin Moses wrote: I get the same error as Sumith. It only happens when I use a drop down list to postback and update t...

Sponsor