David Barkol's blog

Asynchronous error handling change in ASP.NET AJAX 3.5

2008-09-25T23:19:17Z

There is a subtle change in the .NET 3.5 release of the Microsoft Ajax Library that might catch some developers by surprise when handling asynchronous postback errors. The change can be found at the end of the endPostBack function of the PageRequestManager object. In the first release of the Ajax library, if an error was not handled on the client; an alert box was used to convey to the user the error message:

ASP.NET AJAX 1.0 (MicrosoftAjaxWebForms.debug.js):

   1: function Sys$WebForms$PageRequestManager$_endPostBack(error, response) {

   2:     this._processingRequest = false;

3:

   4:     this._request = null;

   5:     this._additionalInput = null;

6:

   7:     var handler = this._get_eventHandlerList().getHandler("endRequest");

   8:     var errorHandled = false;

   9:     if (handler) {

  10:         var eventArgs = new Sys.WebForms.EndRequestEventArgs(error, this._dataItems, response);

  11:         handler(this, eventArgs);

  12:         errorHandled = eventArgs.get_errorHandled();

  13:     }

  14:     this._dataItems = null;

  15:     if (error && !errorHandled) {

  16:         alert(error.message);

  17:     }

  18: }

The problem with this approach is that it was too intrusive to assume that the alert box would be the ideal behavior. Instead, it makes more sense for the error to be thrown to the client so that you can have more control of the outcome. Therefore, the change in ASP.NET 3.5 is to simply throw the error if it hasn't been handled.

ASP.NET AJAX in .NET 3.5 (MicrosoftAjaxWebForms.debug.js):

   1: function Sys$WebForms$PageRequestManager$_endPostBack(error, response) {

   2:     if (this._request === response.get_webRequest()) {

   3:         this._processingRequest = false;

   4:         this._additionalInput = null;

   5:         this._request = null;

   6:     }

   7:     var handler = this._get_eventHandlerList().getHandler("endRequest");

   8:     var errorHandled = false;

   9:     if (handler) {

  10:         var eventArgs = new Sys.WebForms.EndRequestEventArgs(error, this._dataItems, response);

  11:         handler(this, eventArgs);

  12:         errorHandled = eventArgs.get_errorHandled();

  13:     }

  14:     if (!this._processingRequest) {

  15:         this._dataItems = null;

  16:     }

  17:     if (error && !errorHandled) {

  18:         throw error;

  19:     }

  20: }

So what does this mean to code you've written for ASP.NET 2.0 that has been migrated to ASP.NET 3.5? Well, if you haven't handled the endRequest client-side event after an async postback then the user is now going to experience a runtime error, whereas they would have simply experienced an alert box with the error message before:

Here is a simple example of how to reproduce this behavior in ASP.NET 3.5:

HTML:

   1: <asp:ScriptManager ID="ScriptManager1" runat="server" />

   2: <div>

   3:     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

   4:         <ContentTemplate>

   5:             <asp:Button ID="ThrowError" runat="server" OnClick="ThrowError_OnClick" Text="Throw Error" />

   6:         </ContentTemplate>

   7:     </asp:UpdatePanel>

   8: </div>

Code behind:

   1: protected void Page_Load(object sender, EventArgs e)

   2: {

   3:     ScriptManager sm = ScriptManager.GetCurrent(this.Page);

   4:     sm.AsyncPostBackError += new EventHandler<AsyncPostBackErrorEventArgs>(ScriptManager1_OnAsyncPostBackError);

   5:     sm.AllowCustomErrorsRedirect = false;

   6: }

7:

8:

   9: protected void ScriptManager1_OnAsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)

  10: {

  11:     ScriptManager.GetCurrent(this.Page).AsyncPostBackErrorMessage = "Please try that again.";

  12: }

13:

  14: protected void ThrowError_OnClick(object sender, EventArgs e)

  15: {

  16:     throw new InvalidOperationException("Throw error!");

  17: }

Lastly, here is an example of how to handle the endRequest event thrown by the PageRequestManager to avoid the runtime error:

   1: <script type="text/javascript">

2:

   3:     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);

4:

   5:     function onEndRequest(sender, args) {

   6:         var error = args.get_error();

   7:         if (error != null) {

8:

   9:             // Set the error handled flag to avoid a runtime error

  10:             // reaching the user.

  11:             args.set_errorHandled(true);

12:

  13:             // Remove the error name from the message

  14:             var msg = error.message.replace("Sys.WebForms.PageRequestManagerServerErrorException: ", "");

  15:             alert(msg);

  16:         }

  17:     }

18:

  19: </script>

