One thing I was looking forward to was hearing about the ASP.NET MVC story on Azure. So color me surprised when I found out there wasn’t one. Since ASP.NET MVC is bin-deployable it shouldn’t be impossible, and doing some quick searches didn’t retrieve any results showing anybody else having tried this. Of course later I discovered that Phil and Eilon had whipped up a sample app that ran ASP.NET MVC on Azure, but was pleased to find out that the downloadable sample app didn’t work. In fact, it seemed to just be MVC stuff slapped into a WebRole project. (I’m guessing something got “lost in translation” since it wasn’t Phil or Eilon that posted the code.)

Anyway, here’s how you can get ASP.NET MVC up and running on Azure. I’ve created a Visual Studio template for this to make it easy to set up - download it here. To avoid distributing code that isn’t my own (i.e. Windows Azure SDK Samples) there are a few steps you’ll have to take. I’m presuming that you’ve already installed the Windows Azure SDK and the Azure Visual Studio tools.

One thing that running a web application “in the cloud” means is that you can instantly scale higher by adding more “instances”. This means the leaky-as-a-sieve abstraction of “session state” isn’t immediately available (finally!) since any given HTTP request could be going to a different server. The default session state provider for ASP.NET is an in-memory provider. This assumes that every request comes to the same physical machine. Session state providers have varied in their reliability and handling of scalability, but the other built-in providers include an out-of-proc provider (still same machine, but more resilient to IIS going up and down) and a SQL Server provider. None of these are enabled on the Azure platform, for good reason.

The limitation of zero session state wouldn’t matter except that ASP.NET MVC includes the concept of “Temp Data”, which is data persisted in one request and made available to the next request only. By default, MVC uses the session to store this data.

Aside: like it does everywhere else, ASP.NET MVC allows you to swap out default implementations for TempData persistence. A better solution than what I have below is to specifically implement a TempDataProvider that uses the Azure data storage capabilities. Look for that soon.

Fortunately for us the Windows Azure SDK includes some “samples”, including full implementations of membership, profile, and session providers built on the Azure data storage platform. So let’s hack those in to fulfill the default requirements of ASP.NET MVC. The only thing that I’ll say about this is that much of this stuff had better be baked into the SDK/platform by the time it goes GA. This is just a CTP, and Microsoft has been doing better at earlier community releases, so I’ll cut them some slack. But this is way to much work to be a reasonable shipped solution.

Unzip the “samples.zip” file in the Azure SDK and build the “AspProviders” application.

They’ve conveniently included “buildme.cmd” batch files, but I built the application using Visual Studio since I like to see more of “what’s going on” (even though I really don’t see more, per se).

Create the required tables in the Azure Development Storage.

Open the Azure SDK command prompt under your start menu, and navigate to the directory containing the AspProviders output. Run the command “devtablegen” passing in the assembly name “AspProviders.dll”. This command creates the appropriate database structures to persist objects that meet certain criteria. Run devtablegen with no parameters for a short description, or check out the documentation for more info as well.

You’ll get a confirmation window that displays progress and shows that the table was created successfully.

Start the Development Storage service.

By now, the storage service should be running, but you’ll need to explicitly enable its endpoints. Open the UI from the system tray icon (), and click “Start”. If you’ve never started it before, it will ask you for the name of the database – select “AspProviders”.

Create a new Cloud Service and add an “ASP.NET MVC Web Role” project.

Download the Visual Studio template I created here. Import the template by copying the downloaded .zip file to “My Documents\Visual Studio 2008\Templates\Project Templates” (or whatever you have specified in Tools – Options – Projects and Solutions – General). Create a new “Blank Cloud Service” project.

Add a new “ASP.NET MVC Web Role” project using the installed template.

Your VS solution should now approximate this:

Under the “Cloud Service” project, right-click on the “Roles” folder and select “Add > Web Role Project in solution…” and select the web role project we just added.

Cleanup

Because I can’t distribute the compiled version of the sample app, and because the location of it on your drive depends entirely on your personal preferences, you’ll have to re-add the references manually. From the ASP.NET MVC Web Role project we added, delete the references to AspProviders and StorageClient

