Getting Started with the ASP.NET MVC Framework – Installation and “Hello World”

Why MVC? That is a reasonable question. Model–View–Controller (MVC) is an architectural pattern used in software engineering.

This is different from Web Forms (Traditional ASP.NET Web Applications).

In ASP.NET applications that do not use the MVC framework, user interaction is organized around pages, and around raising and handling events from the page and from controls on the page.

In contrast, user interaction with ASP.NET MVC applications is organized around controllers and action methods. The controller defines action methods. Controllers can include as many action methods as needed.

Think in terms of URLS calling Methods – No mapping to html or aspx or jsp, etc

The breakthrough of Visual Basic 3 is that developers would just respond to events, such as clicks on buttons. You would spend your day doing “event – driven” development by writing code that would execute based on click of a mouse.

But MVC is different. Sure, if you look close enough, you can see examples in MVC.

But you must put that to the side now. They are not gone. It is more that that you should work in terms of “controllers” and how a url maps to an action method.

The controller defines action methods. Controllers can include as many action methods as needed.

Some key facts about how MVC fundamentally works:

• the URL of the request includes information that the MVC framework uses to invoke an action method

A primary goal of MVC is to architect maintainable applications.

The pattern isolates "domain logic" (the application logic for the user) from input and presentation (GUI), permitting independent development, testing and maintenance of each.

The MVC offers a clear separation of concerns.

Other key facts include:

