Day 3: Adding a Controller and View

This is an installment in a 30 day series on Bootstrap and the MVC Framework. To see more, check out Day 0 for an index.

When we talk about “adding a page” to a site, what we usually are referring to is setting up some kind of response to a client request. Sometimes that request will be an HTML page, but it might be a dynamically created image, a file built on the fly, or any other HTTP compliant result.

In any case, if the goal is to try to render something that the user is going to see on their screen, we’re likely talking about adding controllers and views.

Creating Controllers

As we already discussed, we will follow the conventions that have been laid out so that we can leverage the built in tooling. To get started, right-click on the Controllers folder in the solution explorer and follow the context menu to “Add –> Controller…”.  This is the process for using the scaffolding exposed by the framework, launching a dialog that prompts you for the information it needs to build out a starting point. There are a number of options, but let’s just look at first one for now: the Empty Controller.

[](https://jcblogimages.blob.core.windows.net/img/2014/06/image_thumb4.png)

This gives you a simple option to name a controller when selected.

[](https://jcblogimages.blob.core.windows.net/img/2014/06/image_thumb7.png)

I called mine “SimpleController”, which you’ll see has some significance in a moment.  As a class, future James will know exactly what present James means by this name.  Here’s the class that is generated for me.

public class SimpleController : Controller
{
    // GET: Simple
    public ActionResult Index()
    {
        return View();
    }
}

So, again, this is a class with a method, but we call it a controller with an action. In this case, my Index “action” returns the result of a call to the View method, which is found on my base class that I inherit from (Controller). ActionResult, the return type of Index, is a type located in the MVC Framework that we’ll look Because we’re following convention, the View method will attempt to locate a view named “Index” found in the Views folder, in the Simple subfolder.

Unfortunately, that view doesn’t yet exist. Thankfully, this isn’t hard to do.

Creating Views

In the code editor window, right-click on the Index method (right on the name of the method itself) to invoke the context menu. Select “Add View…” to get the dialog open to create your view.

[](https://jcblogimages.blob.core.windows.net/img/2014/06/image_thumb10.png)

The nice thing here is that you don’t have to type in the name of your view. The tooling just assumes the name from the method.

At this point, use the “Empty” template to create your view and select the option to “Use a layout page” as I have above. Leave the name as-is so that we can follow along on that convention gravy train. When you click “Add”, a view file will be created for you with the cshtml (or vbhtml) extension, with something similar to the following code:

@{
    ViewBag.Title = “Index”;
}

<h2>Index</h2>

The @{ … } notation is Razor syntax to say, “here’s a code block”. This is used to interact with the rendering of the view and in this case it’s simply setting the value of the page Title in the ViewBag.

With your cursor in the Razor editor, run your application by pressing CTRL+F5 (run without debugger), and navigate to your newly created page. For me, my application started up on port 48995 and the full URL was http://localhost:48995/Simple/Index. You can think of that address as http://host/Controller/View for any page that is following the default convention for routing.

[](https://jcblogimages.blob.core.windows.net/img/2014/06/image_thumb15.png)

New page for the win!

Next Steps

A page that says index will really only hold you over for so long, so up next we’ll find out how to send along more meaningful information to our client.

Happy coding!