and re-add the references pointing to the assemblies we built above.

Press F5, and you’re up and running the default ASP.NET MVC sample app on the Windows Azure platform! From there the sky’s the limit. Or maybe “the cloud’s the limit”?

I recently heard a reading of an essay where the author said that the reason children create so much art is that they don’t know that they’re bad at it. That’s so true. And yet I love walking through my 4-year old daughter’s pre-school looking at the dozens and dozens of masterpieces posted on the walls.

There is something about society, peer pressure, fear of failure, etc. that keeps us from trying things because we’re not good at it. “I wish I was good at that,” we tell ourselves. But we get into a race condition where we demand excellence from ourselves before we can start, yet we need to start to achieve that excellence.

Enough psychobabble - what am I getting at, anyway? It’s the Aaron and Mike Show. My friend and coworker Mike and I decided we’d take no more than 15 minutes on a Thursday afternoon (4PM EST) and broadcast a “show” LIVE right from my office. We’ll talk about software and the craft of building software. Imagine it like an even shorter Hanselminutes. Not the Hanselminutes of late, which are just interviews, nay, it’s more like the old-school Hanselminutes from way back yonder when Scott was building products for Corillian and talked about the real development challenges he faced every day. (Both styles of Hanselminutes are good, but each serves/served a different purpose.)

Mike and I will be talking about the development challenges we run across every day, as well as the kinds of things we are continually doing to improve our skill at the craft of software. It’ll be hard to fit it into 15 minutes but we will do our best. Each show will be recorded, so if you can’t make it to the live show, you can still see the recorded version later, and I’ll put up a blog post for each show with notes, follow-ups, etc.

Our first show (view it here) was SPECTACULAR! Just look at the kind of feedback we received:

I expect this to be spectacularly lame (getting popcorn)
- subdigital

thanks for your first show! Looks nice, a bit flaky though. But the effort is much appreciated. We all should start doing this!
The deep insights you guys raised OTOH completely made up for the flakiness
- azuidhof (2nd tweet)

Okay, so it was a little rough. But we’re new at this, we had fun doing it, and I’m looking forward to getting better as we go along.

Live video chat by Ustream
Note that the broadcasting software has two buttons: Broadcast and Record. Yours truly forgot to hit Record after I hit Broadcast, so we missed recording the first few minutes. Sorry ‘bout that!

Please leave us feedback with ideas of what you’d like us to talk about. You can leave a comment on this post if you like. We’ll be having the occasional guest on the show (our co-workers) to share something going on in their world of software.

My main question for you is, will you still respect me in the morning?

A poll at the beginning showed that most people in attendance had done some sort of web development, about a third had done ASP.NET development, and 2 people had worked with ASP.NET MVC. The most challenging thing was that almost everybody was unfamiliar with the MVC pattern. And yet again I learned the difference between a master and a wanna-be. A master can take complex principles and concepts and express them in a simple form that people can immediately understand. I, on the other hand, cannot. I seemed to struggle with getting the “core concepts” of ASP.NET MVC across in a way that was clear and unambiguous.

I’ve created a slideshare presentation with the slides. It’s an overview, and I only had time to cover a few aspects of it, but I’m still sure I was off on a few concepts – if you notice something, leave a comment so I can learn!

Here links to various MVC resources to get you started with ASP.NET MVC:

- Download ASP.NET MVC from Codeplex
- MVCContrib – community contributions/extensions to ASP.NET MVC
- CodeCampServer – a slightly-out-of-date-but-still-good reference implementation
- Official ASP.NET MVC site (lots of links to resources)
- ASP.NET MVC Forums – a lot of questions asked and answers given
- ScottGu’s MVC posts
- Phil Haack is the ASP.NET MVC Program Manager
- Stephen Walther has done many posts on ASP.NET MVC
- Blog posts tagged “aspnetmvc” on Technorati

Bam.

Hope to see you there! The event sold out quickly, but in my experience you can still get in if you show up the morning of the event. If you’re there, come over and say hi!

I love you.

Oh wait, no, that was supposed to go in the email to my wife.

Know your limits.