• The model is the domain-specific representation of the data upon which the application operates.
• Domain logic adds meaning to raw data (for example, calculating whether today is the user's birthday, or the totals, taxes, and shipping charges for shopping cart items).
• When a model changes its state, it notifies its associated views so they can refresh.

Model
The object that represents the data being operated on or requested

View
Transforms the Model into a format appropriate for sending to the user

Controller
Coordinates the request

The ASP.NET MVC Application is Microsoft’s implementation of this architectural pattern.

The components of the ASP.NET MVC framework are designed so that they can be easily replaced or customized.

• You can plug in your own view engine, URL routing policy, action-method parameter serialization, and other components.
• The ASP.NET MVC framework also supports the use of Dependency Injection (DI) and Inversion of Control (IOC) container models.
• DI allows you to inject objects into a class, instead of relying on the class to create the object itself.
• When the concept of dependency injection is used, it decouples high-level modules from low-level services.
• The result is called the dependency inversion principle.

MVC is just another form of a web application

• MVC is often seen in web applications where the view is the HTML or XHTML generated by the app.
• The controller receives GET or POST input and decides what to do with it, handing over to domain objects (i.e. the model) that contain the business rules and know how to carry out specific tasks such as processing a new subscription.

Dependency Injection is part of the architecture

In the MVC world

Without the concept of dependency injection, a consumer who needs a particular service in order to accomplish a certain task would be responsible for handling the life-cycle (instantiating, opening and closing streams, disposing, etc.) of that service. 

One benefit of using the dependency injection approach is the reduction of repetitive code in the application objects since all work to initialize or setup dependencies is handled by a provider component.

Another benefit is that it offers configuration flexibility because alternative implementations of a given service can be used without recompiling code. This is useful in unit testing because it is easy to inject a fake implementation of a service into the object being tested by changing the configuration file.

Martin Fowler talks about it more deeply here.

http://martinfowler.com/articles/injection.html

You can watch a video too.

Watch The Webcast Here (59 Minutes, 82 Megabytes). Sounds like Rob Conery talking about how painful it would be to change a tight coupling in your code. The example he cites is the database backend. Let’s say you want to change your source of data. This would be painful as you’d have to go everywhere where your code talks to the database and change the places where the connections is created and opened. You would need to remember to clean up and dispose. If you abstracted that away, like with dependency injection or the repository pattern, you would avoid all the headaches associated with changing your data store.

Specifically, Rob talks about implementing StructureMap.

http://structuremap.sourceforge.net/Default.htm

I haven’t used StructureMap, but here is some of what the package promises:

• StructureMap is a Dependency Injection / Inversion of Control tool for .Net that can be used to improve the architectural qualities of an object oriented system by reducing the mechanical costs of good design techniques.
• StructureMap can enable looser coupling between classes and their dependencies, improve the testability of a class structure, and provide generic flexibility mechanisms.
• Used judiciously, StructureMap can greatly enhance the opportunities for code reuse by minimizing direct coupling between classes and configuration mechanisms.

Step 1

Incoming request directed to Controller for processing

Step 2

In the next step the controller gets a model object. The fact that the database is involved is transparent to the Controller.

Step 3

Once the model is obtained by the controller, it is passed to the view for rendering to the end user.

Step 4

The view renders the chart or user interface. The view knows nothing about where the data came from or what the user input.

There are several choices for creating web based content. Web forms have been around for a long time.

Web Forms (your other option)

• Control ecosystem – there is a very developed and rich “pre-built” controls you can purchase. It is an entire industry.
• State management – http is stateless. It is hard to program with cookies and control state.
• Design time support – great integration with Visual Studio.

MVC

• Do it yourself – you have full control. More work.
• Separation of concerns – more maintainable.
• Test Driven Development – write your tests first
• Extensibility everywhere – you have full control. More work, more power.

ASP.NET offers great features to both Web Forms and MVC

• Services
• Caching
• Routing
• Localization

You can watch a presentation about how you would choose between using Web forms versus MVC.

Choosing between ASP.NET Web Forms and MVC - MIX Videos

Extensibility

• One key characteristic is extensibility, allowing you to swap out parts of the framework, such as the view engine.
• Here is blog discussing how to replace the “View” engine
  • Use the view engine of your choice
  • http://blog.maartenballiauw.be/post/2008/05/20/Creating-a-custom-ViewEngine-for-the-ASPNET-MVC-framework.aspx
• You get jQuery included in-box
  • But you can use YUI, Google Web Toolkit, etc.
• Key Aspect of Platform is URL Routing
  • This allows you to create "friendly" and "pretty" URLs such as http://somesite.org/store/categories that map to arbitrary controller actions
  • This gives you more control over how visitors to your site use URLs, freeing the developer to abstract the underlying web architecture, which is typically evident in the urls being tied to specific aspx or html files.
  • Afterall, users surely don't care how you architected your web site or web application.

Test-driven development (TDD)

• Test-driven development (TDD) is a software development technique that relies on the repetition of a very short development cycle.
• First the developer writes a failing automated test case that defines a desired improvement or new function, then produces code to pass that test and finally refactors the new code to acceptable standards.
• Kent Beck, who is credited with having developed or 'rediscovered' the technique, stated in 2003 that TDD encourages simple designs and inspires confidence.
• Test-driven development is related to the test-first programming concepts of extreme programming, begun in 1999, but more recently has created more general interest in its own right.
• Programmers also apply the concept to improving and debugging legacy code developed with older techniques.

Blog posts and videos by team members:

• ScottGu: ASP.NET MVC Framework (Part 0): What is it?
• ScottGu: ASP.NET MVC Framework (Part 1): Building an MVC Application
• ScottGu: ASP.NET MVC Framework (Part 2): URL Routing
• ScottGu: ASP.NET MVC Framework (Part 3): Passing ViewData from Controllers to Views
• ScottGu: ASP.NET MVC Framework (Part 4): Handling Form Edit and Post Scenarios
• Scott Hanselman: Scott Hanselman's ASP.NET MVC First Look Screencast
• Phil Haack: TDD and Dependency Injection with the ASP.NET MVC Framework
• Phil Haack: Writing Unit Tests for Controller Actions
• Nikhil Kothari: Ajax with the ASP.NET MVC Framework
• Brad Abrams: RSS Feed with the new ASP.NET MVC Framework

I thought I’d start this blog with the official web site for MVC. I believe I’ll start with a download.

I chose the Microsoft Web Platform Installer.

I walked through the setup. I re-ran to make sure it got installed appropriately.

MVC 2 RC  - This is not in full production release as of 1/23/2010, but that’s the code base I would like to work from.

Here is the URL:

http://www.microsoft.com/downloads/details.aspx?FamilyID=3b537c55-0948-4e6a-bf8c-aa1a78878da0&displaylang=en#filelist

This is “Pre-Release” Software

However, I ran into an error because I have it already installed. When I checked Control Panel, here is what I found:

Visual Studio 2010 Beta 2 has everything I need.

This first tutorial is about getting familiar with some of the classes.

The goals are:

• What do the different classes represent once you use Visual Studio 2010 Beta 2 to create a new project
• Provide some code snippets to help you learn how to program it
• Learn about the built in tooling in Visual Studio 2010 Beta 2

The next few screens will demonstrate how to create a blank new project of type:

• File, New Project
• Project Type = ASP.NET MVC 2 Web Application
• Name = “HelloWorld” (folder = c:\devprojects\mvc)
• Create Unit Tests = “Yes”
• TestProjectName = HelloWorld.Tests
• Framework used = Visual Studio Unit Test
• Solution Explorer shows 2 projects
• Project 1 = The MVC Project
• Project 2 = The Unit Tests
• The MVC Project has several key folders with code
• Content
• Controllers
• Models
• Scripts
• Views

Figure above : File, New Project (starting from scratch)

Figure above: ASP.NET MVC 2 Web Application (a plain old new project)

Figure above: Solution Explorer (default project)

Controller Class (One of three main categories of objects/classes)

Let’s focus on the HomeController class.

What is the job of the controller?

• The controller receives input and initiates a response by making calls on model objects.
• The controller handles the input event from the user interface, often via a registered handler or callback and converts the event into appropriate user action, understandable for the model.
• A view queries the model in order to generate an appropriate user interface (for example, the view lists the shopping cart's contents).
• Note that the view gets its own data from the model.
• The controller may (in some implementations) issue a general instruction to the view to render itself.
• In others, the view is automatically notified by the model of changes in state (Observer) which require a screen update.
• As a reminder…
• The model abstracts away the data access layer and the view renders the data abstracted away within the model.

Taking a deeper look – HomeController.cs

Imagine that you enter the following URL into your web browser’s address bar:

/Home/Index/3

The Default route maps this URL to the following parameters:

controller = Home

action = Index

id = 3

Note – In this case we are ignoring id = 3. That comes later when we example the default template. Remember, we control how the url gets interpreted.

What the default application looks like. Notice I added “From Bruno!”

This diagram speaks well to the architecture. Notice that the url ends in "/Home/About".

• This URL gets parsed by the .NET runtime and mapped to specific classes and methods.
• In the default project generated by Visual Studio 2010, HomeController.cs is the class called upon by the runtime because of the "Home" in HomeController.cs and the "Home" in "/Home/Abuot".
• Note that "public ActoinResult About()" gets called. The "About()" method gets called because of "/Home/About".
• The "About()" method will return a "View()" object, which results in an additional mapping to "About.aspx", which is in the folder "Views / Home

One of the things to note is that a URL does not map to a specific web page that you wrote. Most approaches require that the direct page is hit. Otherwise you get the “404 – Page Not Found” error.

Plain Old HTML Below – The hard coded old school way of doing things

• http://www.autopartswarehouse.com/category/brakes-comma-_suspension_-and-_steering/brake_drums-comma-_shoes_-and-_components.html

The URL above is NOT MVC

• Notice the URL above uses a very "hard-coded" approach to calling web pages.
• Using MVC you can take that same url and "re-route" to a specific controller/action combination.
• This is called ASP.NET Routing.
• URLs coming into your MVC application get mapped to a controller action, such as "About()" getting called as a method inside of HomeController.cs.

More examples of how parsing works

• For example, consider the following URL:
• /Brakes/Disc/3
• This URL is parsed into three parameters like this:
• Controller = Brakes, Action = Disc, Id = 3
• Default Behavior
• But there are defaults:
      Default Controller = Home
      Default Action = Index
      ID = Empty String
• http://localhost
• Controller = Home, Action = Index, Id = ??
• /Manager
• This URL is parsed into three parameters like this:
• Controller = Manager, Action = Index, Id = ??

Code Snippet that shows the default routing tables being setup