Step 1
You might already have VB.NET 2010 Express fired up and ready to go. Not so fast! Microsoft has chosen not to put any MVC templates in VB.NET Express. Right now, it's exclusively an ASP.NET web technology. So you have to have Visual Web Developer 2010 Express downloaded and fired up instead. (Fortunately, also free.) Or the full Visual Studio 2010 which can do anything.
Fundamentally, MVC is a "design pattern" and you could implement it by simply following the pattern and coding your own classes. I mention this because somebody will inevitably write in and tell me that "we don' need no steekin' templates". (Apologies to Treasure of the Sierra Madre.) Fundamentally, you could also code your own programs with nothing more than the vbc compiler and Notepad, too. We're talking about what's reasonable here.
So fire up Visual Web Developer 2010 Express and select New Project. Under Visual Basic and the Web subheading, you will see two likely templates:
- ASP.NET MVC 2 Web Application
- ASP.NET MVC 2 Empty Web Application
The first one is the one usually used. You can create a new project using that template and run it unchanged to get something like this:
--------
Click here to display the illustration.
--------
There's a lot going on there! And it's all included in the app. Here's the Solution Explorer view of the app:
--------
Click here to display the illustration.
--------
All of the code in those files fit together in an intricate interlocking scheme. Get one parameter out of place and it doesn't run. It's a lot easier to start with an app that already runs and then add, change, and delete to get what you want. But you don't learn as much, so we're going to start with an empty MVC app. When you do that, you get this result:
--------
Click here to display the illustration.
--------
Quite a difference. The error, by the way, is one of the most common ones that you will see as you learn to code using MVC. But all of the necessary pieces are still there. They just don't have the code to fit together anymore. That's what we're going to add. (But I'll still have to sprinkle "programmer pixie dust" in a few places before it will run.)
Step 2
Let's start at the data end: Models. In a realistic business app, the Models folder contains the code to interface with a database or some other source of data. Much of the actual processing takes place in the Models because an underlying philosophy of MVC is complete isolation of function. MVC gurus call this the "Single Responsibility Principal". The other parts of MVC, Controllers and Views, should not know or care where the data comes from. In a real world app, globalization, validation, authorization ... anything necessary to get the data ... will be found here.
In our little "Hello World" app, we only have one piece of data: the string "Hello World!" To add that to the Models folder, right-click the Models folder and add a class named HelloDataModel.vb. Here's the code that goes in this file:
Namespace MVCHelloWorld.Models
Public Class HelloDataModel
' The data: A Hello World string
Public Property theHello As String = "Hello World!"
End Class
End Namespace
It looks pretty simple because it's just one class containing one property. But it's not quite that simple because MVC ties together with names and all the names have to be present and match before it works. So, for example, you will find that you use the Namespace keyword a lot. In Windows Forms, you can pretty much ignore it most of the time. In a realistic app, much of the actual work is done by attributes that are used to decorate the classes. For example, in the boilerplate AccountModel file for the non-empty MVC app, the Password property is decorated with four attributes:
<Required()> _
<ValidatePasswordLength()> _
<DataType(DataType.Password)> _
<DisplayName("Password")> _
Public Property Password() As String
...
Often, these attributes have to be supported by other classes that you code. And so on and so on ...
On the next page, we code the heart of MVC, the controller.