ASP.NET Core: Create and invoke View Component with example

Note some information for you know that the view component in asp.net core will be used a lot in web programming, such as blog quizdeveloper.com it was made by many view components. So it is very necessary to program websites for better. Okay, let’s go now. 

1. What is the View Component in Asp.Net Core?

The view component is a new feature in Asp.net Core, it looks like the partial view in asp.net framework MVC but it is stronger and more powerful. View component separate view and business code to different other files to management. ViewComponents are completely self-contained objects that consistently render Html from a razor view. View components don't use model binding and only depend on the data provided when calling into it.

A View Component has some features below:

• Separate Html and logic code.
• Support invoke async help load page faster.
• Separate code helps make unit tests easy.
• Renders a chunk rather than a whole response.
• Fully supports constructor dependency injection.

2. When do we need to use the View Component?

As we can understand, a page can be made by many view components, we can separate the view component by content type, layout page such as navigation, content detail, box highlight, aside right box, footer….

From my experience, I usually create the view component on the front end page for the purpose display information. I'm not using the view component for some page collect information such as login, register, contact pages ...

3. How to create and import View Components?

Note that, setup environment is for Asp.net Core 2.0 to above.

3.1. View Component class naming conventions

A class view component has some feature that can be seen below:

- The name of the class always ends with the suffix "ViewComponent".

- It is inherited from the "ViewComponent" class.

- It can implement another class that inherits from "ViewComponent".

Like controllers, view components must be public, non-nested, and non-abstract classes. The view component name is the class name with the "ViewComponent" suffix removed.

Look an example:

public class HeaderViewComponent : ViewComponent
{
  public HeaderViewComponent()
  {
  }
}

3.2. View Component Invoke methods

The view component supports two methods to call a view component is Invoke and InvokeAsync. 
Invoke method will call synchronous and return an IViewComponentResult and InvokeAsync method call asynchronous and returns a Task<IViewComponentResult>  

+ Invoke Asynchronously: Example of a View Component that uses the InvokeAsync method.

public class HeaderViewComponent : ViewComponent
{
  public async Task<IViewComponentResult> InvokeAsync()
  {
    return View();
  }
}

Or InvokeAsync() method with parameters

public class HeaderViewComponent : ViewComponent
{
  public async Task<IViewComponentResult> InvokeAsync(int param1, string param2,.....)
  {
    // Todo sothing here
    return View();
  }
}

+ Invoke Synchronously: Example of a View Component that uses the Invoke method.

public class HeaderViewComponent : ViewComponent
{
  public IViewComponentResult Invoke()
  {
    return View();
  }
}

Or Invoke() method with parameters.

public class HeaderViewComponent : ViewComponent
{
  public IViewComponentResult Invoke(int param1, string param2,.....)
  {
    // Todo sothing here
    return View();
  }
}

About position to contain a class ViewComponent, you can create Components folder the same level with Controllers folder. You can see an example inside of the image below to get more understanding:

3.3 Razor view for ViewComponent

Position to store razor view we have three ways as below:

• /Views/{Controller Name}/Components/{View Component Name}/{View Name}
• /Views/Shared/Components/{View Component Name}/{View Name}
• /Pages/Shared/Components/{View Component Name}/{View Name}

The default view name for a view component is Default, which means your view file will typically be named Default.cshtml. You can specify a different view name when creating the view component result or when calling the View method.

There is a common view component, such as menu, footer, ads… It does not have a controller, we will create it inside Views/Shared/Components/{component name}. You can see the image as below:

And if you have a controller and you want to create some view component for it, you can make razor view as below:
Views/{Controller Name}/Components/{View Component Name}

Returning a specific view: You can define any razor view name instead of using the default name.

public async Task<IViewComponentResult> InvokeAsync()
{
  // Code logic here
  return View("Header");
}

And razor view name has to same as the return view in  InvokeAsync() method:

Import a View Component: Syntax to import a View component to a page or other view  component as below:

@await Component.InvokeAsync("View component name")
OR
@await Component.InvokeAsync("View component name", new { parameter = value,... })

Look an example below:

@await Component.InvokeAsync("LatestNew", new { take = 10, orderBy = Const.Desc })

3.4. Make an example

Okay, now we will create a view component to display a list of popular news on the home page with 12 items. Code step by step as below:

Step 1: Create a class view component.

We will create a component with the name *PopularNews* look like the image below:

And below is code business to return data for razor view of View component class :

public class PopularNewsViewComponent : ViewComponent
{
    public IViewComponentResult Invoke()
    {
        List<NewModel> newModels = new List<NewModel>();
        for (int i = 1; i <= 12; i++)
        {
            newModels.Add(new NewModel()
            {
                Title = string.Format("This is title of article {0}", i),
                Image = string.Format("../images/{0}.jpg", i)
            });
        }
        return View(newModels);
    }
}

In that: NewModel is an object that contains some information about News such as title, sapo, image…

Step 2: Create a razor view 

I will create a razor view component inside Home view controller, you can create inside of Shared/Components, it’s also okay. 

And below is code to display data of razor view:

@model List<NewModel>
@if(Model != null && Model.Any())
{
    <h1>Popular News</h1>
    <ul class="popular-news">
        @foreach(var news in Model)
        {
            <li>
                <a>
                    <figure class="img">
                        <img src="@news.Image" alt="@news.Title" />
                    </figure>
                    <div class="title">
                        <h2 title="@news.Title">@news.Title</h2>
                    </div>
                </a>
            </li>
        }
    </ul>
}

Step 3: Invoke view component to page view

Now I want to import PorpularNews view component to Home page, I can code as below:

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome Home Page</h1>
</div>

@await Component.InvokeAsync("PopularNews")

Everything is done, now we can run the application and see the result:

4. Call Asp.net Core View Components with javascript ajax.

We can not call ajax directly to a view component. We have to call it through the action of a controller. In Asp.net core has support ViewComponentResult to help an action can return a view component. Let see an example below:

[HttpGet]
public IActionResult GetTopMessage()
{
    return ViewComponent("CallAjax");
}

In that: CallAjax is the name of the view component.

If the component has accepted more parameters you can do as below:

[HttpGet]
public IActionResult GetTopMessage(int param1 ….)
{
    return ViewComponent("CallAjax", new {param1 = value, ... });
}

Okay, now ajax can call to action GetTopMessage to get value:

$("#btnCallAjax").click(function () {
    $.ajax({
        url: "../Home/GetTopMessage",
        type: "get",
        dataType: "html",
        beforeSend: function (x) {
        },
        data: null,
        success: function (result) {
            $(".view-component-ajax .content").html(result);
        }
    });
});

And you can see the result below:

5. Summary

In this article, I just guide you on how to create and invoke view component in Asp.net Core and I hope you can apply it to your website to make it better.

If you have any questions please leave a comment below for me.

You can refer to the source code here.

Happy code.