Creating our first ASP.NET MVC View

In this blog post I will be creating our first simple ASP.NET MVC View which will just display a Hello World message :) . At the end of this blog you should be able to

  1. Start understanding how ASP.NET URL rewriting works
  2. Understand how to pass messages between a Controller and a View
  3. Understand how Controllers should be named
  4. Understand the mapping between Controller and their respective Views
  5. Understand where Views should be stored

To create our first View we will first be creating a Controller method inside the HomeController. Before I create our first View it is good to understand how ASP.NET controllers link to Views by giving several examples.

The first thing to understand is that all Controller names need to end with the Controller name. For example in the sample MVC application there are 2 controllers which are the HomeController and AccountController, as shown in Figure 1. In these controllers there are several methods which link to ASP.NET MVC Views. For example, in the HomeController there are 3 controller methods which are Index, About and Contact as shown in Figure 2.

Figure 1 - Home and Account Controller

Figure 1 – Home and Account Controller

Figure 2 - HomeController Methods

Figure 2 – HomeController Methods

How are these Controller methods called? I will be giving several examples underneath of different URLs the user can type in order to call these Controller methods

  1. http://localhost/Home/Index – The Index Controller method inside the HomeController is called.
  2. http://localhost/Home – The Index Controller method inside the HomeController is called
  3. http://localhost/Home/About -  The About Controller method inside the HomeController is called.
  4. http://localhost/Home/Contact -  The Contact Controller method inside the HomeController is called.

First of all if you take a look at the above URLs you will immediately realize that the URLs to access ASP.NET MVC pages are totally different from calling ASP.NET pages. The above URLs are much better for Search Engine Optimization (SEO), and sometimes these type of URLs are called slugs.

Taking the example URL shown underneath you will note that the first part is the Controller name while the second part is the Controller method name. So in the example shown Home represents the Controller name (in fact there is a Controller named HomeController), while Index is the Controller method name (in fact there is a method called Index in the Home Controller. (Figure 3) (Figure 4)

Figure 3 - Naming structure inside controllers

Figure 3 – Naming structure inside controllers

Figure 5 - URL Structure

Figure 5 – URL Structure

Let’s now create our ASP.NET MVC 4 view. Create a controller method called Test inside the HomeController, as shown in Figure 5 and type the following code return View(); This code basically returns the matching View with this Controller

Figure 5 - Test method

Figure 5 – Test method

Let’s run our application and let’s try to access our Controller method by typing http://localhost/Home/Test. You will see that an exception as shown in Figure 6 will be returned. The reason for this exception is that ASP.NET MVC will try to search for the relevant ASP.NET MVC view which relates to the Controller method. This View which should be named Test.cshtml should be stored inside the VIEWS-HOME folder. If this is not found then ASP.NET MVC will show the exception shown in Figure 6. ASP.NET MVC will try to find this page in several other locations and after failing to find any matching pages an exception will be thrown.

Figure 6 - Exception when View not found

Figure 6 – Exception when View not found

So where should ASP.NET views should be stored? All ASP.NET MVC views are stored inside the VIEWS folder. The naming structure which ASP.NET MVC adopts is that the folder relates to the Controller name, while the page will be named according to the method name.

So taking into account the example shown in Figure 5, a page named Test.cshtml should be created inside the Home folder. In fact, as shown in Figure 7, you will note that there are 3 pages which are related to the 3 methods which have been automatically created by our sample application. These views are named Home.cshtml, About.cshtml and Contact.cshtml.

Figure 7 - Sample Views

Figure 7 – Sample Views

Let’s go back to our example. If we wish to create a new View which will serve as our Test page we should go inside the Test controller method, click the right mouse button and then click on ADD VIEW. Figure 8 shows how this should be done.

Figure 8 - Add View

Figure 8 – Add View

You will then have to select several options. For now we will not go into detail into what this page provides. You only have to make sure that you select the MasterPage which in our sample application is called _Layout.cshtml and is found under the Shared folder, as shown in Figure 9. A page will be created. Now if you type in the URL http://localhost/Home/Test you will see that the page correctly opens as shown in Figure 10.

Figure 9 - Add View options

Figure 9 – Add View options

Figure 10 - View correctly loads

Figure 10 – View correctly loads

Now let’s try to send a message back to our view. To do this we can use what so called the ViewBag which is used as a temporary storage which can then be passed and used by our ASP.NET MVC View.  The code shown in Figure 11 creates a ViewBag variable called Message and stores a Hello World message in this ViewBag variable. You can then display this message inside the View by using Razor syntax as shown in Figure 12. Note that when typing Razor code inside the View you need to preappend it with the @ sign.

Figure 11 - ViewBag

Figure 11 – ViewBag

Figure 12 - Razor inside View

Figure 12 – Razor inside View

Now run the application, type in http://localhost/Home/Test, and you see that the Hello World message is correctly displayed, as shown in Figure 13.

Figure 13 - View with message

Figure 13 – View with message

So enough for this blog…. I hope you found it useful.