Views in ASP.NET Core

Views in ASP.NET Core

On my last tutorial on Action in ASP.NET Core I tough about how to pass Data from Action Methods to Views. I hope you liked it, now I continue to the topic of Views which forms the UI of the application. I start with Shared Views which are basically those Views that are kept inside the ‘Shared’ folder.

Shared Folder

You can create a Shared folder inside the Views folder inside this folder you can put the items that are shared in the application:

1. View that are shared with other portions of the application.
2. Layout files that contains common parts of the UI.

Creating a Shared View

Shared Views are kept inside the ‘Views/Shared’ folder. They can be shared among different controllers in the application. Let me show how to work with them.

Go to Home Controller and create a new Action method – ‘CallSharedView’ as shown below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace UnderstandingControllers.Controllers
{
    public class HomeController : Controller
    {
        // removed for clarity
        public IActionResult CallSharedView()
        {
            return View();
        }
    }
}

Also create the same action ‘CallSharedView’ on the ‘Example’ Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace UnderstandingControllers.Controllers
{
    public class ExampleController : Controller
    {
        // removed for clarity
        public IActionResult CallSharedView()
        {
            return View();
        }
    }
}

These are the 2 action methods. Now I will create only one View for both of these action methods. To do this I will create a new View inside the ‘Views/Shared’ folder and simple name it ‘CallSharedView’. In this way this will be shared by these 2 actions.

So create ‘CallSharedView’ inside the ‘Views/Shared’ folder having the code shown below:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CallSharedView</title>
</head>
<body>
    <h1>Displaying from Shared View</h1>
</body>
</html>

Run your application and go to the following URL to invoke these 2 actions:

1. http://localhost:63657/Home/CallSharedView
2. http://localhost:63657/Example/CallSharedView

In both of these URL you will find the shared view getting invoked, as shown in the image below:

shared view

I previously explained the different types of View() methods that tell MVC to render a particular View. The question arises how MVC searches the View file? The answer for this is MVC looks for the following 2 locations:

/Views/<ControllerName>/<ViewName>.cshtml
/Views/Shared/<ViewName>.cshtml

For example consider the following Action method ‘List’ inside the Admin folder:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using UnderstandingControllers.Models;

namespace UnderstandingControllers.Controllers
{
    public class AdminController : Controller
    {
        public IActionResult List()
        {
    	     return View();
        }
    }
}

In the last line of the ‘List’ action method I am telling MVC to return and render a View. Now MVC starts the search for finding the View files. It starts by looking in 2 locations:

1. /Views/Admin/List.cshtml => If it finds the file then it renders the View file. If not, then the below location is searched.
2. /Views/Shared/List.cshtml => If it finds the file then it renders the View file. If not then ‘View not found’ error is shown in the browser.

If the Controller is the part of an Area then the following 3 locations are searched:

/Areas/<AreaName>/Views/<ControllerName>/<ViewName>.cshtml
/Areas/<AreaName>/Views/Shared/<ViewName>.cshtml
/Views/Shared/<ViewName>.cshtml

For example consider the given ‘List’ Action’s code which lies in the Admin controller of ‘Sales’ Area.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using URLRouting.Areas.Sales.Models;

namespace UnderstandingControllers.Areas.Sales.Controllers
{
    [Area("Sales")]
    public class AdminController : Controller
    {
        public IActionResult List()
        {
            return View("Show");
        }
    }
}

When the action returns the MVC will search the View in the following way:

1. /Areas/Sales/Views/Admin/Show.cshtml => If it finds the file then it renders the View file. If not, then the below location is searched.
2. /Areas/Sales/Views/Shared/Show.cshtml => If it finds the file then it renders the View file. If not, then the below location is searched.
3. /Views/Shared/Show.cshtml => If it finds the file then it renders the View file. If not then ‘View not found’ error is shown in the browser.

You can also give the full path of the View file. In the following View() method I have told MVC my View file’s location as – /Views/Customer/List.cshtml.

public ViewResult List() {
    return View("/Views/Customer/List");
}

MVC View Layout Page ‘_Layout.cshtml’

An application may contain common parts in the UI that remains the same throughout the application such as the logo, header, left navigation bar, right bar or footer section. ASP.NET Core MVC has a Layout view provided by the ‘_Layout.cshtml’ file. It contains common UI parts, so that we don’t have to write the same code in every page.

The Layout View resides inside the ‘Views/Shared’ folder.

Right click on the Shared folder and select ‘Add New Item’. Then select the MVC View Layout Page from the item list and click the ‘Add’ button. Check the below image that tells this:

mvc view layout page

