smarx.com - developing for the new web

My own MIX'07 video player: using all the new stuff

Steve Marx — Wed, 01 Aug 2007 16:25:21 GMT

I built my own MIX'07 video player last night and recorded a 15 minute screencast to give you an idea of what's possible with all the new releases that came out last week. Here it is:

and here's the code.

Highlights:

Searching and paging via ListView, DataPager, and LinqDataSource (all new ASP.NET controls with .NET 3.5).
Video player via the Media control in the ASP.NET Futures July CTP (uses Silverlight 1.0 RC).
Popup biographies and "more/less" collapsible details via the new .NET 3.5-compatible drop of the AJAX Control Toolkit.
Back/forward buttons support via the History control in the ASP.NET Futures July CTP.

Interesting stat: There are more lines of CSS than lines of code in this project. :-)

Requirements:

All you need to run the sample is Visual Studio 2008 Beta 2 (I used Visual Web Developer Express).

I also used the ASP.NET Futures CTP and the AJAX Control Toolkit, but the necessary binaries for both are included with the code, so you don't need to download those yourself if you just want to run the sample. You'll also need Silverlight 1.0 RC, but if you don't have it installed, you'll be prompted when you load the app.

Go ahead and grab the database from my sample and build your own MIX'07 video player! I'd love to see what you come up with.

Nikhil's latest photo album up on mixsandbox

Steve Marx — Mon, 30 Apr 2007 23:51:02 GMT

I give Nikhil a hard time because almost all his demos are some sort of photo album. (It's true.) In spite of that, his demos are always fresh and instructive. His latest is no different. Right now he's demoing it at MIX'07, but you can play with it live at http://mixer1009.mixsandbox.com/app.

I'm sure he'll blog about the sample soon, but it's interesting just to play with the app. By the way, he'll be showing the live mixsandbox version of the app during his talk, so don't leave any inappropriate comments (yet). :-)

Building a video site with ASP.NET and Silverlight

Steve Marx — Mon, 30 Apr 2007 22:10:00 GMT

Today at MIX'07, Brad Abrams and others are going to show how to build a video site using ASP.NET Futures, Silverlight, IIS, etc. They'll be showing a number of really impressive demos.

I've been spending the past few weeks writing most of the code for the main application they'll be demoing. (It's one of the reasons I haven't blogged in so long.)

You can now see the fruits of our labor live on the web, thanks to the MIX Sandbox in the Sky. The sandbox is a really cool idea that lets all attendees of MIX get their own website to play with and share the things they make.

If you want to see the features of the site, here are some quick steps that will show the highlights of what we built:

Launch http://mixer1004.mixsandbox.com in IE7, Firefox, or Safari.
Click the "Next" button below the search results to view the next page. Notice that the URL changes... this is the new <asp:History /> control in action.
Type a search term (try "more", for example), and press "GO".
Now press the back button in the browser, and note that without reloading the whole page, you've returned to page 2 of the original results. Press back again and get to page 1.
Now click on one of the thumbnails to queue up a video in the player. While it's playing, go ahead and queue up another couple videos.
Click the down arrow under the video to drop down the "now playing" list. You should see the videos you queued. If you want, you can drag/drop to reorder them.
Finally, click on the title "fabrikam" in the search results.
This should take you to a Watch page, where you can see the video play. After about 20 seconds, you should see an advertisement show around the video and then disappear again. This is a custom behavior I wrote, backed by a web service, and using XAML animations to do the display.
Finally, go back to the browse page and search for "msslice". Play that video... that one's streaming from Silverlight Streaming by Windows Live!

Brad's sitting next to me, and he said: "Be sure you say in there something like: There are a bunch more hidden gems, so be sure to come to the talk!" With that in mind, there are a bunch more hidden gems, so be sure to come to his talk. :-)

There really is a lot more to talk about. In future blog posts, I'll go into some more features of this demo, and I'll share all of the code with you. Also see Brad's post about this sample.

Microsoft in the OpenAjax Alliance

Steve Marx — Wed, 21 Mar 2007 19:45:49 GMT

Read Brad's post about it.

We've been paying a lot of attention to standardization and interoperability with our AJAX framework since the beginning, but I like that we're getting even more involved via the OpenAjax Alliance.

How to handle a timeout in an async postback

Steve Marx — Thu, 08 Mar 2007 13:38:09 GMT

Web service calls have an easy way to define a timeout handler. (After the actual web service method's parameters, it's the second parameter to the call.)

For async postbacks (UpdatePanels), it's not quite as simple. You need to handle the EndRequest event on the PageRequestManager. The first parameter to your event handler is a reference to the PageRequestManager itself, but the second parameter is an instance of the EndRequestEventArgs class. When an error occurs, you can use get_error() to take a look at what happened. Here's some code that uses an EndRequest event handler to check for a timeout error and handle it:

<%@ Page Language="C#" AutoEventWireup="true" %> 
 
<script runat="server"> 
    protected void slow_postback(object sender, EventArgs e) 
    { 
        // ten seconds is overkill... we timeout after one second (see ScriptManager below) 
        System.Threading.Thread.Sleep(10000); 
    } 
</script> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Handling an async postback timeout</title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
        <!-- This sets the timeout on async postbacks (i.e. UpdatePanel refreshes) to one second --> 
        <asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="1" /> 
        <asp:UpdatePanel runat="server"> 
            <ContentTemplate> 
                <asp:Button ID="Button1" runat="server" Text="Fast postback - no timeout" /> <br /> 
                <asp:Button ID="Button2" runat="server" Text="Slow postback - times out after one second" OnClick="slow_postback" /> <br /> 
                Last updated: <%= DateTime.Now %> 
            </ContentTemplate> 
        </asp:UpdatePanel> 
    </form> 
</body> 
 
<script type="text/javascript"> 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) { 
        if (args.get_error() && args.get_error().name === 'Sys.WebForms.PageRequestManagerTimeoutException') { 
            alert('Caught a timeout!'); 
            // remember to set errorHandled = true to keep from getting a popup from the AJAX library itself 
            args.set_errorHandled(true); 
        } 
    }); 
