Microsoft的 .NET 8 UI框架引入了靜態服務器端呈現模式（靜態SSR）——組件在服務器端呈現，然后返回到客戶端，沒有任何交互，DevExpress Blazor Drawer組件需要交互式呈現模式來動態地改變其IsOpen狀態。

在本文中，我們將回顧在靜態SSR渲染模式下動態顯示/隱藏DevExpress Blazor Drawer組件的兩種策略：

• 添加查詢參數來控制drawer的可見性
• 指定CSS規則來控制drawer的可見性

P.S.：DevExpress擁有.NET開發需要的所有平臺控件，包含600多個UI控件、報表平臺、DevExpress Dashboard eXpressApp 框架、適用于 Visual Studio的CodeRush等一系列輔助工具。

獲取DevExtreme v24.1正式版下載

DevExpress技術交流群10：532598169      歡迎一起進群討論

對于這個例子，我們使用的是一個Microsoft Blazor項目模板創建的Blazor Web應用程序。在這個應用程序中，注冊了適當的DevExpress資源，并用以下代碼替換了MainLayout.razor頁面中的內容。

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  target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</TargetContent>
</DxDrawer>

這個標記創建一個永久可見的drawer，用戶可以使用它在頁面之間導航，但還不能修改可見性。

第一個策略：添加查詢參數來控制Drawer的可見性

查詢參數是緊跟頁面URL的？字符串后面的，這些參數可以為組件屬性設置值。

要使用查詢參數并更改drawer的IsOpen屬性值，您必須：

1. 使用 屬性指定drawer的IsOpen參數來自查詢字符串。

<DxDrawer IsOpen="@IsOpen">
...
@code {
[SupplyParameterFromQuery]
public bool IsOpen { get; set; }
}

2. 添加一個元素來控制drawer的可見性，將其封裝在導航到當前頁面但切換IsOpen參數的NavLink組件中。

@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='//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>
...

這樣用戶就可以點擊切換按鈕來顯示/隱藏drawer，但是當用戶導航到另一個頁面時，drawer將消失。要解決此限制，請向導航鏈接添加`IsOpen`查詢參數，如下所示。

3. 在NavMenu組件中添加IsOpen參數。

MainLayout.razor

<NavMenu IsOpen="@IsOpen" />

4. 用以下代碼替換NavMenu.razor文件中的代碼。

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();
}
}

現在用戶可以通過導航菜單復選框控制drawer的可見性。

注意：此方法在DevExpress Blazor項目模板（v24.1.6+）中使用。

第二個策略：指定CSS規則來控制Drawer的可見性

CSS規則允許您根據其他組件的狀態有條件地對元素應用樣式，使用這種方法，我們將根據復選框狀態切換drawer可見性（將其寬度設置為0）。要實現此功能，您必須：

1. 添加一個復選框元素來切換drawer的可見性。

<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='//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 />
...

2. 添加以下CSS規則，在未選中復選框時將drawer面板寬度設置為零。

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

這樣，用戶就可以單擊復選框來顯示/隱藏drawer。

完整代碼如下：

<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='//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  target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</TargetContent>
</DxDrawer>

為了幫助您入門，我們創建了一個示例，演示如何使用CSS來控制Drawer的可見性，以及如何修改移動設備上的組件配置。您可以從我們的GitHub倉庫下載這個例子：。

更多產品需求，歡迎咨詢“”~

更多DevExpress線上公開課、中文教程資訊請上中文網獲取