The _Layout.cshtml will create and open in Visual Studio. It will have the following code as shown below:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

It is just an HTML page with few Razor blocks like @ViewBag.Title which puts the title from ViewBag variable, and @RenderBody() which renders all the content of child view which is not wrapped in a section. I will tell you about section in just a moment but before that let’s understand how layout works.

Next, you need to configure the application so that the _Layout.cshtml file is applied by default. This is done by adding an MVC View Start Page file called _ViewStart.cshtml to the Views folder. The contents of the _ViewStart.cshtml file is given below. You can see it specifies the Layout to select for all Views of the application by default.

@{
    Layout = "_Layout";
}

If you do not want a child view to have any layout file applied to it then add @{ Layout = null; } on the Child View.

Now add a new Action to the ‘Home’ Controller and name it ‘TestLayout’. Its code is given below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using UnderstandingControllers.Models;

namespace UnderstandingControllers.Controllers
{
    public class HomeController : Controller
    {
        // Removed for clarity

        public IActionResult TestLayout()
        {
            ViewBag.Title = "Welcome to TestLayout";
            return View();
        }
    }
}

In the Action I am setting the ViewBag.Title variable to a string ‘Welcome to TestLayout’. The layout will read this value and show it in the page title.

Also add the ‘TestLayout’ view inside the ‘Views ➤ Home’ folder with code given below:

<h2>TestLayout starts here</h2>
<p>This text is coming from child view</p>

Notice there is no @{ Layout = null; } on this view. So MVC knows it is a child view and _Layout.cshtml should be applied to it.

The View has a h2 tag (‘TestLayout starts here’) and paragraph with text – ‘This text is coming from child view’. The layout file will render these 2 tags where the @RenderBody() code is.

See how the ‘TestLayout’ View is rendered on the browser by running your application and going to the URL – ‘/Home/TestLayout’. The below image shows it:

layout

Sections inside Layout

Sections help to insert content of child views inside the layout at specified locations. Sections are defined using the @Section razor express followed by the name of the section in the View.

I have added 3 sections (‘Top’, ‘Script’ and ‘Bottom’) to the ‘TestLayout’ View as shown below:

@section Top {
    This is Top
}

<h2>TestLayout starts here</h2>

<p>This text is coming from child view</p>

@section Script {
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
}

@section Bottom {
    This is Bottom
}

Now on your Layout file, to render these sections, use the razor expression @RenderSection. See the updated code of the _Layout.cshtml file:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    @RenderSection("Top")

    <div>
        @RenderBody()
    </div>

    @RenderSection("Bottom")

    @RenderSection("Script")
</body>
</html>

Once you go to the ‘/Home/TestLayout’ URL, you will find the display as shown in the image below:

sections in layout

Clearly you will see the parts of the child View that are contained in the ‘Top’ section comes first followed by ‘parts of the child View that are not contained within any section (these are inserted by the @RenderBody() helper)’, then you will get the ‘Bottom’ section’s contents and finally you will get the ‘Script’ section’s content which adds the jQuery script at the very end.

You can define as many sections you want. But remember that it is necessary to defines all sections in the child view for which there is a @RenderBody() in the layout, failing to do so results in an error.

Optional Sections

Suppose I add another section ‘Ads’ to the layout file:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    @RenderSection("Top")

    <div>
        @RenderBody()
    </div>

    @RenderSection("Bottom")

    @RenderSection("Ads")

    @RenderSection("Script")
</body>
</html>

Do not define this section in the ‘TestLayout’ View and reload your page. You will see an unhandled exception saying – InvalidOperationException: The layout page ‘/Views/Shared/_Layout.cshtml’ cannot find the section ‘Ads’ in the content page ‘/Views/Home/TestLayout.cshtml’.

error due to missing section

ASP.NET CORE MVC says that you should define a section in your child View if your layout page has the @RenderSection helper for that section.

If you still want your child view to “not” have this section then you can make that section in the layout page as Optional Section. With optional section ASP.NET Core MVC will not give you error even if that section is missing from the child view.

Simply pass false as the second argument to the @RenderSection helper method to make a section as optional.

So go to your Layout page and change @RenderSection(“Ads”) to @RenderSection(“Ads”,false) and that will make this section optional.

Rerun your application and this time everything will work perfectly.

Inline Code in a View

You can even put inline codes in your View to self-contained pieces of view logic, such as if and foreach statements.

Example: Adding inline if-else block in the view:

@if (DateTime.Now.DayOfWeek == DayOfWeek.Monday)
{
    <p>It's a Boring Day</p>
}
else
{
    <p>It's a Party Day</p>
}

