Create ASP.NET MVC application – Add View

In the last tutorial, we discussed how to create ASP.NET MVC application.  In this tutorial let us look into how to add a View to the project. Here is the link to the tutorial Create ASP.NET MVC Application in C# and Visual Studio Open the MVCHelloworld, which we created in the last tutorial.

Create ASP.NET MVC Application
Create ASP.NET MVC Application – Add Model
Create ASP.NET MVC Application – Add CRUD Functionality

Create ASP.NET MVC application in C# and Visual Studio – Part II

Create ASP.NET MVC Application Add View
Create ASP.NET MVC Application Add View

Adding an Action Method MyFirstView

What is an Action Method

“]The Public methods which are added to the Controller are called Action Methods.  In our HomeController we had already created a method called Index, which is an Action Method Open the HomeController add the following code

Add a MVC Action Method
Add a MVC Action Method

How to add a View

Follow these steps to add the view

  1. Right Click on anywhere inside the MyFirstView Code block.
  2. Click on Add View
Right Click to add View
Right Click to add View

This will take you to Add View wizard Add View Wizard

Add View Wizard
Add View Wizard
  1. View Name. This is the Name of the View.  The View must have the same as the action Name. This is an MVC Convention that must be followed.
  2. Under Template, Select Empty (Without model)
  3. Uncheck Create Partial View.
  4. Uncheck Use a Layout Page.
  5. Click on Add

This will create a View named  MyFirstView.

MyFirstView

My First View
My First View
  1. Home folder (Home is the name of our controller) under View Folder.  This is MVC Convention.  Each controller gets a folder in its name under the view folder.
  2. MyFirstView.cshtml. This is the actual view file
  3. Layout = null: Views can use a master layout, but while creating the view we Unchecked Use a Layout Page.
  4. The Actual View Code. The Visual studio has added the initial code for us.  You can see that this is nothing but HTML Code
  5. Insert the following code between the <div> </div> element

Test Your View

MyFirstView is rendered
MyFirstView is rendered

Run the project and you will see “This is my First View” in the browser as shown in 1.  If you did not see the above result type  /Home/MyFirstView  after the Port Number is address bar (as shown in 2)

Under the hood

We have now two views in our Home Controller.  One is index and another one in MyFirstView. How does MVC know which view to render?.  Well by looking at the URL The URL we typed here is /Home/MyFirstView The MVC follows these steps

  1. Takes the First Part of the URL that is Home
  2. Searches for the controller named HomeController
  3. If it does not find the controller then sends the error message (resource not found) to the browser
  4. If the HomeController is found, then it takes the second part of the URL that is MyFirstView. (Refer to the point 3 in image)
  5. It searches for the Action Method MyFirstView in the HomeController. (Refer to the point 4 in image)
  6. It then executes the instruction in the action method MyFirstView. In our case the code is

  1. Now it searches for the View named “MyFirstView”
  2. MVC Finds our View in the folder Views/Home
  3. Returns the View to the Browser. In our example, it is HTML Code, which displays the string result “This is my First View”

Our Controller does have another Action Method  Index. We did not create any Views on the Index Method. So what happens when we type /Home/Index in our address bar?. It follows the above steps until the step No. 6.  The Index action method returns the string.  So  MVC does not searches for any Views. It just returns to the browser from the step No.6

Test it

Let us try few things here. Type the following URL into your browser and see the result.

UrlWhat will happen
/Nothing is specified in Url. MVC Takes this as /Home/Index and returns “Hello world”
/HomeSearches for HomeController. No Url is specified for the Action Method. Hence MVC executes Index Action Method and returns “Hello world”
/Home/IndexSearches for Index Action Method under HomeController. Returns “Hello world”
/Home/MyFirstViewSearches for MyFirstView Action Method under HomeController. Returns “This is my First View”
/Test/IndexHere the first Parameter is Test. So MVC Searches for TestController . Does not find that controller and hence returns the error “resource not found”.
/Test/HomeSame as above. It does not matter what is specified after Test. If the TestController is not found, it returns the resource not found error to the browser.
/Home/TestSearches for HomeController and finds it. But there is no Test Action Method on our Home Controller. Returns a resource not found error message.

Conclusion

We have created ASP.NET MVC Application and added the controller and a view. In the next tutorials, we will look at how to add a model to our Project. In the meantime, you can try adding another view to the controller and test it. In case if you have any issues feel free to write in the comments section. Don’t forget to share this article on your Facebook wall

Here is the link to other tutorials in this section

Create ASP.NET MVC Application
Create ASP.NET MVC Application – Add Model
Create ASP.NET MVC Application – Add CRUD Functionality

Download

Source Code

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top