Quantcast
Channel: Developer Express Inc.
Viewing all articles
Browse latest Browse all 2370

How to Use the DevExpress Blazor Drawer Component in Static SSR Mode

$
0
0

Microsoft's .NET 8 UI framework introduced static server-side render mode (static SSR) - where components are rendered on the server and returned to the client without any interactivity. The DevExpress Blazor Drawer component requires interactive render mode to dynamically change its IsOpen state.

In this blog I'll review two strategies to dynamically display/hide the DevExpress Blazor Drawer component in static SSR render mode:

  1. Add query params to control drawer visibility.
  2. Specify CSS rules to control drawer visibility.

For this example, I'm using a Blazor Web App created with a Microsoft Blazor project template. In this app, I registered appropriate DevExpress resources (review the following documentation topic for instructions: Get Started With DevExpress Components for Blazor) and replaced content in the MainLayout.razor page with the following code.

MainLayout.razor

<style>
    .dxbl-drawer > .dxbl-drawer-panel > .dxbl-drawer-body {
        padding: 0;
    }
</style>

<DxDrawer PanelWidth="250px" IsOpen="@true">
    <BodyTemplate>
        <div class="sidebar">
            <NavMenu />
        </div>
    </BodyTemplate>
    <TargetContent>
        <div class="top-row px-4">
            Here will be a toggle element.
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>
        <article class="content px-4">
            @Body
        </article>
    </TargetContent>
</DxDrawer>

This markup creates a permanently visible drawer. Users can navigate between pages with it, but they are not yet able to modify visibility.

The First Strategy: Add Query Params to Control Drawer Visibility

Query params are key-value pairs that go after the ? character in a page URL. These parameters can set values for component properties.

To use a query parameter and change the drawer's IsOpen property value, you must:

  1. Use the [SupplyParameterFromQuery] attribute to specify that the drawer's IsOpen parameter originates from the query string.
  2. <DxDrawer IsOpen="@IsOpen">
    ...
    @code {
        [SupplyParameterFromQuery]
        public bool IsOpen { get; set; }
    }    
    
  3. Add an element to control drawer visibility. Wrap it in a NavLink component that navigates to the current page but toggles the IsOpen parameter.
  4. @inject NavigationManager NavigationManager
    <style>
        .drawer-toggler {
            position: absolute;
            appearance: none;
            cursor: pointer;
            width: 2rem;
            height: 2rem;
            top: 0.75rem;
            left: 0.75rem;
            border: 1px solid rgba(50, 50, 50, 0.1);
            background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2850, 50, 50, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(50, 50, 50, 0.1);
        }
    </style>
    
    ...
    @* Here will be a toggle element. *@
    <NavLink href="@(new Uri(NavigationManager.Uri).LocalPath + "?IsOpen=" + (!IsOpen).ToString())">
        <input type="checkbox" title="Navigation menu" class="drawer-toggler"/>
    </NavLink>
    ...
    

    With this, users can click the toggle button to display/hide the drawer. However, when a user navigates to a different page, the drawer will disappear. To address this limitation, add the `IsOpen` query parameter to navigation links as follows.

  5. Add the IsOpen parameter in the NavMenu component.
  6. MainLayout.razor

    <NavMenu IsOpen="@IsOpen" />
  7. Replace the code in the NavMenu.razor file with the following code.
  8. NavMenu.razor

    <div class="top-row ps-3 navbar navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="">BlazorApp</a>
        </div>
    </div>
    
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="@GetUrlWithParameter("")" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
            </NavLink>
        </div>
    
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="@GetUrlWithParameter("weather")">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
            </NavLink>
        </div>
    </nav>
    
    @code {
        [Parameter] public Boolean IsOpen { get; set; }
    
        string GetUrlWithParameter(string url) {
            return url + "?IsOpen=" + IsOpen.ToString();
        }
    }

Now users can control drawer visibility with the Navigation menu checkbox.

Note: This approach is used within DevExpress Blazor project templates (v24.1.6+).

The Second Strategy: Specify CSS Rules to Control Drawer Visibility

CSS rules allow you to conditionally apply styles to elements based on the state of another component. With this approach, we will switch drawer visibility (set its width to zero) based on checkbox state. To implement this capability, you must: 

  1. Add a checkbox element that will toggle drawer visibility.
  2. <style>
        .drawer-toggler {
            position: absolute;
            appearance: none;
            cursor: pointer;
            width: 2rem;
            height: 2rem;
            top: 0.75rem;
            left: 0.75rem;
            border: 1px solid rgba(50, 50, 50, 0.1);
            background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2850, 50, 50, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(50, 50, 50, 0.1);
        }
    </style>
    
    ...
    @* Here will be a toggle element. *@
    <input type="checkbox" title="Navigation menu" class="drawer-toggler" checked />
    ...
  3. Add the following CSS rule to set drawer panel width to zero when the checkbox is not selected.
  4. .dxbl-drawer:has(.drawer-toggler:not(:checked)) .dxbl-drawer-panel {
        width: 0 !important;
    }

With that, users can click the checkbox to display/hide the drawer.

The complete code is as follows:

<style>
    .dxbl-drawer > .dxbl-drawer-panel > .dxbl-drawer-body {
        padding: 0;
    }

    .drawer-toggler {
        position: absolute;
        appearance: none;
        cursor: pointer;
        width: 2rem;
        height: 2rem;
        top: 0.75rem;
        left: 0.75rem;
        border: 1px solid rgba(50, 50, 50, 0.1);
        background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2850, 50, 50, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(50, 50, 50, 0.1);
    }

    .dxbl-drawer:has(.drawer-toggler:not(:checked)) .dxbl-drawer-panel {
        width: 0 !important;
    }
</style>

<DxDrawer PanelWidth="250px" IsOpen="@true">
    <BodyTemplate>
        <div class="sidebar">
            <NavMenu />
        </div>
    </BodyTemplate>
    <TargetContent>
        <div class="top-row px-4">
            <input type="checkbox" title="Navigation menu" class="drawer-toggler" checked />
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>
        <article class="content px-4">
            @Body
        </article>
    </TargetContent>
</DxDrawer>

To help you get started, we created an example that demonstrates use of CSS to control Drawer visibility and how to modify component configuration on mobile devices. You can download the example from our GitHub repository: Drawer for Blazor - Responsive Drawer in Static SSR Mode.


Viewing all articles
Browse latest Browse all 2370

Trending Articles