You can also have block of codes in your View such as:

@{
    string[] countries = new string[] { "England", "France", "Germany", "China" };
    <ul>
        @foreach (string country in countries)
        {
            <li>@country</li>
        }
    </ul>
}

Partial Views

Partial Views are separate View files whose content can be included in other Views. If your view has content that is repeated again and again then you can put that content in a partial view file and include that content from the partial view. This way you can prevent code duplication.

Creating and using Partial View

Partial Views are regular .cshtml files and differentiate with regular views only on the job which they do. Let us create a partial View inside the ‘Views/Home’ folder.

Right click the folder ‘Views ➤ Home’ folder and select ‘Add ➤ View’. Give it the name ‘TestPartialView’ and click the ‘Add’ button to create it.

Add the following code to it:

<div style="color:red">This is partial View</div>

Now to apply this Partial View inside another View we use the Razor expression @Html.Partial. So go to the ‘TestLayout’ View (inside ‘Views/Home’ folder) and call the partial view by adding the express – @Html.Partial(“TestPartialView”).

Notice I passed the name of the Partial View to the @Html.Partial() expression

This is shown in the highlighted code below:

@section Top {
    This is Top
}

<h2>TestLayout starts here</h2>
<p>This text is coming from child view</p>

@Html.Partial("TestPartialView")

@section Script {
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
}


@section Bottom {
    This is Bottom
}

Run the application and go to the URL – ‘/Home/TestLayout’. You will find the content of the partial view (in red color) added to the View. This is shown by the image below:

partial view

ASP.NET Core MVC looks for Partial View in the same way like Regular Views (in Views/ and Views/ folders). This means you can create controller specific partial views in the Views/ folder or shared partial views inside the Views/ folder.

Strongly Typed Partial View

Strongly Typed Partial Views are used to carry data from Regular Views i.e. they have their own model.

Update the ‘TestPartialView.cshml’ file by including a model to it this will make it Strongly Typed Partial View. The updated code of it is given below:

@model List<string>
<div style="color:red">
    This is partial View:
    <ul>
        @foreach (string str in Model)
        {
            <li>@str</li>
        }
    </ul>
</div>

Notice this partial view has a model of type List and I am showing the model values inside the li tag by looping through all of them using foreach loop.

Now I have to call this partial view from the ‘TestLayout’ view by also providing the model value. This is done by using the 2nd parameter of @Html.Partial like shown below:

