ViewComponent’s are pretty much like PartialView’s but slightly more useful. ViewComponent’s help in rendering part’s of a web page that can be re-used across the website. Also ViewComponent’s output can be cached. This blog article is going to discuss creating ViewComponent’s and caching example.
A ViewComponent is a public class that has a ViewComponent suffix such as HeaderViewComponent or MenuViewComponent etc… ViewComponent class can be decorated with [ViewComponent] attribute or can inherit from ViewComponent class or any other class that’s a ViewComponent. For example some kind of a BaseViewComponent.
ViewComponent must have one method that gets called.
async Task<IViewComponentResult> InvokeAsync()
or
IViewComponentResult Invoke()The runtime by default searches for the Views in the following locations:
The runtime searches for the view in the following paths:
- /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}
ViewComponent gets invoked from cshtml by using: Component.InvokeAsync()
The call to Component.InvokeAsync() can be wrapped inside <cache> tag helper for caching.
With the concepts discussed above, let’s look at a code sample. Assuming you have a ASP.Net MVC Core test project opened. Now add a new class and name the class TestViewComponent in TestViewComponent.cs.
using Microsoft.AspNetCore.Mvc;
namespace TestProject.ViewComponents
{
public class TestViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync()
{
return await Task.FromResult((IViewComponentResult)View("Test"));
}
}
}
Now under Views/Shared create a folder and name the folder Components. Under Views/Shared/Components, create another folder Test. Now, Views/Shared/Components/Test folder can contain views for the TestViewComponent. Create a new Test.cshtml under Views/Shared/Components/Test and put some random html content.
<p>Hello from TestViewComponent.</p>Now somewhere on Views/Home/Index.cshtml place the following invocation:
@(await Component.InvokeAsync("Test"))If you need to cache the output wrap the invocation inside <cache> tag helper.
<cache expires-after="@TimeSpan.FromMinutes(5)">
@(await Component.InvokeAsync("Test"))
</cache>
Hope this blog post helps someone!
–
Mr. Kanti Kalyan Arumilli
B.Tech, M.B.A
Founder & CEO, Lead Full-Stack .Net developer
ALight Technology And Services Limited
Phone / SMS / WhatsApp on the following 3 numbers:
+91-789-362-6688, +1-480-347-6849, +44-07718-273-964
+44-33-3303-1284 (Preferred number if calling from U.K, No WhatsApp)
kantikalyan@gmail.com, kantikalyan@outlook.com, admin@alightservices.com, kantikalyan.arumilli@alightservices.com, KArumilli2020@student.hult.edu, KantiKArumilli@outlook.com and 3 more rarely used email addresses – hardly once or twice a year.
