ASP.Net MVC Walkthrough – Gears of Web

There so many great resources for learning ASP.Net MVC out there, especially on Scott Guthrie’s blog. I found that the approach taken by most bloggers in their tutorials involves writing a project, while it is a great way to get the some hands-on experience, it can be overwhelming to first understand the context of the project and then how the MVC framework handles the project.

In this walkthrough series, I will go through the beautiful ASP.Net MVC framework and attempt to explain its many cogs that interact to build powerful web applications. I won’t be going in to any projects that involve restaurants or nerds.

First let’s get the gears of war err… web.

Visual Studio 2010

You might have heard of it, it’s this amazing IDE we .Net-ers use. VS2010, like its predecessors comes in many editions. The VS2010 Express Edition is free and pretty sweet. Also, if you’re a student, don’t read any further and head over to DreamSpark and get yourself a fresh VS2010 Professional Edition. Yeah, pretty sweeter!

Web Platform Installer

This is something you might not have heard of. Using Web Platform Installer Microsoft distributes all its web components to us developers. It’s got everything. Get it. Now.


I have nothing else to say to you if you have not installed Nuget. It’s the one tool that every .Net developer needs besides Visual Studio. With it, you’ll be able to download from a plethora of community powered tools and projects that will make life and working with MVC a breeze.

Everything else

From here on, installing ASP.Net MVC 3 and updates for Visual Studio should be an easy exploration. Hint: Web PI. In my next post, I’ll write about all the basics and background to MVC. Stay tuned!

This post also appeared on the Go DevMENTAL blog.

ASP.Net MVC Walkthrough Series

In this walkthrough series, I go through the beautiful ASP.Net MVC framework and attempt to explain its many cogs that interact to build powerful web applications without going in to any projects that involve restaurants or nerds.

1. Gears of Web

Say Hello to Project jQMvc

After my previous post about jQuery Mobile and ASP.Net MVC, I found myself using jQM in a project. Now, it would be a shame if I didn’t share the goodies I built for MVC with jQM.

So, I give you Project jQMvc. Really, it’s a collection of HTMLHelper extensions that build on jQM. With jQMvc you’ll be able to build full HTML5 compatible and mobile ready views but with the lovely MVC behind it at all times. Let me show you some of the things it can do.

Lists, a lot of them

In the project there a several types of lists, with and without searching. Thanks to jQM, it’s a treat! And really useful.

The below code,

@using jQM
@model IEnumerable

    ViewBag.Title = "Unordered List With Search";


And a little bit of sauce from the controller will give you,

jQMvc List with Search Preview

Buttons, all sorts of them

@using jQM

    ViewBag.Title = "Buttons";

@Html.ActionButton("Hi. I am a simple button.", "Index", "Home")

@Html.ActionButton("Hey! Look, I am a settings kind'a button.", "Index", "Home", ButtonIcon.gear)

@Html.ActionButton("Unlike others, I have route values.", "Router", "Home", new { id = "value" })

The code above will create a neat little stack of different kinds of button.

So that’s it for now. As the project grows, I will be sure to update with the neat things that will go into jQMvc.

MVC Now Stands for Mobile Views Conquered

Say hello to my little friend. Always wanted to say that. But seriously, say hello to jQuery Mobile. It’s pretty obvious what its all about so I’ll get straight to it. Here’s a little look at how pages of ASP.Net MVC applications can be hosted to work with mobile devices et with amazing interfaces.

Link ’em.

We’ll need to link the resources either from the CDN that’s mentioned on jQMobile’s download page. Or you can… download them. As I have.

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/jqmobile/")" rel="stylesheet" type="text/css" />

Give it structure.

I gave this MVC3 project’s _Layout.cshtml the following layout so that I can use it throughout my other views and modify those as required.

<div data-role="page">
   <div data-role="header">
   <div data-role="content">@RenderBody()</div>
   <div data-role="footer">
       <h4>Footer here</h4>

Using the data-role attribute, we can specify different parts of the page as we like. And as you might guess RenderBody() will be the mode of transaction for all your data. Data transactions can also happen through the jQMobile framework itself (using JavaScript that is). As you might imagine, each page can have be strongly typed to a model.

From there on it’s just good old MVC with jQMobile doing all the neat work, preparing the application for mobile platforms.

MVC3 Docking on AppHarbor and Entity Framework Code First

So, I spent last few hours figuring this out. AppHarbor is pretty nice. AppHarbor is free for one application, one database and it does work with SQL Server CE. I just deployed a stripped down version of one of my MVC projects there and it’s pretty smooth. So, here’s a run down of how it’s done, so that someone else might not need hours.

Stripping the project down was a breeze, you’ve got to love Object Oriented design, it’s beautiful. Deploying the project was a no-brainer too, if you’ve had some experience with Git. But testing, as ever brought out the issues.

I was using Entity Framework Code First (EFCF) as my ORM and it likes to drop databases. I didn’t realize it since it’s natural for EFCF to. And for good reason too, for when you change your models. On AppHarbor, you don’t get permissions to create databases. Thus the problem.

But no fear, NuGet to the rescue. Again. Actually, community to the rescue. There’s a workaround for EFCF’s DropCreateDatabases it’s DontDropDbJustCreateTables. You can find here on NuGet. It plugs in beautifully to your application and all you need to do is enter your context name. Also, you will have to get a new database from AppHarbor since already EFCF dropped it.

Also the connection string should include a providerName otherwise, exceptions!

    <add name="connection string name"
         connectionString=";Database=dbXXXX;User ID=dbXXXX;Password=YourPassword;"
         providerName="System.Data.SqlClient" />

jQuery UI in MVC3 to Spice It All Up

Look here!
jQueryUI in MVC3 Project

It’s jQuery UI! You might have read about it in Scott Gu’s post about MVC3 RC2. jQuery UI is going to be added by default in MVC3 projects. So, rejoice. And read on.

To find out how to use them in the projects, I went a-testing. Figured it would be easy and it was. But I made little progress, so I made a project out of it and put it on CodePlex.

Here’s the project. You’re welcome to help me extend it. It will be great to have a base project set up for future use.