Intro to ASP.NET MVC 4

The ASP.Net MVC 4 framework was introduced in August of last year and it boasts tons of improvements over MVC 3. If you’re considering building a large application in .Net, you should consider MVC 4 for your project. Today we’re going to take a look at it and build a quick website in MVC 4.

What you’ll need

In order to complete this tutorial you will need Visual Studio. I have decided to use Visual Studio Express 2012 for Web to do this tutorial. I made this choice because it’s a free download and not everyone can afford the professional version of Visual Studio, but if you’re using Visual Studio 2010 or 2012 you can still go along as well.

Software needed:

Microsoft Visual Studio Express 2012 for Web (or a licensed version of Visual Studio 2010/2012)

Microsoft Web Matrix 2 - This is a handy little stack to help organize your server and projects for development

Microsoft ASP.Net MVC 4 - The package you’ll need to install to deploy this on your website.

Keep in mind all of this is free! The MVC package is also Open Source. It’s nice to see Microsoft come around with stuff like this.

Let’s get set up

One of the things every Visual Studio has been raving about lately is the NuGet package manager, for good reason. It makes setting things up super easy. We want to make sure we have it installed for our project.

Go to Tools -> Extensions and Updates

And make sure the NuGet Package Manager is installed:

This will enable you to install stuff into your website easily. They have a lot of great plugins and templates available.

Create the Project

Go to the start section and click “New Project” or select it from the File menu. You want make sure to select an ASP.NET MVC 4 Web Application.

On the next screen, select “Internet Application”. As you can see there are various options here, feel free to play around with them and see what you come up with.

Now you’ve created your new MVC application. Let’s take a look at it. If you press F5 you’ll see it’s already assembled into a site. But that doesn’t do much yet.

The parts of your MVC application.

You’ll notice the controller is opened automatically. Let’s take a look at it and see what it does:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

public class HomeController : Controller { public ActionResult Index() { ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application."; return View(); } public ActionResult About() { ViewBag.Message = "Your app description page."; return View(); } public ActionResult Contact() { ViewBag.Message = "Your contact page."; return View(); } }

As you can see this is the “Home” controller that extends the controller class. Since Home is your default route it will control what’s seen on your site root.

1 2 3 4 5

public ActionResult Index() { ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application."; return View(); }

This is the “Index” method, and it’s not too tough to guess it’s place. This is what shows up when you hit a root directory. Whatever you put in here gets shown on the page. But let’s look a little closer inside the method.

ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";

The ViewBag is a wrapper object used to store dynamic data for the ViewData dictionary object. There are some arguments circulating about which one to use, but since Visual Studio stuffs this in, we’ll use it. Let’s change it to something else:

ViewBag.Message = "This is my first MVC Project!";

Where does this data go? If you open up /Views/Home/Index.cshtml you’ll see where this object is used.

First, at the top you’ll see where the ViewBag.Title property is assigned a value:

1 2 3

@{ ViewBag.Title = "Home Page"; }

This is a part of the Razor engine and it’s how you change the title of the page when it loads. You can also change it later. Then further down the page you’ll see:

1 2	<h1>@ViewBag.Title.</h1> <h2>@ViewBag.Message</h2>

As you can see, this is where the ViewBag.Message you changed earlier will go.

One advantage of this is you can make the text displayed dynamic, pulled from a database, object or other data source without touching the design. You can also use this for localization if needed. The Razor engine is pretty sweet, this is just scratching the surface of it.

Creating a New Page

By now you’ve probably figured out that the methods in the controller correlate with pages: Index(), About(), and Contact(). So let’s look at creating a new page. We will be creating a page located at “http://(your site url)/Home/Newpage”.

1. Create a new ActionResult Method

Inside your HomeController, create a new method:

1 2 3 4 5

public ActionResult Newpage() { ViewBag.Message = "This is a new page! "; return View(); }

The home controller is found in /Controllers/HomeController.cs

What is this? The HomeController is the controller for your home directory and each ActionResult is a function of that controller or page. In our case the url would be

Http://www.yoursite.com/home/newpage

Each action must have a view, which we’ll create next.

2. Create a view page

A view is simply an HTML page that displays data and interacts with the controller. You create views for pages or parts of pages, such as menus.

In the /Views/Home/ folder, create a new view by right-clicking on the /Views/Home folder and selecting “New View”:

You’ll see a dialog box that looks like this:

As you can see, this dialog box has a few options. For the view engine, you can choose Razor or ASPX(C#). Choose Razor for this, and leave the rest of the options open. You can create a strongly typed view that’s based of an object, but we’ll leave that for another tutorial. Hit add.

You’ll see the page now in your views folder.

Open up that page, and you’ll see the following code:

1 2 3 4 5

@{ ViewBag.Title = "Newpage"; } <h2>Newpage</h2>

Add some html for fun in there. Also, add the following line:

1	Hi! Today is @DateTime.Now.DayOfWeek

Save the file, and press F5 to run.

Your new MVC Page

To load the page you just created, type in

/home/newpage

after the URL. For instance my local URL is http://localhost:59312/home/newpage but yours may vary. You should see something like this:

This is your newly created view! Feel free to experiment with the views and the Razor view engine. The best way to learn is to break it!

Summary

In this tutorial we built a very basic MVC 4 page in ASP.Net. I hope it gets you excited enough to start really experimenting. The MVC package really does a lot of the work for you, you can actually create whole websites without a lot of code at all. But I do hope you will dig into the code, and get rid of some that atrocious HTML that’s generated and fiddle around.