How to use ViewComponent in ASP. NET Core

Preface to the table of contents Customize 1 component ViewComponent characteristics Taghelper mode Reference

Preface

In the previous development process, we usually used distributed pages (partial view) for applications or small components, and then we will apply them in Web Form WEB Control Okay, mention a key code TagPrefix：TagName Through this kind of mark, we can put it in our web form Of course, since. NET MVC, there have been no more components WebControl For. NET Core, there is another feature ViewComponent .

For ViewComponent It looks like a small controller, but for our small components or a small number of general-purpose functions, we can use the ViewComponent Carry out implementation, such as message bar, menu and so on.

ViewComponent Is made up of two parts, Part 1 is a class (which is usually integrated with ViewComponent) and Part 1 is a view (Razor and common View1-like), of course ViewComponent It also supports POCO and does not inherit ViewComponent But the class name is named after the ViewComponent End.

Customize 1 component

There are three ways to create an ViewComponent, as follows:

Inherited from ViewComponent Use the ViewComponent feature Create 1 class ending with ViewComponent

Note that View Component must be public (public), non-nested, non-abstract classes.

For View Component We have a basic understanding, and the following words create one ButtonViewComponent Example, for our reference:

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace ViewComponentDemo.ViewComponents
{
    public class ButtonViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync()
        {
            return View();
        }
    }
}

Call this component on the View page:

@await Component.InvokeAsync("Button")

For ViewComponent It is also with Controller 1, carry out view operation through our server features, or render, for example, we want to pass parameters below to modify our Button Style of:

We modify the original method under 1 and add 1 Enum type to select the style

@await Component.InvokeAsync("Button",ButtonType.Success)

 public async Task<IViewComponentResult> InvokeAsync(ButtonType type = ButtonType.Success)
 {
        ViewBag.Type = type;
        //return View("name",model);// Allow strong types 
        return View();
 }
 
    public enum ButtonType
    {
        Default,
        Primary,
        Success,
        Info,
        Warning,
        Danger,
        Link
    }

ViewComponent characteristics

Because in our view relational bindings, we rely more on named bindings, and when our component name is different from the class name, we can't search for the relevant view, of course, we may apply different kinds to it during the use Name In this case, we can use the ViewCompoentAttribute
Mark, in this way we can bind views, as follows:

    [ViewComponent(Name ="Button")]
    public class ButtonTest : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync(ButtonType type = ButtonType.Success)
        {
            ViewBag.Type = type;
            return View();
        }
    }

Although the above code ButtonTest The name of caused the view binding failure (Button cannot be used), and we added a tag to it and named Name as Button This makes up for the behavior we named "No 1".

Taghelper mode

Pass web form0 Specifies that the assembly containing the component is registered, and the component is located in the web form1 Assembly

@addTagHelper *, ViewComponentDemo

Remember that this method has a drawback, the parameters are not optional parameters, that is, you must display every parameter under the call 1, otherwise it will lead to no search.

<vc:button type="@ButtonType.Success"></vc:button>

In the code above, type is our method parameter.

Reference

Demo:https://github.com/hueifeng/BlogSample/tree/master/src/ViewComponentDemo

These are the details of how to use ViewComponent in ASP. NET Core. For more information about using ViewComponent in ASP. NET Core, please pay attention to other related articles on this site!