DevExpress中文教程 - 如何在静态SSR模式下使用Blazor Drawer组件？

Microsoft的 .NET 8 UI框架引入了静态服务器端呈现模式静态SSR——组件在服务器端呈现然后返回到客户端没有任何交互DevExpress Blazor Drawer组件需要交互式呈现模式来动态地改变其IsOpen状态。DevExpress新旧版本帮助文档下载欢迎进QQ qun获取169725316在本文中我们将回顾在静态SSR渲染模式下动态显示/隐藏DevExpress Blazor Drawer组件的两种策略添加查询参数来控制drawer的可见性指定CSS规则来控制drawer的可见性P.S.DevExpress拥有.NET开发需要的所有平台控件包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。对于这个例子我们使用的是一个Microsoft Blazor项目模板创建的Blazor Web应用程序。在这个应用程序中注册了适当的DevExpress资源并用以下代码替换了MainLayout.razor页面中的内容。MainLayout.razorstyle .dxbl-drawer .dxbl-drawer-panel .dxbl-drawer-body { padding: 0; } /style DxDrawer PanelWidth250px IsOpentrue BodyTemplate div classsidebar NavMenu / /div /BodyTemplate TargetContent div classtop-row px-4 Here will be a toggle element. a hrefhttps://learn.microsoft.com/aspnet/core/ target_blankAbout/a /div article classcontent px-4 Body /article /TargetContent /DxDrawer这个标记创建一个永久可见的drawer用户可以使用它在页面之间导航但还不能修改可见性。第一个策略添加查询参数来控制Drawer的可见性查询参数是紧跟页面URL的字符串后面的这些参数可以为组件属性设置值。要使用查询参数并更改drawer的IsOpen属性值您必须1. 使用 [SupplyParameterFromQuery] 属性指定drawer的IsOpen参数来自查询字符串。DxDrawer IsOpenIsOpen ... 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/svgxml,%3csvg xmlnshttp://www.w3.org/2000/svg viewBox0 0 30 30%3e%3cpath strokergba%2850, 50, 50, 0.55%29 stroke-linecapround stroke-miterlimit10 stroke-width2 dM4 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 typecheckbox titleNavigation menu classdrawer-toggler/ /NavLink ...这样用户就可以点击切换按钮来显示/隐藏drawer但是当用户导航到另一个页面时drawer将消失。要解决此限制请向导航链接添加IsOpen查询参数如下所示。3. 在NavMenu组件中添加IsOpen参数。MainLayout.razorNavMenu IsOpenIsOpen /4. 用以下代码替换NavMenu.razor文件中的代码。NavMenu.razordiv classtop-row ps-3 navbar navbar-dark div classcontainer-fluid a classnavbar-brand hrefBlazorApp/a /div /div nav classflex-column div classnav-item px-3 NavLink classnav-link hrefGetUrlWithParameter() MatchNavLinkMatch.All span classbi bi-house-door-fill-nav-menu aria-hiddentrue/span Home /NavLink /div div classnav-item px-3 NavLink classnav-link hrefGetUrlWithParameter(weather) span classbi bi-list-nested-nav-menu aria-hiddentrue/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/svgxml,%3csvg xmlnshttp://www.w3.org/2000/svg viewBox0 0 30 30%3e%3cpath strokergba%2850, 50, 50, 0.55%29 stroke-linecapround stroke-miterlimit10 stroke-width2 dM4 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 typecheckbox titleNavigation menu classdrawer-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/svgxml,%3csvg xmlnshttp://www.w3.org/2000/svg viewBox0 0 30 30%3e%3cpath strokergba%2850, 50, 50, 0.55%29 stroke-linecapround stroke-miterlimit10 stroke-width2 dM4 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 PanelWidth250px IsOpentrue BodyTemplate div classsidebar NavMenu / /div /BodyTemplate TargetContent div classtop-row px-4 input typecheckbox titleNavigation menu classdrawer-toggler checked / a hrefhttps://learn.microsoft.com/aspnet/core/ target_blankAbout/a /div article classcontent px-4 Body /article /TargetContent /DxDrawer为了帮助您入门我们创建了一个示例演示如何使用CSS来控制Drawer的可见性以及如何修改移动设备上的组件配置。您可以从我们的GitHub仓库下载这个例子Drawer for Blazor - Responsive Drawer in Static SSR Mode。