Building Web Apps With ASP.NET MVC3

One of the things Microsoft did for the Web development world was bring in the ASP* series of programming methodologies. I call it this and not a language since each iteration had many different languages to choose from. Classic ASP had JavaScript and VBScript, ASP.NET had C# and VB.NET among the many other .NET languages. The ASP series of web development made it easier and easier for developers to create a Web application for different purposes. ASP.NET in particular made it easy for developers to quickly create sites using drag and drop of controls and writing event handlers — very much like writing a Windows application itself. Microsoft has introduced another method by which you can create Web applications. This uses a very well-known design pattern called MVC.

MVC stands for an architecture design pattern called Model-View-Controller. In this pattern, the controller is the one that does all the work for taking decisions, navigating to locations, and generally providing the flow of the application. Think of this as the “Business Logic” center of the application. The Model is the structure of the data that the controller works with. The model not only contains the structure of the actual data store (database, Web service, et al.) but also the methods required to interact with the data store to both read data and change data (in other words, the CRUD operations). Finally, the View talks to the controller, gets the Model that it needs to show and then displays it to the user. The view by itself never makes a decision other than that required for presentation to the user.

One of the things that ASP.NET (in the Web Forms mold) was unable to do give tight control over the HTML generated by the controls. Not only that, although you could separate code from markup (code-behind versus the ASPX file), you couldn't really differentiate the application into a multi-layer architecture easily. The syntax also made it difficult to really move into the multi-layered architecture even if taking precautions for doing so.

This is where ASP.NET MVC comes in. ASP.NET MVC version 1 was released as an add-on for Visual Studio 2008/.NET 3.5 as part of SP1. ASP.NET MVC v2 was included as part of the .NET Framework 4.0/VS2010. ASP.NET MVC 3 has been released very recently as an add-on to the .NET4/VS2010. So what all does it bring to the table?

This latest iteration of MVC makes it even more easier to build Web applications using the standardized architecture design pattern. The tools built into Visual Studio 2010 make it extremely easy to get started and build large scale apps. These are some (but not all) of the cool new features of ASP.NET MVC3 that we'll be looking into in this series:

-> The new Razor syntax

-> Multiple View engines

-> Unobtrusive Javascript

-> Remote validation

-> HTML Helpers

-> And more...

A Quick Sample

As this is just the first of a series of articles on MVC3, let's start with getting you off to installing MVC3 and starting a new application. You can install MVC3 in many ways. If you do not have any tools installed, simply download the Microsoft Web Platform Installer (~ 2MB) and run it. Select MVC3 in the list and choose to install it. The WPI will download and install everything you need. You could also manually download the MVC3 installer from Microsoft and install it if you already have any edition of Visual Studio 2010 already installed on your machine.

Once this is done, open up VS2010 and select Create New Project. You will see both Asp.NET MVC2 and MVC3 in the list. Select MVC3 and give the project a new name. In the dialog that opens after this, select “Internet Application” and for the view engine, select “ASPX” for now. We will use the Razor view engine in later parts of the series.

When the project is ready, simply compile and run it. You should see a small sample application. Browse around to see the features in the site. Let us quickly make some small changes to see what happens.

Open Solution Explorer and find the Controllers folder. Right click this and select Add-Controller from the context menu and give the controller a name like TestController (note that the controller MUST end in “Controller” for the framework to do its work). When the code file opens up, you will notice a single method called Index. Add one more method like the following:

First right click the “Index” method and select Add View. In the dialog, let the defaults remain and continue. Repeat the same for the “Hello” method you created above. In the ASPX file that comes up, add the following code under the main

tag:

Save, compile and run the application. But since you don't have a menu entry, you will need to enter the URL to your pages directly in the browser. All MVC apps follow this convention:

http:///// . Which means that the URL you need to go to now is http:///Test.

This will open the Index page created earlier. To go to the Hello method, go over to http:///Test/Hello. Congrats, you've just created your first MVC application. We have not of course bound it to a datastore (model) yet, nor used any of the advanced features of VS/MVC3, but we will look at each of this in this series in the coming months. Till then, ciao!