@Html.Partial("TestPartialView", new List<string> { "Classic ASP", "ASP.NET Web Forms", "ASP.NET MVC", "ASP.NET Core MVC" } 

So update the ‘TestLayout’ View code as shown below:

@section Top {
    This is Top
}

<h2>TestLayout starts here</h2>
<p>This text is coming from child view</p>

@Html.Partial("TestPartialView", new List<string> { "Classic ASP", "ASP.NET Web Forms", "ASP.NET MVC", "ASP.NET Core MVC" })

@section Script {
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
}

@section Bottom {
    This is Bottom
}

Reload the page (‘Home/TestLayout’) to see the Partial View and its content as shown in the image below:

strongly typed partial view

View Components

View Components are a C #class that can be called from a View and supports them by providing them with data. View Component helps in embedding complex contents in Views. Some examples where you can use View Components are:

1. Authentication Panels in sites from where users can log in without visiting a separate page.
2. Creating dynamic site navigation system which changes according to the user role.
3. Shopping Cart panels which shows the products currently in the cart.

Creating a View Component

View Components are just C# classes that derive from the ViewComponent class (defined in the Microsoft.AspNetCore.Mvc namespace).

The View Component Class must have an Invoke() method that returns some form of data to the View.

The View Component class can be created anywhere in the application but according to conventions they should be created inside the ‘Components’ folder which should resides on the root folder of the application.

So right click on the project file and select ‘Add ➤ New Folder’ then name that folder ‘Components’. Create a class inside this folder and name it ‘Cart.cs’. Derive this class from ‘ViewComponent’ base class and add an ‘Invoke’ method. The full code is given below:

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

namespace UnderstandingControllers.Components
{
    public class Cart : ViewComponent
    {
        public string Invoke()
        {
            return "This is from View Component";
        }
    }
}

To invoke the View Component from a View use the Razor expression @await Component.InvokeAsync(“NameofViewComponent”) which will call the Invoke method of the View Component.

So go to the _Layout.cshtml file and add @await Component.InvokeAsync(“Cart”) to it as shown in the code below:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    @RenderSection("Top")

    <div style="color: blue;border: 1px solid #b6ff00">
        @await Component.InvokeAsync("Cart")
    </div>

    <div>
        @RenderBody()
    </div>

    @RenderSection("Bottom")

    @RenderSection("Ads", false)

    @RenderSection("Script")
</body>
</html>

Now test it by running your application and go to the URL – ‘/Home/TestLayout’. You will see the returned string from the invoke method being displayed. See the image shown below:

view component returns string

Return Types of View Components

In the previous section I have shown View Components that returns a string. View Components are very powerful and to see its strength, return IViewComponentResult interface from the ‘Invoke’ method.

Three built-in classes implement the IViewComponentResult interface and you can use them in your Invoke method to return string, html and partial view.

These classes are:

Name Description
ContentViewComponentResult Is is used to return encoded HTML. Eg Content(“<h2>some text</h2>”)
HtmlContentViewComponentResult It is used to return HTML without encoding. Eg HtmlContentViewComponentResult(“<h2>some text</h2>”)
ViewViewComponentResult It is used to return a Partial View with optional view model data. Eg View(“NameofView”)

View Component Returning ContentViewComponentResult

The ContentViewComponentResult class is used for returning encoded HTML from View Components. Instances of the ContentViewComponentResult class are created using the Content method (which is inherited from the ViewComponent base class).

Let me demonstrate this. Change the ‘Cart’ View Component you made in the previous section like as shown below.

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

namespace UnderstandingControllers.Components
{
    public class Cart : ViewComponent
    {
        public IViewComponentResult Invoke()
        {
            return Content("This is from <h2>View Component</h2>");
        }
    }
}

I changed the Return type of Invoke method to IViewComponentResult interface.

To return the encoded HTML I have used the ‘Content()’ method like:

Content("This is from <h2>View Component</h2>")

Run your application and go to URL – ‘Home/TestLayout’. You will see the encoded html displayed as shown in the image below:

view component returning encoded html

If you check the page source you will find the HTML is encoded by the Content method like:

This is from &lt;h2&gt;View Component&lt;/h2&gt;

The encoding of HTML is done by ASP.NET Core MVC for safety purpose and this prevent hackers from adding unwanted scripts to the website.

View Component Returning HtmlContentViewComponentResult

The HtmlContentViewComponentResult class is used for returning “non-encoded HTML” from View Components.

The HtmlContentViewComponentResult class resides inside the Microsoft.AspNetCore.Mvc.ViewComponents namespace.

Change the ‘Cart’ View Component so that it returns a new instance of ‘HtmlContentViewComponentResult’ class. This is shown in the code below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.ViewComponents;

namespace UnderstandingControllers.Components
{
    public class Cart : ViewComponent
    {
        public IViewComponentResult Invoke()
        {
            return new HtmlContentViewComponentResult(new HtmlString("This is from <h2>View Component</h2>"));
        }
    }
}

Run your application and go to the URL – ‘/Home/Testlayout’. You will see the HTML this time is rendered on the browser as shown in the below image:

view component returning non encoded html

Use this method when your are 100% sure that your return output will be safe and will not be tampered.

View Component Returning Partial View

You can also return a Partial View from your View Component. The ViewViewComponentResult class tells ASP.NET Core MVC to render the Partial View and include the result in the parent view. The ‘ViewComponent’ base class provides the View() method for creating ‘ViewViewComponentResult’ class objects.

There are 4 versions of the View method:

View(); // selects default partial view
View(model); // selects default partial view and provides model to it
View("viewname"); // selects a partial view by its name
View("viewname ", model); // selects a partial view by its name and provides model to it. 

Here MVC will look for the following locations to find the Partial View:

/Views/{controller}/Components/{view component}/{partial view name}
/Views/Shared/Components/{view component}/{partial view name}

The controller is the one that handles the HTTP request.

If you don’t specify the view name in the View() method then {partial view name} is taken as Default.cshtml.

Let us understand it by creating a View Component that returns a Partial View.

Create a model class ‘Product.cs’ inside the Models folder with the content as given below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace UnderstandingControllers.Models
{
    public class Product
    {
        public string name { get; set; }
        public int price { get; set; }
    }
}

Now update your Cart model code to return a View with an array of products as model.

using Microsoft.AspNetCore.Mvc;
using UnderstandingControllers.Models;

namespace UnderstandingControllers.Components
{
    public class Cart : ViewComponent
    {
        public IViewComponentResult Invoke()
        {
            Product[] products = new Product[] {
                new Product() { name = "Women Shoes", price = 99 },
                new Product() { name = "Mens Shirts", price = 59 },
                new Product() { name = "Children Belts", price = 19 },
                new Product() { name = "Girls Socks", price = 9 }
            };

            return View(products);
        }
    }
}

Run your application and go to URL – ‘/Home/Testlayout’. You will find an error stating that:

The view ‘Components/Cart/Default’ was not found. The following locations were searched:

/Views/Home/Components/Cart/Default.cshtml
/Views/Shared/Components/Cart/Default.cshtml

You can see the controller handling the HTTP request is ‘HomeController’ (the URL has ‘Home’ for the controller segment), and I did not specify the Partial View name in the View() method.

So MVC searches the Default Partial View (Default.cshtml) in the 2 locations:

1. /Views/Home/Components/Cart/Default.cshtml
2. /Views/Shared/Components/Cart/Default.cshtml

The final step is to create this partial view. So go to the folder ‘/Views/Home/Components/Cart/’ and create a View file ‘Default.cshtml’.

Add the following code lines to it:

@model Product[]
<table style="width:50%">
    <tr>
        <td><u>Product Name</u></td>
        <td><u>Price</u></td>
    </tr>
    @{
        foreach (Product p in Model)
        {
            <tr>
                <td>@p.name</td>
                <td>@p.price</td>
            </tr>
        }
    }
</table>

Now again re-run your application and go to URL – ‘/Home/Testlayout’. This time you will find the partial view included in the layout. See the image below:

view component returning partial view

You can access all the properties like Request, ViewBag, RouteData inside the View Component just like Controllerrs. Eg use this code – string target = RouteData.Values[“id”] as string; inside the View Component will get your the value of Id segment of the route.

Providing values to a View Component from Parent View

You can also provide any value to the View Component from the Parent View. This is done by passing an anonymous object to the 2nd argument of the @await Component.InvokeAsync() method.

Go to your layout file and change the InvokeAsync by passing it a ‘false’ value to a variable ‘showCart’ like this:

@await Component.InvokeAsync("Cart", new { showCart = false })

Now change your Cart View Component code by adding the ‘showCart’ parameter to the Invoke method as shown in the code below:

public class Cart : ViewComponent
{
    public IViewComponentResult Invoke(bool showCart)
    {
        Product[] products;
        if (showCart)
        {
            products = new Product[] {
                new Product() { name = "Women Shoes", price = 99 },
                new Product() { name = "Mens Shirts", price = 59 },
                new Product() { name = "Children Belts", price = 19 },
                new Product() { name = "Girls Socks", price = 9 }
            };
        }
        else
        {
            products = new Product[] { };
        }

        return View(products);
    }
}

Only when the ‘showCart’ variable is true the cart will show products.

Run your application and this time you will not get any product shown to you. See the image below:

passing value to view component from parent

Asynchronous View Component

So for in the above examples I have used synchronous view components. There is also Asynchronous View Component that can be used to do Asynchronous works.

The Asynchronous View Component has an InvokeAsync() method that returns a task. The MVC will wait for the task to complete and then insert the result in the parent view.

First you need to include the System.Net.Http package in your project for making your application to make Asynchronous HTTP requests.

Right click on your project name in Solution Explorer and select ‘Edit .csproj’ and add the line as shown in the code below:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <Folder Include="wwwroot\" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.5" />
    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.0.2" />
    <PackageReference Include="System.Net.Http" Version="4.3.2" />
  </ItemGroup>

</Project>

Now you are ready to create an Asynchronous View Component. This Asynchronous View Component is going to provide me the page size of a web page.

So right click on the components folder and add a new class ‘PageSize.cs’. Add the following contents to it:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using System.Net.Http;

namespace UnderstandingControllers.Components
{
    public class PageSize : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync()
        {
            HttpClient client = new HttpClient();
            HttpResponseMessage response = await client.GetAsync("http://www.msn.com");
            return View(response.Content.Headers.ContentLength);
        }
    }
}

The View Component will get the page size of MSN page asynchronously through the GET response and then passes the size to the default view.

Now create a View file ‘Default.cshtml’ inside the ‘View/Home/Components/PageSize’ folder. Add the following code to this file:

@model long
<div>Page size: @Model</div>

Now finally to call this Asynchronous View component in your layout file add the following code:

<div>
    @await Component.InvokeAsync("PageSize")
</div>

Run your application and go to the URL – ‘/Home/Testlayout’. You will see the page size of the MSN page added to it. See the image below:

asynchronous view component

You can download the full codes of this tutorial from the below link:

Download

Conclusion

Controller, Actions and Views are an important component of ASP.NET Core MVC framework and I am hopeful that this tutorial will help you to understand all about them.

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.