Adding a Razor View to our Hello World MVC3-app [beginners]

Standard

In my previous post I made an example of how to write a very light weight MVC3 app with only one file (well, besides the web.config and global.asax). In this post I’ll add a Razor view as simply as possible.

The Razor view file requires us to add a little bit of structure to our project, namely a root Views folder, a web.config file and a separate folder for the views of each of our controllers:

/Views (folder in the root)
/Views/web.config (config file with the configuration for the view engine)
/Views/Item/ (the folder for our controller)

In the /Views/Item folder we’re going to add our razor file, Display.cshtml. To use that file we’re adding a controller with an action function. This function can consist of only the instruction return View() if we like. With that MVC3 automatically looks for and runs the view file in the following path /Views/{controllername}/{actionname}.cshtml.

However, I like to add a little bit of code to show how a viewmodel (a data object) typically is being sent to and used by a view.

using System;
using System.Web.Mvc;
using System.Web.Routing;

namespace MvcApplication3
{
    public class ItemController : Controller
    {
        public ActionResult Display(int id = 0)
        {
            dynamic viewModel = new System.Dynamic.ExpandoObject(); // we add a view model with some data
            viewModel.Id = id;
            viewModel.Name = "Some name";
            return View(viewModel); 
        }
    }
    public class Global : System.Web.HttpApplication
    {
        protected void Application_Start(object sender, EventArgs e)
        {
            RouteTable.Routes.MapRoute("", "item/display/{id}", new { controller = "Item", action = "Display", id = UrlParameter.Optional });
        }
    }
}

With this model, we can write our razor view as such:

@model dynamic // defines the type of the view model (not required)
<h2>Hello World</h2>

id: @Model.Id // using the data from the view model with the @ razor syntax
name: @Model.Name

The mentioned /Views/web.config file is essential for MVC3 for the Razor view engine to function properly. The one I use is simply the one that comes with a empty MVC3 project and I don’t find it necessary to paste it here.

The heart of a web application

This is pretty much what I need as a base for my web applications. From here it’s straight forward to build Html with the help of Razor helpers and templates, and construct models with the help of good ol’ C# businesslogic and a data access library of choice.

Oh, and dependency injection, source code versioning, deployments and testing…

About these ads

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s