- A View Component implementation follows a naming convention, demonstrated below.
- Assuming to have two View Components named "Foo" and "Bar"
- Each View Component has two parts - Code and View
/Domain.cs // contains Domain models used by View Components
/Services/ // Services used by View Components
IXyzService.cs // Service Interface
XyzService.cs // Implementation of the Service
/ViewComponents/ // contains all View Components' Code files
FooViewComponent.cs // "Foo" View Component (IXyzService is injected), the "Code" part
BarViewComponent.cs // "Bar" View Component (IXyzService is injected), the "Code" part
// In the end, the "Code" part will return a "ViewComponent.View",
// and we specify for which View Component the View is intended
// by passing the name of the View Component, in this case, "Foo"
// or "Bar". eg: return View("Foo");
/Pages/
_ViewImports.cshtml // include View Components as tag helpers
// eg: @addTagHelper: *, ViewCompDemo <<< the project name
Components/
Foo/default.cshtml // "View" part of the Foo View Component
Bar/default.cshtml // "View" part of the Bar View Component
Shared/_Layout.cshtml // Example of View Component usage
/Startup.cs // Setup the IOC container for XyzService, ready to be injected
// into View Component's Code
// eg:
// services.AddTransient<IXyzService, XyzService>();
-
Directly calls Component's Invoke/Async("[Component-Name"], arg1 = "value1", arg2="value2"...);
@await Component.InvokeAsync("Foo"); @await Component.InvokeAsync("Bar", new Random().Next(1, 10));
-
Uses a View Component as a tag helper
<vc:foo></vc:foo> <vc:bar id="new Random().Next(1,10)"></vc:bar>
-
A View Component is much like a Partial View.
-
A View Component is self contained with Code and View parts.
-
A View Component is a way to separate of concerns, not depending on controller, and testable.
-
A Partial View uses Single File Approach, with needed models are injected into it.
-
Using a View Component can
-
callView Component's Invoke/Async(...);
Invoke/Async("[Component-Name"], arg1 = "value1", arg2="value2"...);
-
use View Component as tag helper
<vc:[view-component-name] arg1="value1" arg2="value2"></vc:[view-component-name]>
-
-
Using a Partial View by using the
<partial>
tag helper<partial name="_LoginPartial"/> or @Html.Partial("_LoginPartial")