In the example, the message name is removed so that the user will only view the intended postback error message set from the code-behind. But more importantly, is the ability to take control of how the error is handled with the handler for the endRequest event.

For a more in-depth example of client-side events during an async postback, check out this post: Client-side event viewer.

ASP.NET 3.5 Extensions History Control Tip

2007-12-29T02:06:09Z

Originally introduced in the ASP.NET Futures package, the history control in the ASP.NET 3.5 Extensions preview comes with a few nice additions. One of the updates is the ability to change the page title when adding a history point. This is important because without updating the title, the history list isn't very much help after a few updates. To illustrate the problem, here is what the history list in IE could look like after adding a few history points:

Because all the entries are the same, the user is unable to distinguish between them, leaving the list to be pretty unhelpful.

Adding history from the server

To take advantage of this from the server, you simply include the page title for the new history entry in the AddHistoryPoint method. This will update the page title when you add a history point but it will NOT update it for you when the user clicks the browser Back or Forward buttons. To accommodate for this, you have to set the page title as well in the Navigate event. Here is both the HTML and code-behind for this example:

<asp:ScriptManager ID="TheScriptManager" runat="server" EnableHistory="true"
    EnableStateHash="false" OnNavigate="TheScriptManager_Navigated" />

<div>        

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" Text="Button1" OnCommand="Button_OnCommand" CommandArgument="1" />&nbsp;
            <asp:Button ID="Button2" runat="server" Text="Button2" OnCommand="Button_OnCommand" CommandArgument="2" />&nbsp;
            <asp:Button ID="Button3" runat="server" Text="Button3" OnCommand="Button_OnCommand" CommandArgument="3" />
            <hr />
            <asp:Label ID="Label1" runat="server" />            
        </ContentTemplate>        
    </asp:UpdatePanel>    

</div>

protected void Button_OnCommand(object sender, CommandEventArgs e)
{
    string buttonState = e.CommandArgument.ToString();
    Label1.Text = buttonState;
    string title = "Browser History " + buttonState;
    TheScriptManager.AddHistoryPoint("buttonState", buttonState, title);       
}

protected void TheScriptManager_Navigated(object sender, HistoryEventArgs e)
{
    string buttonState = e.State["buttonState"];
    Label1.Text = buttonState;
    Title = "Browser History " + buttonState;
}

Now, the history list can be used more effectively and will look something like this:

Adding history from the client

The same steps apply to managing history on the client:

Pass in the page title when adding a history point to update the list and title accordingly.
Update the page title in the handler for the navigate event.

Here is the code for the client example:

<asp:ScriptManager ID="TheScriptManager" runat="server" EnableHistory="true"
    EnableStateHash="false" />

<div>    
    <input type="button" value="button1" onclick="button_click(1);" />&nbsp;
    <input type="button" value="button2" onclick="button_click(2);" />&nbsp;
    <input type="button" value="button3" onclick="button_click(3);" />
    <hr />
    <span id="results" />    
</div>

<script type="text/javascript">

    Sys.Application.add_navigate(onNavigate);
    
    function onNavigate(sender, args){                                                            
        var buttonNumber = args.get_state().pageState || "";            
        $get("results").innerHTML = buttonNumber;
        document.title = "Browser History " +  buttonNumber;          
    }

    function button_click(buttonNumber){                    
        $get("results").innerHTML = buttonNumber; 
        var historyPoint = { pageState : buttonNumber };
        var title = "Browser History " + buttonNumber;           
        Sys.Application.addHistoryPoint(historyPoint, title);            
    }

</script>

Hope someone finds this interesting. :)

SSL Support for Virtual Earth is here

2007-11-23T20:34:00Z

If you've ever placed a Virtual Earth map or Google map on an HTTPS page then you're probably familiar with the mixed content message that appears when the page loads:

While there are workarounds for this in the browser settings, the solution isn't really scalable. The good news it that Virtual Earth 6 now offers support for SSL pages. All that we have to do is update the script reference like so:

<script type="text/javascript"

  src="https://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6&s=1">

</script>

Notice how the source path now begins with https and the version is set to 6. Also, there is the additional parameter at the end, s=1; that flags the request accordingly.

If you're using ASP.NET AJAX and have a ScriptManager on the page, then your reference can look something like this:

<asp:ScriptManager ID="ScriptManager1" runat="server">

  <Scripts>

    <asp:ScriptReference Path="https://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6&s=1" />

  </Scripts>

</asp:ScriptManager>

This seems like a subtle change, but both Google and Virtual Earth have lacked this type of support for years. For anyone building enterprise applications that require HTTPS, this is something we've been asking and waiting for, for quite some time.

