Create a View: Index View for the Home Controller

In the last module we created our first controller; the Home Controller. Along the way we learned a little about OOP programming in C# and talked about access modifiers.

In this module we are going to create our first View. Views in ASP.Net Core MVC are actually Razor Views and they use Razor Syntax.

Razor View files have a cshtml file extension because they are basically comprised of HTML with C# code interspersed throughout the HTML. We use Razor Syntax to embed C# code into the HTML.

Table Of Contents
  1. The InvalidOperationException: The view 'Index' was not found.
  2. Create the Views folder
  3. Create a ViewResult
  4. What's Next

The InvalidOperationException: The view ‘Index’ was not found.

At this point if you run the application, you will see an exception in the browser window that says:

InvalidOperationException: The view 'Index' was not found. The following locations were searched:
/Views/Home/Index.cshtml
/Views/Shared/Index.cshtml

You will also see the output of the exception in the console running the application.

C# and ASP.Net Core throw exceptions, or errors, when something goes wrong. We will get more into exceptions and error handling for ASP.Net Core later in the chapter. But, here we are getting an error when we run the application because in the last module we set up an endpoint for the default route handled by the Index Action in the Home Controller that returns a ViewResult. But, we did not yet create the actual View to fullfill the request.

By convention, MVC will look for the View in the Views Folder and then for a subfolder with the name of the controller that is handling the request, in this case, Home. Within the Views/Home folder it will look for a file with a .cshtml filename extension named after the Action in the Controller that is handling the request. If MVC does not find the View in this location it will look in a second location at Views/Shared/[Action Name].

So the two locations that are searched here are:

/Views/Home/Index.cshtml
/Views/Shared/Index.cshtml

In the next few sections we will fix this error and create the View in a Views/Home/Index folder.

Create the Views folder

Add a new folder to the root of the FredsCars project and name it Views.

Create a Home Views folder to correspond to the Home Controller

Now add a folder in the FredsCars/Views folder called Home.

The Project structure should now look like the following screen shot.

Create a ViewResult

Now we are finally going to create our first ViewResult.
Right click on the Views/Home folder in the FredsCars project and select Add -> New Item....

In the Add New Item dialogue, search for Razor View in the upper right search box, Select Razor View - Empty from the results in the middle pane, and leave the name as Index.cshtml. Click the Add button.

The new Razor View file named index.cshtml should now show up in Solution Explorer under the Views/Home folder and the file opens up in a new tab within Visual Studio ready to edit.

Modify the contents of the Razor View file with the following content.

FredsCars\Views\Home\Index.cshtml

<h1>Welcome to Fred's Cars!</h1>
   Where you'll always find the right car, truck, or jeep.
   Thank you for visiting our site!

Restart and run the application and your browser should look similar to the following.

Does this look familiar? It does if you read Chapter 1. This is the same welcome message we started off with early on in building the FredsCars local car dealership.

What’s Next

In this module we created our first View. Now we have one Controller for the ‘C’ in MVC and one View for the ‘V’ in MVC. Don’t worry we we’ll get to the model for ‘M’ in MVC soon enough.

I’ve talked about how Views are Razor View files and they use Razor syntax. We don’t have any razor syntax yet in index.cshtml but we will have plenty by the end of this chapter. This file is going to serve as the landing page just like in Chapter 1 where we can search by category for Cars, Trucks, and Jeeps and view the results.

But first we are there we are going to install Bootstrap to improve the look of our fonts and make CSS and styling more easy to deal with.

Then we are going to create a layout template in the Views folder so all of the pages we create in the future can have the same look and feel as well as the same header and footer.

< Prev
Next >

Leave a Reply