ASP.NET Core

View in ASP.NET Core MVC Application

View in ASP.NET Core MVC Application

View in ASP.NET Core MVC Application

The View is the component that contains logic to represent the model data (the model data provided to it by a controller) as a user interface with which the end-user can interact.
The Views in ASP.NET Core MVC are HTML templates with embedded Razor markup, which generate content that sends to the client.


Role of View in ASP.NET Core MVC Application
Presentation: Responsible for UI, i.e., application data presentation
Provide Ground for Actions: A user generally performs all the actions on a view, such as a button click, form, list, and other UI elements.
In ASP.NET Core MVC Application, we use the Razor View Engine to embed .NET code in HTML markup. There should be minimal logic (you should not write any business logic, calculation logic, etc.) within views.


Location of Views
By default, Views are available inside the Views folder at the root. Usually, views are grouped into folder names with the applications controller.
Each controller will have its own folder in which the controller-specific view files are going to be stored.
The view file name is the same as the action method name of a controller with the “.cshtml” extension.


public class HomeController : Controller
{
    public ViewResult Index()
    {
        return View();
    }
}

Above, We have an action method, i.e., Index, whose
The return type of above Index() action method is ViewResult, that returns a view.

In order to return a view, here we are using the View() extension method, which Microsoft provides AspNetCore.Mvc.Controller Base class.


Return Type of Controller
Views are typically returned from the Action method as a ViewResult, which is a type of ActionResult.
An action method can create and return a ViewResult directly, but that isn’t commonly done. Since most ASP.NET Core MVC Controllers are inherited from the Controller base class, we can simply use the View helper method to return the ViewResult.


How ASP.NET Core MVC Action method locate its associated View?
By default, the ASP.NET Core MVC Framework will look for a file with the name Index.cshtml in the following 3 locations: -
First, it will look for the Index.cshtml file within the “/Views/Home” folder, as the action method belongs to Home Controller.
Then it will look for the Index.cshtml file in the “/Views/Shared/” folder.
Then it will look for the Index.cshtml file in the “/Pages/Shared/” folder.

If the requested “.cshtml” file is found in any of the above folders, then the View generates the HTML and sends the generated HTML back to the client who initially made the request.
On the other hand, if the requested file is not found in any of the above locations, then we will get the above error.


Create View for our Action Method
Right-click on the Views folder and then select the Add => New Folder > rename the folder as Home.
Right-click on the Home folder and then select Add => View option, which will open the Add View window
Select the Razor View item and click the Add button


Once you click the Add button, it will open the Add Razor View window. Here, you need to give the View name as Index, Select the Empty (without model) template, uncheck the create a partial view and use a layout page checkbox, and then click on the Add button.



View Methods:
View() Method in ASP.NET Core MVC Application
When you go to the definition of the Controller base class, you will find four overload versions of the View() method available


View() vs View(object model) Extension Methods:
If you want to pass some model data, you need to use the overloaded version of the View method, which takes the object model as an input parameter; otherwise, you can simply use the View() extension method, which does not take any parameter.

View(string viewName) vs  View(string viewName, object model) Extension Methods:
If you want to return a view from an action method whose view name is different than the action method name, then you need to use either View(string viewName) or View(string viewName, object model) Extension Methods.

public class HomeController : Controller
{
    public ViewResult Index()
    {
        return View("Login");
    }
}


public class HomeController : Controller
{
    public ViewResult Index()
    {
// Can Specify the Absolute View File Path of View
        return View("Views/Home/Login.cshtml");
// OR -  Can use this
        return View("/Views/Home/Login.cshtml");
// OR -  Can use this
        return View("~/Views/Home/Login.cshtml");
    }
}

Now run the application and navigate to the “/Home/Index” URL, and you will see that the response is coming from the Login view. When using the absolute path, it is mandatory to use the .cshtml extension.


Advantages of Using Views in ASP.NET Core MVC Application
1. The Views in ASP.NET Core MVC application provides the separation of concerns (codes). It separates the user interface from the business logic or, you can say, from the rest of the application.
2. The ASP.NET Core MVC views use the Razor syntax, which makes it easy to switch between the HTML markup and C# code.
3. The Common or repetitive aspects of the application’s user interface can be easily reused between views using layout and shared directives or partial views.




Related Post

About Us

Community of IT Professionals

A Complete IT knowledgebase for any kind of Software Language, Development, Programming, Coding, Designing, Networking, Hardware and Digital Marketing.

Instagram