When a large number of pages call the same view result, we can encapsulate the same content into a view component, of course, we can also pass parameters to the view component and return the response result, scenarios: leaderboards, forms, tables, etc., this article uses asp.net core 3.1 to explain how to use the ViewComponent view component tutorial.
View components
The View component is similar to a local view, but more powerful. The view component does not use model bindings, but only relies on the data provided when the model is called. This article was written using controllers and views, but the view component can also be used with Razor Pages.
View Components:
- Render blocks instead of the entire response.
- Includes the same separation of concerns and testability benefits found between controllers and views.
- It can have parameters and business logic.
- Usually called from the layout page.
View components can be used anywhere you have reusable rendering logic that is too complex for a local view, such as:
- Dynamic navigation menu
- Tag cloud (where the database is queried)
- Login panel
- Shopping cart
- Recently published articles
- Sidebar content on a typical blog
- The login panel will appear on each page with a link to sign out or log in, depending on the user's login status
Partial view
In asp.net MVC 5 we can use a local view with the following code:
Call method:
ViewComponent is an alternative to local views.
ViewComponent to get started
View component class:
- Constructor dependency injection is fully supported
- Not involved in the controller's lifecycle, which means you can't use filters in view components
- Without further ado, let's get straight to the point where we want to encapsulate the component functionality of an urban area classification.
First, create a new "ViewComponents" folder under the project directory and create a new "RootClassification.cs" class file with the following code:
On the view page, we create a new "Components" folder under the "/Views/Shared" folder of the project, then create a new "RootClassification" folder (this is the object with the new component class we created), and then create a new "Default.cshtml" file, the code is as follows:
The structure is as follows:
The detailed path is: /Views/Shared/Components/RootClassification/Default.cshtml
Why build such a path? This has to do with how the asp.net Core component works.
The runtime searches for the view in the following path:
/Views/{Controller Name}/Components/{View Component Name}/{View Name}
/Views/Shared/Components/{View Component Name}/{View Name}
/Pages/Shared/Components/{View Component Name}/{View Name}
The default view name for the view component is Default, which means that your view file will usually be named Default.cshtml. When creating a view component result or calling a View method, you can specify a different view name.
Calling, we can call where we need to use the component, the code is as follows:
Rerun the project with the following rendering:
|
Posted on 2021-2-7 16:18:25
|
|
|
|
Posted on 2021-8-12 10:21:01
|
Landlord|
Posted on 2023-8-13 17:55:05
|
