Asp .NetCore-View Component

How Does View Component Work in ASP DOTNET Core MVC?

Invocation: View Components can be invoked from a view by calling the Component.InvokeAsync method, Execution: When invoked, the runtime finds the corresponding View Component class and executes its Invoke or InvokeAsync method. Rendering: After the Invoke or InvokeAsync method is executed, the framework renders the View Component’s view, passing it into the model.

View Components uses

Complex Data Display: When you need to display data that requires fetching from multiple sources or involves complex logic,

Reusable Components: Examples include navigation menus, user profile summaries, or product listings.

Dynamic Content: offer a flexible way to inject content into your views.

Decoupling Logic from Views: By moving complex logic from your views into Loading Data Independently: View Components can execute their own logic to load data, making them useful for scenarios where a section of your page needs to display data that isn’t directly related to the main action’s view model.

Improving Performance: Since View Components are independent and can be invoked asynchronously, they are a good choice for optimizing the loading time of your pages.

View component methods

A view component defines its logic in an:

InvokeAsync method that returns Task. Invoke synchronous method that returns an IViewComponentResult.

Parameters come directly from invocation of the view component, not from model binding. A view component never directly handles a request. Typically, a view component initializes a model and passes it to a view by calling the View method. In summary, view component methods:

View search path

The runtime searches for the view in the following paths:

/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} /Areas/{Area Name}/Views/Shared/Components/{View Component Name}/{View Name}

The search path applies to projects using controllers + views and Razor Pages.

The default view name for a view component is Default, which means view files will typically be named Default.cshtml. .

We recommend naming the view file Default.cshtml and using the Views/Shared/Components/{View Component Name}/{View Name} path.

The view component class

A view component class can be created by any of the following:

Deriving from ViewComponent Decorating a class with the [ViewComponent] attribute,

Deriving from a class with the [ViewComponent] attribute

Creating a class where the name ends with the suffix 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. It can also be explicitly specified using the Name property.

A view component class:

Supports constructor dependency injection Doesn't take part in the controller lifecycle, therefore filters can't be used in a view component

To prevent a class that has a case-insensitive ViewComponent suffix from being treated as a view component, decorate the class with the [NonViewComponent] attribute: View components

Use cases of View components :

Dynamic navigation menus Tag cloud, where it queries the database

Sign in panel

Shopping cart

Recently published articles Sidebar content on a blog

A sign in panel that would be rendered on every page and show either the links to sign out or sign in, depending on the sign in state of the user

A view component consists of two parts:

Class and View

The class, derived from ViewComponent

The result it returns, typically a view.

 public class TopBooksViewComponent : ViewComponent
    {

        public async Task<IViewComponentResult> InvokeAsync(int count)
        {

            BookRepository bookRepository = new BookRepository();
            var books = await bookRepository.GetTopBooksAsync(count);
            return View(books);
        }


        }