Okay, so this is hardly a ground-breaking topic.  But I think it's a valid showcase as to how rich, UI experiences can be delivered via the browser without costing the earth.

Picture the scene - I have a web page with a jquery Grid (FlexiGrid - though I think I will be upgrading to jqGrid due to it's continued developer support - but more on this later) and a toolbar (a very cool Vista style toolbar).

One of the commands available on this toolbar is Print. 

When the user clicks this command, a jquery UI dialog pops up, displaying a selection of valid reports which the user may select.

This reports list is generated from the server.

So, if all of this was to be done as the page loads - well, you can imagine the performance would be unacceptable.  But I want to keep the user experience rich - I don't want them navigating from the grid to another page when they click Print.  So I need to do this using AJAX.

The process is as follows:

 

The Print Button Handler calls the PrintWebService via an AJAX call using some jquery magic as so:

 $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: "{}",
                dataType: "json",
                url: "http://localhost/PrintService/PrintService.asmx/RenderPrintDialog",

                success: function(data) {
                    $("#printdialoginner").html(data.d);
                    $("#printdialog").dialog("open");
                },

                error: function(xhr, status, errorThrown) {
                    alert(status);
                    alert(errorThrown);
                }
            });

Inside the service, we can get our reports from the server (from the database) at our leisure.  Ish.

Now comes the clever part.  To return the UI, all we're doing is churning back some HTML, right?  But what if we want to be able to visually SEE what we are going to return, at design-time? 

Thanks to Scott Gu, we can get full VS designer support when creating our dynamic UI - check it out - http://weblogs.asp.net/scottgu/archive/2006/10/22/Tip_2F00_Trick_3A00_-Cool-UI-Templating-Technique-to-use-with-ASP.NET-AJAX-for-non_2D00_UpdatePanel-scenarios.aspx

So we create our .ascx controls as normal, pass the path to the ViewManager, and let it get it's hands dirty.  It also keeps a nice, clean MVC separation.

Using this trick, I've been able to deliver a seamless, rich UI without having noticeable effects for the user.  Okay, so there is a slight delay when they bring up the Print dialog for the first time (I know, I've not mentioned caching here but do I need to?) but it's barely noticeable.