View Components
Create a View Component
View components encapsulate reusable pieces of logic and views. They are defined by:
- A ViewComponent class containing the logic for fetching and preparing the data for the view and deciding which view to render.
- One or more views
Since they contain logic, they are more flexible than partial views while still promoting a good separation of concerns.
A simple custom view component is defined as:
public class MyCustomViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync(string param1, int param2)
{
//some business logic
//renders ~/Views/Shared/Components/MyCustom/Default.cshtml
return View(new MyCustomModel{ ... });
}
}
@*View file located in ~/Views/Shared/Components/MyCustom/Default.cshtml*@
@model WebApplication1.Models.MyCustomModel
<p>Hello @Model.UserName!</p>
They can be invoked from any view (or even a controller by returning a ViewComponentResult
)
@await Component.InvokeAsync("MyCustom", new {param1 = "foo", param2 = 42})
Login View Component
The default project template creates a partial view _LoginPartial.cshtml which contains a bit of logic for finding out whether the user is logged in or not and find out its user name.
Since a view component might be a better fit (as there is logic involved and even 2 services injected) the following example shows how to convert the LoginPartial into a view component.
View Component class
public class LoginViewComponent : ViewComponent
{
private readonly SignInManager<ApplicationUser> signInManager;
private readonly UserManager<ApplicationUser> userManager;
public LoginViewComponent(SignInManager<ApplicationUser> signInManager, UserManager<ApplicationUser> userManager)
{
this.signInManager = signInManager;
this.userManager = userManager;
}
public async Task<IViewComponentResult> InvokeAsync()
{
if (signInManager.IsSignedIn(this.User as ClaimsPrincipal))
{
return View("SignedIn", await userManager.GetUserAsync(this.User as ClaimsPrincipal));
}
return View("SignedOut");
}
}
SignedIn view (in ~/Views/Shared/Components/Login/SignedIn.cshtml)
@model WebApplication1.Models.ApplicationUser
<form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>
<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">Hello @Model.UserName!</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link">Log off</button>
</li>
</ul>
</form>
SignedOut view (in ~/Views/Shared/Components/Login/SignedOut.cshtml)
<ul class="nav navbar-nav navbar-right">
<li><a asp-area="" asp-controller="Account" asp-action="Register">Register</a></li>
<li><a asp-area="" asp-controller="Account" asp-action="Login">Log in</a></li>
</ul>
Invocation from _Layout.cshtml
@await Component.InvokeAsync("Login")
Return from Controller Action
When inheriting from base Controller
class provided by the framework, you can use the convenience method ViewComponent()
to return a view component from the action:
public IActionResult GetMyComponent()
{
return ViewComponent("Login", new { param1 = "foo", param2 = 42 });
}
If using a POCO class as a controller, you can manually create an instance of the ViewComponentResult
class. This would be equivalent to the code above:
public IActionResult GetMyComponent()
{
return new ViewComponentResult
{
ViewComponentName = "Login",
Arguments = new { param1 = "foo", param2 = 42 }
};
}