ASPInsiders

2007-11-20T02:50:00Z

Recently, along with a few others, I've received the honor of joining the ASPInsiders. It has been a true privilege being a part of such a talented and great group and I look forward to sharing and learning from them as much as possible.

Great WCF Tips from David Pallmann

2007-09-26T04:36:00Z

The best part about working at Neudesic is the interaction you get with some of the most talented people in the industry. Recently, David Pallmann, one of our Architect Consultants, posted an invaluable series of blogs posts on WCF tips. Here are the links to his most recent posts:

WCF Tips #1 - Service Interface Design

WCF Tips #2 - Service Class Design

WCF Tips #3 - Service Hosting

WCF Tips #4 - Configuration

WCF Tips #5 - Infrastructure

WCF Tips #6 - Instrumentation

WCF Tips #7 - Clients

To gain some real-world insight into WCF, check out these tips and subscribe to David's blog!

ASP.NET AJAX in Action - Finally!

2007-08-15T04:00:27Z

After a long but rewarding journey I'm happy to announce that our book, ASP.NET AJAX In Action, is finally out! Currently, the book is available in eBook format from the Manning web site. On August 24th (next week), the printed book will be available as well. Source code for the book can be freely downloaded from here.

Here are the contents (copied from the Manning home page):

forewords
preface
acknowledgments
about this book
about the authors
about the title
about the cover illustration

Part 1 ASP.NET AJAX basics

1 Introducing ASP.NET AJAX: 1.1 What is Ajax?; 1.2 ASP.NET AJAX architecture; 1.3 ASP.NET AJAX in action; 1.4 Summary
2 First steps with the Microsoft Ajax Library: 2.1 A quick overview of the library; 2.2 The Application model; 2.3 Working with the DOM; 2.4 Making development with JavaScript easier; 2.5 Summary
3 JavaScript for Ajax developers: 3.1 Working with objects; 3.2 Working with JSON; 3.3 Classes in JavaScript; 3.4 Understanding inheritance; 3.5 Understanding interfaces and enumerations; 3.6 Using type reflection; 3.7 Working with events; 3.8 Summary
4 Exploring the Ajax server extensions: 4.1 Ajax for ASP.NET developers; 4.2 Enhancing an existing ASP.NET site; 4.3 ScriptManager: the brains of an Ajax page; 4.4 Partial-page updates; 4.5 Summary
5 Making asynchronous network calls: 5.1 Working with ASP.NET Web Services; 5.2 The asynchronous communication layer; 5.3 Consuming external Web Services; 5.4 Using ASP.NET application services; 5.5 Summary
6 Partial-page rendering with UpdatePanels: 6.1 With great power comes great responsibility; 6.2 Getting to know the UpdatePanel; 6.3 Triggers; 6.4 Advanced techniques; 6.5 Live GridView filter; 6.6 Summary

Part 2 Advanced techniques

7 Under the hood of the UpdatePanel: 7.1 The PageRequestManager: the unsung hero; 7.2 A client-side event viewer; 7.3 UpdatePanel cookbook; 7.4 Caveats and limitations; 7.5 Summary
8 ASP.NET AJAX client components: 8.1 The client component model; 8.2 Working with client components; 8.3 Behaviors; 8.4 Controls; 8.5 Summary
9 Building Ajax-enabled controls: 9.1 Script descriptors; 9.2 Introduction to Ajax-enabled controls; 9.3 Extenders; 9.4 Script controls; 9.5 Summary
10 Developing with the Ajax Control Toolkit: 10.1 A world of extenders; 10.2 The Ajax Control Toolkit API; 10.3 Animations; 10.4 Summary

Part 3 ASP.NET AJAX Futures

11 XML Script: 11.1 XML Script basics; 11.2 Actions; 11.3 Bindings; 11.4 Summary
12 Dragging and dropping: 12.1 The drag-and-drop engine; 12.2 A drag-and-drop shopping cart; 12.3 Summary

Part 4 Mastering ASP.NET AJAX

13 Implementing common Ajax patterns: 13.1 Script versioning; 13.2 Helpers, help me help you!; 13.3 Logical navigation and unique URLs; 13.4 Declarative data binding; 13.5 Declarative widgets; 13.6 Summary
Installing ASP.NET AJAX
Tools for debugging Ajax applications
resources
index

We were also very fortunate to get forewords from both Scott Guthrie and Bertrand Le Roy - a true honor. We hope you enjoy the book as much as we enjoyed sharing what we learned from the community, Microsoft and each other.

