How to use ViewComponent in ASP. NET Core
- 2021-11-29 06:43:01
- OfStack
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 ViewComponentNote 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 form
0
Specifies that the assembly containing the component is registered, and the component is located in the
web form
1
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!