Table of contents
1.
Introduction
2.
Creating a Controller in an ASP.NET MVC Application
3.
Creating View in an ASP.NET MVC Application
4.
Benefits of View
5.
FAQs
6.
Key Takeaways
Last Updated: Mar 27, 2024

ASP.NET MVC View

Author Parth Jain
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

In ASP.NET's Model-View-Controller (MVC) pattern, a view manages an app's representation of data and the user interaction. A view is just an HTML template that has an embedded Razor markup. A Razor markup is a code that interacts with an HTML markup to create a webpage that's sent to the client side.
In ASP.NET Core MVC, views are .cshtml files that use the C# language in a Razor markup. View files are grouped into folders according to the app's controllers. The folders are stored in a Views folder in the leading directory of the app.
In simple terms, an ASP.NET MVC application does not contain a display page when a URL request is made. The closest thing that can be considered a page is a View.

Creating a Controller in an ASP.NET MVC Application

In an ASP.NET MVC application, all browser requests are handled by a controller, and these requests are charted to controller actions. A controller action may return a view or perform other activity, such as redirecting to another controller action.
Hence we must know how a controller is created in ASP.NET MVC.
Let us start by creating our very own ASP.NET MVC Application.
Open Visual Studio and click on Create a new project.
 


Search for the ASP.NET Core Web App(Model-View-Controller) template and click next


Type the name of the project. In this example, the project name is MVCViewProject.


Set the Framework to.NET and the authentication type to none 


We have successfully created our ASP.NET MVC application with all these steps completed.
To create a controller, we right-click on the Controllers located inside the Solution Explorer and hover over the Add option to click on the Controller option. 


To keep things simple, let us create an empty MVC controller.


Now we are asked to name our controller. In this example, let us call the controller HomeController.


Now a HomeController.cs file will be created inside the Controllers folder.
Below is a sample code that will make our home controller functional.

using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;


using System.Web;



namespace MVCViewDemo.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }


        public string Firstcontroller()
        {
            return "Congratulations, You created your first controller!";
        }
    }
}


Now, we run the project after pasting this code inside the HomeController.cs file.


After running the application, we will be redirected to our default browser and get an interface like this.


All we have to do is append /home/FirstController in our URL.

Creating View in an ASP.NET MVC Application

The FirstController action returns just a string. To return a View from an action, we need to add a View first.
Hence, before creating a view, let us create another action that will return a default view.

using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;


using System.Web;



namespace MVCViewDemo.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }


        public string FirstController()
        {
            return "Congratulations , You created your first controller!";
        }
        public ActionResult FirstView()
        {
            return View();
        }
    }
}


Now let us restart our application and append /home/FirstView to our URL.


Upon updating the URL, we will witness an error as we press enter. This error is justified as currently, we have not created a view for FirstView action.
To solve this issue, we just have to add a View. We have to right-click on the FirstView action inside the HomeController.cs file to do this.


Then we add an Empty Razor View.


Finally, we name the file FirstView.


As we press Add, a FirstView.cshtml file is created inside the Home folder located inside the Views Folder.

Our FirstViewLogic.cshtml file is empty and thus will not return anything.
Consider the code below.

@{
   Layout = null;
}


<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width" />
      <title>First View Example</title>
   </head>

   <body>
      <div>
         <h1>Congratulations! You have created a View.</h1>
      </div>
   </body>

</html>


Again, after restarting the application, we can see the created view as output.

Benefits of View

Views help us separate the concerns within an MVC application as we can separate the user interface markup from other application sections. 
Some crucial benefits of using Views are :

  • The application becomes easier to maintain as it's better organized.
  • One can build and update the application's views separately from the business logic. 
  • Views can be easily modified without necessarily updating other parts of the application.
  • It's easier to test the user interface parts of the app because the views are separate units.
  • Testing the interface becomes exceptionally efficient as the user interface logic is separated into smaller chunks.
  • As the code is organized, coding errors and overwriting logic become negligible.

FAQs

  1. What is a view in ASP.NET MVC?
    The view is an HTML template that is embedded with a Razor markup. A Razor markup is code that interacts with HTML markup to produce a webpage that's sent to the client.
     
  2. What is the full form of MVC and what does it mean in ASP.NET?
    MVC stands for Model View Controller.MVC is a lightweight framework that is a highly testable presentation framework integrated withASP.NET default features.
     
  3. What are the benefits of using View?
    With View, the application becomes easier to maintain as it's better organized and one can build and update the application's views separately from the business logic. 
     
  4. How to create a View?
    Right-click on the view action and click on the add view button to create an empty razor view. Finally, a .cshtml file is created inside the home directory under the Views folder.
     
  5. What is a Controller in MVC?
    A controller is responsible for controlling how a user interacts with an MVC application. It also holds the flow control logic for an application.

Key Takeaways

In this article, we learned about Views in ASP.NET MVC. We also learned why Views are essential and how beneficial they are in MVC. However, this isn't enough, as there is always much more to explore and learn about this vast field of Web Development. To know more about ASP.NET and its intricacies, check out the articles on Features Of ASP Net or enroll in our highly curated Web Development course.

Recommended Readings:

Live masterclass