ASP.NET AJAX Role Application Service – Visual Studio 2008 (Orcas)

2007-07-30T04:30:00Z

The first version ASP.NET AJAX gave us client-side support for two application services – profile and authentication. In Visual Studio 2008 (Orcas), an additional built-in service has been added: roles. If you’ve downloaded Eilon’s ASP.NET AJAX JavaScript Class Browser and installed the beta 2 (or beta 1) version of .NET 3.5, then you’ll find the new service under the Sys.Services namespace:

Adding support for the role service

If you’re upgrading an ASP.NET 2.0 web site to .NET 3.5 and want to leverage this new built-in service, you’ll have to make a few minor adjustments to web.config (new web sites in .NET 3.5 will already have these configurations). The first change requires adding the role service to the sectionGroup of the configuration settings:

<sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
  <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="Everywhere" />
  <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" />
  <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" />
  <section name="roleService" type="System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication" />
</sectionGroup>

Next, you need to enable the service from the list of web services under system.web.extensions:

<system.web.extensions>
  <scripting>
    <webServices>        
      <authenticationService enabled="true" requireSSL = "false"/>         
      <profileService enabled="true" />
      <roleService enabled="true"/>
    </webServices>        
    <scriptResourceHandler enableCompression="true" enableCaching="true" />
  </scripting>
</system.web.extensions>

Interfacing with the service is done through a variable called Sys.Services.RoleService. The actual implementation is an object called Sys.Services._RoleService. The application services in ASP.NET AJAX use this pattern to provide a singleton-like access point. Here is an example of a call to the load and isUserInRole methods of the role service:

function pageLoad(){                          
    loadRoles();                         
}

function loadRoles(){               
    Sys.Services.RoleService.load(onLoadRolesCompleted, onLoadRolesFailed, null);        
}

function onLoadRolesCompleted(result, userContext, methodName){                                        
    if (Sys.Services.RoleService.isUserInRole("Administrator")){
        $get("adminView").style.display = "block";            
    }
}

function onLoadRolesFailed(error, userContext, methodName){
    alert(error.get_message());
}

As an alternative to calling the isUserInRole method, you can also retrieve a comma delimited list of roles for the user from the roles property:

Sys.Services.RoleService.get_roles();

Click here (requires SQL Express) for a working sample that demonstrates the use of all three services.

Web Inspector for Safari on Windows

2007-06-22T11:32:00Z

If you've downloaded Safari for Windows and are a looking for a tool similar to Firebug or Nikhil's Web Development Helper, then you might be interested in the WebKit Open Source Project. Within the project is a tool call Web Inspector that performs much of the same tasks as the tools mentioned earlier. To run the tool:

1) Download the nightly build from http://nightly.webkit.org/.

2) Extract the contents from the zip file.

3) If you are running Vista then you will have to add the following to the end of the Preferences.plist file (under C:\Users\<UserName>\AppData\Roaming\Apple Computer\Safari\), just before </dict></plist>:

<key>WebKitUserStyleSheetLocationPreferenceKey</key> <true/>

4) Execute the run-nightly-webkit.cmd file. This will launch Safari from the command prompt.

After Safari is launched you will have an additional item in the context menu called 'Inspect Element', select this to see the tool:

Here are a few screenshots of it in action:

We're on .NET Rocks!

2007-05-08T20:30:00Z

A while back, Garbin, Rama and myself did an interview with the .NET Rocks guys. We were given an opportunity to talk about ASP.NET AJAX and our upcoming book. Today, the recording has been released on the site which you can find here. Both Carl and Richard were fun and easy to talk to. Enjoy.

MIX07 Session: Extending the Browser Programming Model with Silverlight

2007-05-02T21:46:00Z

There have been a lot of great sessions here at MIX07. To compliment those sessions, there has been some great blog coverage as well. A great post is this one from from Scott Hanselman, that puts things into context quite nicely.

Today I attended a session called "Extending the Browser Programming Model with Silverlight" that really stood out. This session wasn't about streaming media or design, instead it addressed the core of Silverlight - working with Web Services, Application Services (Roles coming soon), Isolated Storage (which is going to be huge), the .NET CLR and of course JavaScript. There are still things that are being ironed out, but the future looks promising and Stefan Schackow did an excellent job of explaining not only how things worked but what to look for in future releases.

Look for this session to become available for download and streaming soon. Also, Stefan was kind enough to upload both the slides and source to his mix sandbox (I wish every session did this) before the session even began.

Here are the links:

MIX07 Sessions - http://sessions.visitmix.com/
Slides and source - http://mixer1068.mixsandbox.com/

ASP.NET AJAX: Client-side event viewer