Consider this phrase as just one aspect of the golden rule as it relates to leadership. For example, I am a person who loves to dig into details and who tends to struggle with intentionally staying at a high-level view of a project. As the team grew, we had 8 people each working on a different project. With my natural hands-on style, I found myself inadvertently ignoring half of the team, barely keeping up with the current state of their projects, while digging into the other half of the projects.

I realized that my current limitations were preventing me from giving attention to my co-workers and their projects that they needed, and at the same time I was growing increasingly stressed out and frustrated from trying to keep up with everybody. In the spirit of “doing to others what I would want done to me” I knew that my co-workers deserved proper attention and focus from their manager. I also knew that the more stressed I was, the less effective I was.

The solution in my situation? Find and/or develop another Technical Manager and split the team up, allowing each manager to provide an increased level of focus to their teams.

We split the teams about a month ago and the day the split went into effect I swear I felt a literal load taken off of my shoulders, and the result for both teams has been wonderful.

Team mitosis and optimal team size is an interesting topic that perhaps I’ll muse about more in-depth in a future post.

Unfortunately Apple didn’t provide much help in the form of html or css to make your website “iPhone-y”. They provide documentation on elements like iPhone specific events (”onorientationchange”) and details about how Safari works on the iPhone in terms of zooming, etc., but nothing that offers guidance on how to make an application look like it belongs on the iPhone.

Enter Joe Hewitt and iUI. iUI takes HTML that follows a simple set of conventions and does all the heavy lifting to enable you to easily build a version of your site that is tailored for the iPhone experience. I first started using iUI before ASP.NET MVC was publicly introduced, and I specifically remember thinking how much iUI was built for “webforms unplugged“. Let’s take a quick look at an example of how iUI works, and how to use it with ASP.NET MVC.

If you’re the type that likes to get their hands dirty first, download the code here.

CSS Zen Garden

iUI is literally nothing more than some javascript, some css, and a bunch of image assets. It’s how things are supposed to work with HTML and it’s beautiful, like the CSS Zen Garden. It also has some simple conventions that I’ll summarize like so: “write HTML the way it was intended”. <ul> or <ol> for lists, and <div> or <form> for dialogs and pages. Easy enough, right? There’s not a ton to iUI but for this post I’ll start simple. Let’s create a list of products that we want to display like so:

This is the HTML behind the list itself (not including the top toolbar, though the “title” attribute of the list controls the text shown in the center of the toolbar):

<ul id="products" title="Products">
    <li><a href="/products/index/1">Alice Mutton</a></li>
    <li><a href="/products/index/2">Aniseed Syrup</a></li>
    <li><a href="/products/index/3">Boston Crab Meat</a></li>
    <li><a href="/products/index/4">Camembert Pierrot</a></li>
    <li><a href="/products/index/5">Carnarvon Tigers</a></li>
    <li><a href="/products/index/6">Chai</a></li>
    <li><a href="/products/index/7">Chang</a></li>
    <li><a href="/products/index/8">Chartreuse verte</a></li>
</ul>

iUI does the heavy lifting to format the list in the iPhone style, and will dynamically load any linked content using an AJAX call and render it in-place, replacing the current list (“products”). iUI handles sliding in the new content from the right-hand side, just like a native iPhone application.

You could also reference another list defined within the same page, for example if you had a very short list of items and had each list item’s “linked content” also included in the page, like this:

<ul id="products" title="Products">
    <li><a href="#subproduct1">Product 1</a></li>
</ul>

<ul id="subproduct1" title="Related Products">
   <li>Sub Item 1</li>
   <li>Sub Item 2</li>
</ul>

The Root Page

iUI will dynamically render partial content into the current view, but it needs an initial root page describing the main layout. The easiest way to figure out what is needed is to look at one of the examples that iUI includes, but in a nutshell you’ll probably need at least two elements: the toolbar (the heading) and some content. To support the example above of a product list, our entire root page could look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Northwind Explorer</title>
    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    <style type="text/css" media="screen">@import "../../Content/iui/iui.css";</style>
    <script type="application/x-javascript" src="../../Content/iui/iui.js"></script>
