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.

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). :-)

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:

1. Launch http://mixer1004.mixsandbox.com in IE7, Firefox, or Safari.
2. 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.
3. Type a search term (try "more", for example), and press "GO".
4. 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.
5. 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.
6. 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.
7. Finally, click on the title "fabrikam" in the search results.
8. 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.
9. 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.

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.

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.)