Convert Bootstrap Template to Blazor (Part 2)

This is part 2 in my 7-part series on how to move a free Bootstrap Template and make a Blazor application out of it.  You can see part one here.


In this post we are going to take a look at what it takes to get the NAV to work with anchor tags and how to make it responsive. 

Make a NAV component 

This is a Blazor application so we need to componenetize our controls so we can reuse them going forward.  We will be building a horizontal NAV bar component.    To achieve this:

    1. Add new Razor component to the part 2 project called Nav.razor
    2. Remove the NAV HTML from the Index.razor and add it to the Nav page
    3. Add the new Nav component to the Index page
             <Nav/>
    4. Run it and the nav should show, but still be non-functional

Anchor Tags 

Currently anchor tags, href="#portfolio">Portfolio</a> do not work in Blazor.  There are several articles explaining why this is so. 

At first, I looked for a common C# component that will make this work, but after a lot of research I was able was to finally able to find one from DevExpress . 

This is a C# and JavaScript component.  First part is to handle the # part of the URI.  We can use the 

NavigationManager.ToAbsoluteUri(NavigationManager.Uri).GetLeftPart(UriPartial.Path) + hrefValue;  

call to pull out the part we want, i.e. #portfolio.  Next, we need to find that element and scroll to it.  That is what the JavaScript does.

JavaScript

function scrollToAnchor(anchor) { 

    var selector = anchor || document.location.hash; 

    if (selector && selector.length > 1) { 

        var element = document.querySelector(selector); 

        if (element) { 

            var y = element.getBoundingClientRect().top + window.pageYOffset; 

            /*The following code line updates a vertical scroll bar's offset for a standard Blazor Visual Studio template.  

Update the code to get an offset that is suitable for your application.*/ 

            y -= document.querySelector(".main .top-row").offsetHeight; 

            window.scroll(0, y); 

        } 

    } 

    else 

        window.scroll(0, 0); 



Note that on scroll part you may to adjust it for your page.  To implement this, we need to:

    1.  Get the project from.
    2. Add the project the part 2 solution
    3. Add a reference to the DevExpress project
    4. Copy the js file over to wwwroot in the part 2 folder
    5. Add using statement to _Imports.razor 

        @using DevExpress.Blazor.AnchorUtils 

    6. Add the component in MainLayout.razor   

        <AnchorUtilsComponent /> 

 7. Add the link to the JavaScript file in _Host.cshtml 

           <!-- anchor href --> 
          <script src="/anchor-utils.js"></script>

 8.  Run and test

You can see that now when you click on the nav items and notice they now take you to that part of the page.

Responsive Nav

When you resize the page to a smaller size we see the collapse menu, hamburger, get displayed but when we click it nothing happens.  we would expect to see the menu be displayed.  Since the menu button event handler is in JavaScript, it does not work.  Let's see what it takes to switch the event to a C# event handler.

We can look at the code in the template for handling the collapsed menu and start from there.  We will be working in the Nav page.

1. Add a variable to save the collapsed state
2. Add a variable to set the CSS class to collapse and un collapse the menu
3. Add  a method to be call on the button clicks


Here is the code section of the Nav page:

Add  a method to be call on the button clicks



Here is the code section of the Nav page:

    @code { 
        bool collapseNavMenu = true; 
        string NavMenuCssClass => collapseNavMenu ? "collapse" : null; 

        void ToggleNavMenu() 
        { 
            collapseNavMenu = !collapseNavMenu; 
        } 
    }



Next, we need to remove the JavaScript handler and trade out the CSS class with our NavMenuCssClass value.



Now we need to add the On Click method to the div as well.

<div class="@NavMenuCssClass navbar-collapse" id="navbarResponsive"  @onclick="ToggleNavMenu"> 


All that is left is to run and test it!


We saw how to handle anchor tags and how to substitute a JavaScript handler with a C# one.  Our next post will be creating a header and footer component with a configuration service.



[Source code]