2007-03-26T06:57:00Z

Introduction

Often times when an ASP.NET developer is first learning about the page lifecycle, he puts together a simple application that displays the raised events on the page. This widespread technique helps him understand the order in which the events occur, the arguments that are passed along, and ultimately what can and cannot be accomplished during each event.

In ASP.NET AJAX, a page lifecyle, similar to the one that occurs on the server; takes place on the client as well. By leveraging the client-side events raised by the Application class and the PageRequestManager, we can take more control of the application during partial-page updates. The figure below illustrates the events that occur within the browser when a successful partial postback is applied.

Client-Side Event Viewer

To gain a deeper understanding of the client-side event model in ASP.NET AJAX, I've put together an application that exposes the client-side steps that occur during partial postbacks. In addition, the example demonstrates:

Canceling a postback request
Aborting a postback request
Client-side error handling
Visual feedback for long postbacks (similar to the UpdateProgress control)

Here is a snapshot of a portion of the application after a typical postback:

Click here to download the source code and let me know what you think.

MSDN Webcast Recap: An Introduction to ASP.NET 2.0 Web Parts

2007-03-17T22:02:00Z

First, thank you to everyone who attended the webcast last week on ASP.NET 2.0 Web Parts. During the webcast there were some great questions and I had a fun time doing it. Below are the related links:

Also, the example with the UpdatePanel was a little dry. As a result, the demo now includes a Yahoo News Web Part that uses an UpdatePanel to refresh the UI dynamically. Below is a snapshot:

Lastly, included within the demo; is an example of the TextBoxWatermark control from the Ajax Control Toolkit and a simple client-centric example.

References and related articles:

Upcoming MSDN Webcast: An Introduction to ASP.NET 2.0 Web Parts

2007-03-07T06:03:00Z

This Friday, March 9th at 1pm Pacific time, I'll be presenting an MSDN webcast on Web Parts in ASP.NET 2.0. In addition to a general introduction on what Web Parts are and how developers can effectively use them to build portals, I'm hoping to throw in a little ASP.NET AJAX stuff towards the end.

To register, go here. See ya then.

Ajax book: ASP.NET AJAX In Action

2007-02-09T23:26:00Z

Over the past few months I've had the pleasure of working closely with Alessandro 'Garbin' Gallo and Rama Krishna Vavilala on an Ajax book called ASP.NET AJAX In Action. Today, portions of the book become available through Mannings early access program, also known as MEAP. Through MEAP, you can receive early and updated versions of chapters as they become written, polished and eventually released. It also means that you can provide us with your input and feedback, which can influence changes we make to the chapters. We're very excited to share all our hard work and look forward to your feedback.

Get early chapters from Manning

ASP.NET AJAX - Ajax Server Extensions sample

2007-01-23T22:51:00Z

In ASP.NET AJAX, the Ajax Server Extensions consists of a powerful set of server controls that simulate Ajax behavior on the client. In other words, these controls do not perform Ajax in its traditional sense (JavaScript calls to a server and dynamic updates with dhtml) but rather in a different way that gives the same illusion to the end user.

To demonstrate the power of these controls, I've taken an existing ASP.NET application that suffered from normal, pre-ajax symptoms like page refreshes, static content and loss of interactivity and added the controls to make it a more engaging experience. The goals for the task were as follows:

Improve network latency - cut back on the amount of data being passed back and forth between the server and browser
Eliminate unnecessary page refreshes - keep the user connected to the application and the interaction as fluid as possible
Keep UI and application logic on the server - This spares us from exposing ui logic to savvy web users (like yourselves) and also gives us the luxury of supporting the rare cases when a browser has JavaScript disabled
Seamless and transparent integration - Keep intact the existing logic on the server and make integration as unintrusive as possible
Stick to familiar paradigm - leverage the server controls as much as possible to provide the typical ASP.NET developer a familiar paradigm to work with

Along the way I also tried to exercise some common, recommended patterns for ASP.NET AJAX:

Set UpdateMode for UpdatePanels to Conditional
Placed ScriptManager in master page, leveraged ScriptManagerProxy for content pages
Avoided gratuitous animations - kept animations subtle, relevant and simple
Set Timer control interval to a high value - the timer actually runs on the client, we should be mindful of their resources

The application manages to use all of the controls in the AJAX Extensions (not the Futures CTP). For a little extra, it includes the AutoCompleteExtender for the search box. By the way, this control is now in the Ajax Control Toolkit - where it belongs.

The code for the application, written for the 1.0 release; can be downloaded here (requires SQL Express).

Below is a snapshot of the application in action: