Interpretation of ASP. NET 5 MVC6 Series Tutorials (14): View Component

In the previous MVC, we often needed functions similar to one widget. Usually, we used Partial View to implement it, because there was no function similar to WebControl in Web Forms in MVC. However, in MVC6, this 1 function has been greatly improved. In the new version of MVC6, a function called View Component is provided.

You can think of View Component as an Controller of mini-it is only responsible for rendering a small part of the content, not all the responses. You can use View Component to solve all the problems that Partial View can solve, such as dynamic navigation menu, Tag tab, login window, shopping cart, recent reading articles and so on.

View Component consists of two parts, one part is the class (inherited from ViewComponent), and the other part is the Razor view (like the ordinary View view 1). Just like Controller1 in the new version of MVC, ViewComponent can also make POCO's (that is, it does not inherit the ViewComponent class, but the class name ends with ViewComponent).

Creation of View Component

At present, there are three ways to create View Component classes:

Inherit directly from ViewComponent to add the ViewComponent attribute to the class, or inherit from the class with ViewComponent attribute to create a class with the class name ending in ViewComponent

Like Controller1, View Component must be public, cannot be nested, and cannot be an abstract class.

For example, we create an View Component with the class name TopListViewComponent and the following code:

public class TopListViewComponent : ViewComponent
{
 private readonly ApplicationDbContext db;

 public TopListViewComponent(ApplicationDbContext context)
 {
 db = context;
 }

 public IViewComponentResult Invoke(int categoryId, int topN)
 {
 List<string> col = new List<string>();
 var items = db.TodoItems.Where(x => x.IsDone == false &&
      x.categoryId == categoryId).Take(topN);

 return View(items);
 }
}

The above class can also be defined as follows:

[ViewComponent(Name = "TopList")]
public class TopWidget
{
 //  Others similar 
}

By defining an ViewComponent feature named TopList on the TopWidget class, its effect is similar to that of defining TopListViewComponent class 1, and the system will recognize it when searching, and prompt the type instance of parameters in the constructor through dependency injection function in its constructor.

Invoke method is a conventional method, which can pass in any number of parameters. The system also supports InvokeAsync method to realize asynchronous function.

View Component View File Creation

In order to ProductController Calling View Component in the view of, for example, we need to call View Component in Views\Product Folder to create a file named Components The folder name must be Components ).

And then in Views\Product\Components Folder to create a file named TopList The folder name must be the same as View Component name 1, that is, it must be TopList ).

In Views\Product\Components\TopList Folder, create 1 Default.cshtml View file and add the following tags:

@model IEnumerable<BookStore.Models.ProductItem>

<h3>Top Products</h3>
<ul>
 @foreach (var todo in Model)
 {
 <li>@todo.Title</li>
 }
</ul>

If no view name is specified in View Component, it defaults to Default.cshtml View.

At this point, the View Component is created, and you can call the View Component anywhere in the Views\ Product\ index.cshtml view, such as:

 <div class="col-md-4">
 @Component.Invoke("TopList", 1, 10) 
 </div>

If the asynchronous method InvokeAsync is defined in the above TopListViewComponent, you can use the Views\Product0 Method, the first parameter of both methods is the name of TopListViewComponent, and the remaining parameters are method parameters defined in the TopListViewComponent class.

Note: 1 In general, the view files for View Component are all added to the Views\ Shared folder, because 1 ViewComponent is not specific to an Controller in general.

Using custom view files

1 Generally speaking, if you want to use a custom file, you need to specify the name of the view when the Invoke method returns a return value, as shown below:

return View("TopN", items);

Then, you need to create 1 Views\Product\Components\TopN.cshtml File, but you don't need to change it when you use it, or you can specify the original View Component name, such as:

@await Component.InvokeAsync("TopList", 1, 10) // Take asynchronous invocation as an example 

Summarize

1 Generally speaking, it is recommended to use the functions of View Component on general functions, so that all view files can be placed in Views\Shared Folder.