</head>
<body>
    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
    </div>
    <ul id="products" title="Products" selected="true">
        <li><a href="/products/index/1">Alice Mutton</a></li>
        <li><a href="/products/index/2">Aniseed Syrup</a></li>
        <li><a href="/products/index/3">Boston Crab Meat</a></li>
        <li><a href="/products/index/4">Camembert Pierrot</a></li>
        <li><a href="/products/index/5">Carnarvon Tigers</a></li>
        <li><a href="/products/index/6">Chai</a></li>
        <li><a href="/products/index/7">Chang</a></li>
        <li><a href="/products/index/8">Chartreuse verte</a></li>
    </ul>
</body>
</html>

The site will initially show the list of products, and when the user clicks on a product, the <ul id=”products” title=”Products” selected=”true”>…</ul> element will be wholesale replaced with the content loaded by an AJAX call to “/products/index/[number]”.

Hooking up iUI to MVC

First things first - download the latest iUI assets from the google code repository trunk. You’ll get the latest bug fixes and features, which I’ve found to be helpful. As a side note, you can view some samples directly from the repository itself - like the music example. Put the downloaded files in the Content directory:

Define your main page—the main entry point to the site. I chose /home/index in my example. This is where you’ll reference the iUI javascript and css assets, and define the initial structure of your page.

One big catch that I already mentioned with iUI is that it expects links (whether AJAX-loaded or in-page references) to return HTML fragments. It literally takes the results of an AJAX call to a given URL and sets the innerHTML of the content to replace.

This means that every other page in our application should return partial content. For example, when I click on “Products” this is the only content of the view page that lists the products:

As you can see, it’s simply building the list itself and rendering the partial HTML content as a response.

You can connect with an iPhone on your local network with a wifi connection, but it’s much easier to install and test with Safari for Windows. Both Safari for Windows and the iPhone’s mobile Safari use the WebKit engine so the rendering experience is about as close as you can get. Shrink the browser to approximately the size of the iPhone screen and you’d never know you didn’t spend the $400+ on an iPhone.

You can download the first version of my example project here.

Up Next

In future posts I’ll explore some more of iUI’s features such as adding a product page to view details of a product in a friendly way (I’ve included this in the example project already), rendering partial lists (allowing the user to expand the list incrementally), detecting the user agent and loading iPhone views vs. “normal” views, and more. I’ll update the example project as we go!

Unfortunately, we’ve been without power at our home since 10PM last Friday night due to storms and tornados. Not only is the power out in our area of the city, but a big tree fell on our specific power lines, ripping everything away from the house. So the weekend has been spent calling utility companies, contractors, waiting, and reading. Our family lives far away, so we’ve really appreciated our friends who have welcomed us into their homes, shared their meals with us, and let us type blog posts from their laptops. (Thanks Shawn!)

If you’re going to TechEd and want to meet up, drop me an email at aaronlerch at gmail or tweet me on twitter. I’ll be at Party with Palermo on Monday night.

See you in Orlando!

ActionResult

This change came with Preview 2, but it’s worth mentioning. Instead of controller actions returning void, they now return an ActionResult instance. This increases testability and separates functionality. Testability because now controllers can be tested without mocking out all the requirements for invoking the view, and functionality because the loading and invoking of an action’s view is encapsulated in a class structure apart from the controllers.

JsonResult

Something that is included new in Preview 3 is JsonResult (a subclass of ActionResult). It looks like some of my crazy ideas weren’t so crazy after all? A new method on the controller, "Json()", takes a serializable object and returns a JsonResult which uses the obsoleted (whoops??) JavaScriptSerializer to render the object as JSON.

So a controller’s action could look like this:

RedirectToRoute

If a controller action needed to redirect, our only option (until now) has been RedirectToAction which accepts an action name and optional controller name. That’s not bad, but now we have RedirectToRoute which allows us to redirect to a named route, making things more flexible and easier to change (without mass find/replacing all over the place).

And more…

Scott Guthrie has more details, and Scott Hanselman (so many Scotts!) has a few updated screencasts. Be sure to check them out.

Things with MVC are solidifying and starting to look pretty good. Check out the MvcContrib or CodeCampServer projects for some decent reference implementations.