CODEWITHSUNDEEP
asp.netasp.net-coreasp.net-core-viewcomponent
ofcskn
ofcskn

Reputation: 55

How to use views of View Component in different places in ASP.NET Core?

I use view components in my projects. Sometimes, I need to use the same view component as various styles. I researched a lot but I don't find a solution.

The code below works fine but when I do like this, I couldn't use it the way I wanted.

View component class:

    public IViewComponentResult Invoke(BlogSidebarViewModel vm)
    {
        vm.BlogTags = _uow.BlogTag.GetAllByPriority(true,vm.LangId,vm.WebsiteId);
        vm.BlogCategories = _uow.BlogCategory.GetAllByPriority(true,vm.LangId,vm.WebsiteId).Include(p=>p.BlogTag);
        vm.RecentBlogs = _uow.Blog.GetAllByEnabledDate(true,vm.LangId,vm.WebsiteId);
        //return View(vm); //For Default Blog Sidebar View Component
        //return View("RedComponent", vm); //For Red Blog Sidebar View Component
        //return View("GreenComponent",vm);//For Green Blog Sidebar View Component
    }

But, when I write the following code, I get an error.

@await Component.InvokeAsync("BlogSidebar/RedComponent");

or

@await Component.InvokeAsync("~/Views/Shared/Components/BlogSidebar/GreenComponent.cshtml");

I want to use view components in various views. How can I do? Can I do it?

EDIT

Can I use the views of view component at the same time? For example, while I use the "GreenComponent" in the "Blogs/ABC.cshtml" view, I would like to use the "RedComponent" View in the "Blogs/XYZ.cshtml" view.

Upvotes: 0

Views: 3705

Answers (1)

Rena
Rena

Reputation: 36735

Please follow the steps below to use View Components:

1.Create GreenComponent.cshtml in folder:Views/Shared/Components/BlogSidebar.

enter image description here

2.Create View Component named BlogSidebar:

public class BlogSidebar : ViewComponent
{
    public IViewComponentResult Invoke(BlogSidebarViewModel vm)
    {
        vm.Id = 1;
        vm.Name = "aaa";
        return View("GreenComponent",vm);
    }
}

3.GreenComponent.cshtml:

@model BlogSidebarViewModel
Name: @Model.Name

4.Index.cshtml:

@model BlogSidebarViewModel

@await Component.InvokeAsync("BlogSidebar",new BlogSidebarViewModel())

Result:

enter image description here

Upvotes: 1

Related Questions