</script> 
</html>

That's it! Maybe not immediately obvious, but also not that difficult once you've seen it done. Also note that I'm explicitly setting a one-second timeout for the purposes of this sample. You probably want a longer timeout. (The default is ninety seconds.)

IntelliSense for ASP.NET AJAX

Steve Marx — Sat, 03 Mar 2007 00:22:05 GMT

The March CTP of Visual Studio Orcas is out, and it includes IntelliSense support for JScript. See Jeff King's post about it.

That by itself is cool, but the ASP.NET AJAX support is awesome! It uses the xml documentation in the AJAX Library to give you extra information like parameter types/descriptions.

I've seen this before internally, but I haven't gotten a chance to play with it yet. I'm definitely looking forward to it!

Delayed load with an UpdatePanel

Steve Marx — Thu, 01 Mar 2007 06:16:27 GMT

Improving performance is all about finding and removing bottlenecks. In many web applications, the bottleneck is one slow piece of the page. More specifically, it's the work that happens on the server to enable that one piece that's slowing down the application.

For example, you might have a page that displays an article along with links to related content. The article is quick to load, but those related links require a query across several databases and then an expensive merge step. This means that while your users are sitting at a blank page twiddling their thumbs, the article (which is what they want) is ready to go but stuck on the server waiting for those related links (which they don't yet care about).

This problem leads a lot of ASP.NET AJAX developers to ask how they can use the UpdatePanel to do a delayed load of part of the page. The most common answer I've seen on blogs and on the forums is to use the Timer control set with a short interval. The idea is that you render nothing in the UpdatePanel originally, and then in the timer's OnTick handler, you fill in the missing data.

Here's an example:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate> 
        <asp:Label ID="Label1" runat="server" /> 
        <asp:Timer ID="timer" runat="server" Interval="1" OnTick="DelayedLoad" /> 
    </ContentTemplate> 
</asp:UpdatePanel>

And in the codebehind:

protected void DelayedLoad(object sender, EventArgs e) 
{ 
    System.Threading.Thread.Sleep(2000); 
    Label1.Text = "Stuff that took a long time to load."; 
    timer.Enabled = false; 
}

I believe this is the best solution for most situations. For comparison, here are some other possibilities:

Client-side code that runs via Sys.Application.add_load() that does __doPostBack('<%= UpdatePanel1.ClientID %>'). Just be careful to remove yourself via Sys.Application.remove_load() so you don't run again when the async postback finishes.
Instead of using the timer's OnTick event, do the delayed loading in Page_Load behind an if (IsPostBack). This is probably the simplest technique to make sure you're loading the data any time you need it. Just be aware that now on every async postback on the page, you're going to do the work we already decided was slow.
Put the contents of that UpdatePanel on another page altogether, and fetch it asynchronously using Sys.Net.WebRequest or a web service call. See this post on ScottGu's blog for an example of how to do this. This is the most efficient solution if the controls are fully decoupled. If the controls do need to be in the same .aspx because they interact (via a trigger, for example) then this won't be an option.

Slides, sample, and code: Achord - collaborative note taking

Steve Marx — Wed, 28 Feb 2007 23:46:16 GMT

Thanks to everyone who came to my webcast today on Using the Microsoft AJAX Library with PHP. We had about fifty people at the live webcast. If you missed it, a recording should go up in the next 24 hours.

During the talk, I showed how to use the Microsoft AJAX Library to create client-side controls and behaviors. I also showed how to use the networking API (plus "PHP for Microsoft AJAX Library") to communicate with a PHP server.

The sample I showed during the session is brand new. It's called "Achord", and you can play with it here. The idea is for you to be able to write notes during an event (like a webcast!) while seeing the notes other people are taking. Then you can aggregate (copy/paste) when you see something useful. That way not everyone has to type that URL the speaker just mentioned. The name is a play on "accord" and a "chord" (literally, in music, multiple notes at the same time).

So far it's turned out to be more of a chat application than a collaborative note taking application, but who am I to dictate how it gets used? :-)

Here are the pertinent links:

My slide deck from today's webcast
The running Achord sample (hosted here with PHP on IIS7/FastCGI)
The full working sample code
Some other URLs I mentioned during the talk:
- http://ajax.asp.net - main ASP.NET AJAX site
- http://codeplex.com/phpmsajax - the PHP for Microsoft AJAX Library shared source project (needed to use the web proxies)
- http://projects.nikhilk.net/Projects/WebDevHelper.aspx - the tool I used in IE to watch the HTTP traffic

Enjoy, and let me know what you think!

Sys.WebForms.PageRequestManagerParserErrorException - more than just a really long name

Steve Marx — Tue, 27 Feb 2007 04:48:07 GMT

You should already be subscribing to Eilon Lipton, so I don't need to tell you that he has a new post about this lengthy exception called "Sys.WebForms.PageRequestManagerParserErrorException - what it is and how to avoid it."

It's well worth a read, particularly for those who are porting legacy applications forward to ASP.NET AJAX.

Update: It's an unintended humorous consequence that the title of this post can't fit within my blog's layout. :-)

PHP and MS AJAX Webcast this Wednesday

Steve Marx — Mon, 26 Feb 2007 13:47:43 GMT

This Wednesday at 1:00PM PST, I'll be presenting a webcast on Using the Microsoft AJAX Library with PHP. (Drew Robbins was signed up for this one, but he asked me to present because of my CodePlex project: PHP for Microsoft AJAX Library.)

I'm working between now and then to put together a few new demos, and maybe even ship a couple new features in the CodePlex project. Please register for the event and ask me some hard questions during the session. It would be great to have you there!