Scott Hanselman

The Weekly Source Code 28 - iPhone with ASP.NET MVC Edition

June 9, '08 Comments [12] Posted in ASP.NET | ASP.NET MVC | Source Code
Sponsored By
image I've been getting more and more interested in how folks extend their applications using plugins and things. In my new ongoing quest to read source code to be a better developer, Dear Reader, I present to you twenty-eighth in a infinite number of posts of "The Weekly Source Code."

The iPhone 2.0 was announced today and even though I am trying to come up with a better solution to show it off than Northwind, I was moved when I saw Aaron's "Rock the iPhone with ASP.NET MVC" post. I've had this same post in my "to blog" queue for at least two months, but now he's done it himself and beat us all to it. Kudos to Aaron.

I'm primarily an ASP.NET developer and I browse on mobile devices all the time, and have been doing so for years. I made DasBlog and this website sniff and apply a mobile template almost two years ago. If you visit hanselman.com on a BlackBerry or Windows Mobile or a number of other tiny devices, you'll get the same site with a mobile skin. I'll need to do something for the iPhone as well.

Al Pascual added iPhone "support" to Community Server late last year by redirecting iPhone users to his RSS Feed, giving those users a cleaner experience than they would have gotten ordinarily.

Steve Orr has a good article on iPhone Development pointing out a number of important details like the viewport meta tags that give the iPhone clues on how to scale the page as well as his Advanced iPhone Development article with a smidge more detail (not really advanced).

I was wondering how easy it'd be to make an iPhone application with ASP.NET MVC, and it turns out it's pretty easy with a combination of things. First, the IUI project at Google Code is a series of Javascript and PNG assets to make a basic iPhone apps. It's really quite elegant, what the iui team has done, based on work from Joe Hewitt. Joe has a fine introductory blog post that explains some of the concepts.

You can use Safari for to simulate an iPhone, or Firefox with the User Agent Switcher and some customization.

For example, here's the source for the page pictured above. Notice the one CSS and one JS file that are included.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iUI Prefs Demo</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 "../iui/iui.css";</style>
<script type="application/x-javascript" src="../iui/iui.js"></script>
</head>

<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>

<form id="settings" title="Settings" class="panel" selected="true">
<h2>Playback</h2>
<fieldset>
<div class="row">
<label>Repeat</label>
<div class="toggle" onclick=""><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
</div>
<div class="row">
<label>Shuffle</label>
<div class="toggle" onclick="" toggled="true"><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
</div>
</fieldset>

<h2>User</h2>
<fieldset>
<div class="row">
<label>Name</label>
<input type="text" name="userName" value="johnappleseed"/>
</div>
<div class="row">
<label>Password</label>
<input type="password" name="password" value="delicious"/>
</div>
<div class="row">
<label>Confirm</label>
<input type="password" name="password" value="delicious"/>
</div>
</fieldset>
</form>
</body>
</html>

Notice the little toggle switches? They are in a div with class="toggle" and a click event handler gets hooked up to those in Javascript:

addEventListener("click", function(event)
{
var div = findParent(event.target, "div");
if (div && hasClass(div, "toggle"))
{
div.setAttribute("toggled", div.getAttribute("toggled") != "true");
event.preventDefault();
}
}, true);

Based on the toggle state, the switch renders as appropriate:

.toggle {
border: 1px solid #888888;
-webkit-border-radius: 6px;
background: #FFFFFF url(toggle.png) repeat-x;
font-size: 19px;
font-weight: bold;
line-height: 30px;
}

.toggle[toggled="true"] {
border: 1px solid #143fae;
background: #194fdb url(toggleOn.png) repeat-x;
}

The iPhone HTML page above has multiple forms, explicit control over divs - all things that MVC is better suited for than WebForms. Aaron explains in his blog post how he just brings IUI into his content folder, but the trick was that IUI expects HTML fragments to be returned from Ajax calls, not JSON.

Aaron's Views are then Partial Views intended for consumption from built-in Ajax calls by IUI, so the product's list page looks just like this. Note the markup is all alone.

<ul id="products" title="Products">
<% foreach (Product p in ViewData.Model) { %>
<li><%= Html.ActionLink(p.ProductName, "Index", "Products", new { id = p.ProductID }) %></li>
<% } %>
</ul>

Very cool and very easy.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Tuesday, June 10, 2008 12:16:30 AM UTC
There's some interesting challenges coming up w.r.t. rendering lists dynamically in a way that handles loading partial content successfully. Also I'm not sure yet how to integrate it with a "normal" site (i.e. your blog that renders one way for normal browsers and another for the iPhone) in a way that doesn't impact the normal site structure, but I'll figure that out and post it too. :)
Tuesday, June 10, 2008 12:48:45 AM UTC
I humbly submit that there are in fact only 52 weeks in a year, and not 56 as alleged in this article.

Ryan
Tuesday, June 10, 2008 1:07:53 AM UTC
Doh! Fixed.
Scott Hanselman
Tuesday, June 10, 2008 1:26:16 AM UTC
My head is exploding trying to work out how I would have done this in a 'traditional' web forms application.

MVC brings so much to the table! The view rendering extensibility/flexibility shown here is a powerful example.
Tuesday, June 10, 2008 1:45:20 AM UTC
This is surely interesting from a HTML/DHTML story, but the real story is the power of building an iPhone SDK application that is backed by XML services in .NET. Surely at least a few .NET developers have taken a look at Xcode and the Cocoa Touch API.
Tuesday, June 10, 2008 2:04:59 AM UTC
MVC is looking better and better.
Tuesday, June 10, 2008 5:42:33 AM UTC
MVC is really ROCKS!!
Tuesday, June 10, 2008 3:26:44 PM UTC
I don't know about you guys but I find the most interesting thing here is that you are using Apple, Microsoft and Google products together. Not just that but each is bringing something to the party and they seem to get along just fine. What next, cats and dogs living together?
Tuesday, June 10, 2008 10:02:31 PM UTC
OMG , MVC is incredibly cool ! Awesome >:D
kiki
Wednesday, June 11, 2008 3:15:27 PM UTC
Great project. I hope it takes off! I never liked the session variables in a DB model anyway.

Scott, you have to get rid of that open a link in a frame keeping your hanselman URL up top. That is sooooo 90's and incredibly gross.

-jason

Jason Slocomb
Wednesday, June 11, 2008 3:15:31 PM UTC
Great project. I hope it takes off! I never liked the session variables in a DB model anyway.

Scott, you have to get rid of that open a link in a frame keeping your hanselman URL up top. That is sooooo 90's and incredibly gross.

-jason

Jason Slocomb
Monday, June 16, 2008 2:04:42 AM UTC

Hi Scott,

Keep the MVC samples coming. I have attempted an example of validation on both server and client.

Really looking forward to the next few releases on the framework..

Mark
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.