Convert Bootstrap Template to Blazor - Part 3

Convert Bootstrap template to Blazor => Part 3

This is part 3 in my 7-part series on how to move a free Bootstrap Template and make a Blazor application out of it.  You can read about the other post here:
1. Part 1 – Create project and Copy over assets
2. Part 2 - Navigation

Since we are building a Blazor application and everything cool in Blazor is a component, we need to create some components.  It might seem like over kill, but I will be building header and footer components in this post.

Header

This is the Header:

You should notice there are a couple of variable items in this section:

1. Avatar

2. Name

3. Summary

I want to make this section configurable.  In order to do this we can either pass in parameters into the component or we can have some type of a configuration service.  I prefer the configuration service, it allows us to take the application in a few different areas with minimal work. 

Configuration Service

This will be a simple C# class.  In this sample we will be pulling the data from hard coded values, but there is no reason we could not retrieve the data from a data store or another service. 

Starting out the configuration model is very simple, just the variables listed above.   The first method in the service will be “GetHeaderValues()”

We will call this on the OnInitialization event.  The code should be straight forward:

        public async Task<HeaderModel> GetHeader()

        {

            HeaderModel result = new HeaderModel()

            {

                AvatarURL = "/img/MyAvator.png",

                Name = "CodingWithDavid",

                Summary = "One engineers path to learn new and exciting things."

            };

            await Task.CompletedTask;

            return result;

        }

Header Component

To create the Header component we need to:

1. Create the razor component 

2. Copy over the html from the index page

3. Inject the data model and the service

4. Create the On Initialize method

5. Replace the hard coded values for the new model

Our header component looks like this:

@using StaticToBlazorPart3.Models

@inject StaticToBlazorPart3.Services.PortifilioConfigurationService Service

<header class="masthead bg-primary text-white text-center">

    <div class="container d-flex align-items-center flex-column">

        <img class="masthead-avatar mb-5" src="@model.AvatarURL" alt="">

        <h1 class="masthead-heading text-uppercase mb-0">@model.Name</h1>

        <div class="divider-custom divider-light">

            <div class="divider-custom-line"></div>

            <div class="divider-custom-icon">

                <i class="fas fa-star"></i>

            </div>

            <div class="divider-custom-line"></div>

        </div>

        <p class="masthead-subheading font-weight-light mb-0">@model.Summary</p>

    </div>

</header>

@code {

    HeaderModel model = new HeaderModel();

    protected override async Task OnInitializedAsync()

   {

        model = await Service.GetHeader();

    }

}

Footer Component

This is the footer we are working with

For the footer, we just repeat what we did for the header put with the footer variables:

1. Location

2. Social Links

3. About

4. Message

In the page code there is one additional check we make to see if we have data before displaying.  For Location and each social link we check for a value:

                @if (!string.IsNullOrEmpty(model.Address.Address1))

                {

With just a few changes we now have configurable headers and footers.  In the next part we will make the About and copyright a configurable component.

[Source Code]