Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "sample analysis of View Component in ASP.NET5 and MVC6", which is easy to understand and well-organized. I hope it can help you solve your doubts. Let the editor lead you to study and study the "sample analysis of View Component in ASP.NET5 and MVC6".

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

You can think of View Component as a Controller-- of mini, which 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.

ViewComponent consists of two parts, one is a class (inherited from ViewComponent), and the other is a Razor view (like a normal View view). Like Controller 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).

The creation of View Component

Currently, there are three ways to create a View Component class:

Directly inherits from ViewComponent to add a ViewComponent attribute to a class, or inherits from a class with a ViewComponent attribute to create a class whose name ends with ViewComponent

Like Controller, View Component must be public, not nested, or abstract.

For example, let's create a ViewComponent called TopListViewComponent with 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 col = new List (); var items = db.TodoItems.Where (x = > x.IsDone = = false & & x.categoryId = = categoryId) .Take (topN); return View (items);}}

The above classes can also be defined as follows:

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

By defining a ViewComponent property named TopList on the TopWidget class, the effect is the same as defining the TopListViewComponent class, the system will recognize it when looking for it, and prompt the type instance of the parameters in the constructor through dependency injection in its constructor.

The Invoke method is a conventional method, which can pass in any number of parameters, and the system also supports the InvokeAsync method to implement asynchronous functions.

View file creation for View Component

To call View Component in the view of ProductController, we need to create a folder named Components under the Views\ Product folder (the folder name must be Components).

Then create a folder named TopList under the Views\ Product\ Components folder (the folder name must be the same as the View Component name, that is, it must be TopList).

Under the Views\ Product\ Components\ TopList folder, create a Default.cshtml view file and add the following tag:

@ model IEnumerableTop Products @ foreach (var todo in Model) {@ todo.Title}

If you do not specify a name for the view in View Component, it defaults to the 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:

@ Component.Invoke ("TopList", 1,10)

If the asynchronous method InvokeAsync is defined in the above TopListViewComponent, you can use the @ await Component.InvokeAsync () method to call. The first parameter of both methods is the name of the TopListViewComponent, and the remaining parameters are the method parameters defined in the TopListViewComponent class.

Note: in general, the view files for ViewComponent are added in the Views\ Shared folder, because generally speaking, ViewComponent is not specific to a Controller.

Use Custom View Fil

In general, if you want to use a custom file, you need to specify the name of the view when the Invoke method returns a value, as shown in the following example:

Return View ("TopN", items)

Then, you need to create a Views\ Product\ Components\ TopN.cshtml file, and you don't need to change it when using it, but you can specify the original View Component name, for example:

@ await Component.InvokeAsync ("TopList", 1,10) / / take asynchronous calls as an example. These are all the contents of the article "sample Analysis of View Component in ASP.NET5 and MVC6". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.