More than one IViewComponentResult method in ViewComponent Class

Question

Is it possible to access more than one IViewComponentResult method in a single ViewComponent Class? I seem to be able to create more then one method with each referencing their own View, but I have been unable to find a way to reference the individual methods within the class from a razor view.

public class PageHeaderViewComponent: ViewComponent
{
    public IViewComponentResult Header(LayoutModel layoutModel)
    {
        return View("Header", layoutModel);
    }

    public IViewComponentResult PageHeaderUpper(LayoutModel layoutModel)
    {
        return View("PageHeaderUpper", layoutModel);
    }

}

Rena · Accepted Answer · 2021-12-31 03:04:12Z

1

I suggest you can pass a parameter to Invoke method to conditionally return different view:

public class PageHeaderViewComponent : ViewComponent
{
    public IViewComponentResult Invoke(LayoutModel layoutModel,string name)
    {
        if(name=="header")
        {
            return View("Header", layoutModel);
        }
        else
        {
            return View("PageHeaderUpper", layoutModel);
        }
    }
}

You can invoke the view components like below in main view:

@await Component.InvokeAsync(typeof(PageHeaderViewComponent), new { LayoutModel= new LayoutModel() , name = "header" })
@await Component.InvokeAsync(typeof(PageHeaderViewComponent), new { LayoutModel= new LayoutModel() , name = "aaa" })

View Components location:

Besides, you can also use the property in LayoutModel as the condition.

edited Dec 31, 2021 at 3:04

answered Dec 31, 2021 at 2:44

Rena

37.2k7 gold badges50 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

More than one IViewComponentResult method in ViewComponent Class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related