Interpretation of ASP.net 5 & MVC6 Series Tutorial: View Component_ Self-study process

In previous MVC, we often needed features like a widget, which we usually use partial view, because there is no functionality in MVC that resembles the WebControl in Web Forms. But in the MVC6, this function has been greatly improved. In the new MVC6, a feature called View component is provided.

You can view component as a mini controller--it is only responsible for rendering a small part of the content, rather than the full response, all partial view can solve the problem, you can use view component to solve, For example: Dynamic navigation menu, tag tag, login window, shopping cart, recent reading articles and so on.

The view component contains 2 parts, one of which is the class (inherited from Viewcomponent), and the other is the Razor view (just like the normal view view). Like the controller in the new version of MVC, Viewcomponent can also make Poco (that is, the Viewcomponent class is not inherited, but the class name ends with Viewcomponent).

The creation of View component

Currently, the View component class is created in the following three ways:

Inherit directly from Viewcomponent class with Viewcomponent attribute, or inherit from class with Viewcomponent attribute to create a class with a class name ending Viewcomponent

Like controller, the View component must be public, not nested, and cannot be an abstract class.

For example, we create a view Component, the class name is Toplistviewcomponent, and the code is as follows:

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
{
 //other similar
}

By defining a viewcomponent feature named Toplist on the Topwidget class, the effect is the same as the definition Toplistviewcomponent class, which is recognized when the system is looking. And in its constructor, the type instance of the parameter in the constructor is prompted by dependency injection.

The Invoke method is a contract method that can pass in any number of parameters, and the system also supports the InvokeAsync method to implement the asynchronous function.

View component views File creation

As ProductController An example of calling view component in the views, we need to Views\Product create a folder under the folder Components (the folder name must be Components ).

Then Views\Product\Components create a folder under the folder name called TopList (the folder name must be the same as the view component name, which must be TopList ).

Views\Product\Components\TopListunder the folder, create a Default.cshtml view file and add the following markup:

@model ienumerable<bookstore.models.productitem>

 
 

If you do not specify a name for the view in component, the default is Default.cshtml view.

Now that the view Component is created, 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,) 
 </div>

If the asynchronous method InvokeAsync is defined in the above toplistviewcomponent, you can use the @await Component.InvokeAsync() method to invoke the first argument of both methods, which is the name of the toplistviewcomponent. The remaining parameters are the method parameters defined in the Toplistviewcomponent class.

Note: In general, view component views files are added to the Views\shared folder because Viewcomponent is generally not specific to a controller.

Using a custom view file

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

Return View ("TOPN", items);

Then you need to create a Views\Product\Components\TopN.cshtml file and use it without changing it, or you can specify the original view component name, such as:

@await Component.invokeasync ("Toplist", 1, 10)//As an example of an asynchronous call

Summarize

Generally, it is recommended that you use the View Component feature on common functionality so that all view files can be placed in the views\shared folder.