Convert Bootstrap template to Blazor (Part 6)

This is part 6 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
3. Part 3 – Header and Footer
4. Part 4 – About and Copyright
5. Part 5 – Contact Me

In this post we will be refactoring the Portfolio section to be more dynamic and Blazorized.  In the Portfolio section is where the author show cases their work for others to see.  This is the Portfolio section:

We will be making the HTML dynamic and pulling the portfolio information from or configuration service.  When the user clicks on the portfolio image, we will be displaying the details in a modal.  Here are the steps we will be following:

1. Create the data model
2. Create the Configuration method to get the portfolio data.
3. Create the Portfolio page
4. Create the Portfolio detail modal
5. Run and test

Data Model

Our portfolio detail data model is very simple:
1. Title
2. Image URL
3. Summary

We also want a Data model to hold the collection of the portfolio details, so we have PortfolioDataList:

    public class PortfolioDataList
    {
        public List<PortfolioDataModel> Portfolios { get; set; } = new List<PortfolioDataModel>();
    }

Configuration Method

The method for the configuration service is GetPortfilio.  It simply builds a collection of portfolio details.  In a real world application, you would retrieve these from the data store or call another service to get them.

Portfolio Page

We will change the HTML.  Instead of hard coding each portfolio item, we will be using a foreach loop to create the different sections for the portfolio details.

        <!-- Portfolio Grid Items -->
        <div class="row">
            @foreach (var item in model.Portfolios)
            {
                <!-- Portfolio Item 1 -->
                <div class="col-md-6 col-lg-4">
                    <div class="portfolio-item mx-auto" @onclick="@(e => ShowModal(item))">
                        <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
                            <div class="portfolio-item-caption-content text-center text-white">
                                <i class="fas fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img class="img-fluid" src="@item.ImageURL" alt="">
                    </div>
                </div>
            }
        </div>

In the code section we put an OnInitializedAsync method to call to the configuration service to get our list of portfolio items.  This is the same for the other pages we have done.

Portfolio Details Modal

We created a new page with the details section from the static site.  We then create a local portfolio data model to use on the page.
We set up a cascading parameter variable sense we are passing the portfolio detail object from another component that the index page and started with.

If the parameter is not null, we set it to the local data model.  We update the HTML to bind to the local data model.  In addition, we hook up a click event to cancel the modal.
 We talked about how to add a modal to your application here .  Just follow that to see how we wire in the modal to the application.

We can now run and see that when we click on the portfolio image the detail modal pops up and displays the details.

In our next post, which is the last in this series we will be looking at the button that shows at the bottom of the page, that allows you to go to the top, when the size is in phone mode.

[Source Code]