In this tutorial, I will explain how to create re-usable view components.

The aim will be to call one view component and pass in parameters to return a list of pages in either a ‘side bar’ or ‘bottom bar’ format with different colour variations.

Although CSS is necessary for this example, we will mainly cover the C#/Razor side of it.

The output will be as follows:

Bottom bar

Sidebar

Setting Up Enums

Firstly, two sets of Enums will be created to specify the style variations for the components.

The first will be for the colour variations and the second will be for the bar position variations:

public enum ComponentStyles
{
    Blue=1,
    Red=2,
    LightGrey=3
}

public enum ComponentTypes
{
    Sidebar=1,
    BottomBar=2
}

View Component Class

The view component can then be set up via standard convention. If you are unfamiliar with this, read more on how to create a view component.

The view component will accept the parameters as enums in integer format. This will allow the component to be styled appropriately.

public class PageListViewComponent:ViewComponent
{
    public class PageListViewModel
    {
        public List<PageItem> PageList { get; set; }
        public int ComponentTypeEnum { get; set; }
        public int ComponentStyleEnum { get; set; }
    }
    public IViewComponentResult Invoke(int componentTypeEnum, int componentStyleEnum)
    {
        List<PageItem> pageList = ...
        return View("PageList", new PageListViewModel()
        {
            PageList = pageList
            ComponentTypeEnum = componentTypeEnum,
            ComponentStyleEnum = componentStyleEnum
        });
    }
}

A view model is then populated and passed to the view.

View Component View

Using the parameters passed into the view component, the HTML can be output as follows:

@using Enums;
@model ...PageListViewModel
<div class="style-@Model.ComponentStyleEnum ">
    @if (Model.ComponentTypeEnum == (int)ComponentTypes.BottomBar)
    {
        <div class="col-3">
            ...
        </div>
    }
    else if (Model.SnippetTypeEnum == (int)SnippetTypes.Sidebar)
    {
        <div class="col-12">
            ...
        </div>
    }
</div>

This means that the two conditionals allow for the necessary elements and styling for both side/bottom bar variations.

The parent containers class allows for styling for the colour variations.

An example of how the CSS style variations can then be applied is as follows:

/*blue (enum int 1)*/
.style-1 {
    background-color: var(--blue) !important;
}
.style-1 .style-heading {
    color: white !important;
}
.style-1 .style-text {
    color: var(--light-blue) !important;
}

Calling the View Component

The view component can then be called and reused anywhere in the project via synchronous or asynchronous approaches.

@await Component.InvokeAsync("PageListViewComponent", new { 
    componentTypeEnum = (int)ComponentTypes.SideBar, componentStyleEnum = (int)ComponentStyles.Blue 
})

@Component.Invoke("PageListViewComponent", ...)

Conclusion

In this tutorial, we saw how to create a basic view component. We then learned how to customize its behaviour and appearance in real-world scenarios that are frequently encountered in enterprise applications.

Google Code icon by Icons8