企业官网建设流程全解析

网页建站素材模板,wordpress清新模板,wordpress 菜单标题属性,杭州市区网站制作单位、创建和应用Blazor 布局网站应用往往有许多公共的视图部分#xff0c;比如顶部导航nav,底部的footer#xff0c;管理系统的左边的menu菜单等等。Layout可以轻松实现以上的效果。Blazor 布局是一个 Razor 组件#xff0c;它与引用该布局的组件共享标记。 布局可以使用数据绑…、创建和应用Blazor 布局网站应用往往有许多公共的视图部分比如顶部导航nav,底部的footer管理系统的左边的menu菜单等等。Layout可以轻松实现以上的效果。Blazor 布局是一个 Razor 组件它与引用该布局的组件共享标记。 布局可以使用数据绑定、依赖关系注入和组件的其他功能。1、创建布局可以理解为母版页新建一个razor文件文件顶部使用inherits LayoutComponentBase 表示继承自LayoutComponentBase 说明这是个母版页使Body作为占位。17db26a2fc59811f252472259a25564cinherits LayoutComponentBasePageTitleDoctor Who® Database/PageTitleheaderh1Doctor Who® Database/h1/headernava hrefmain-listMain Episode List/aa hrefsearchSearch/aa hrefnewAdd Episode/a/navBodyfooterTrademarkMessage/footercode {public string TrademarkMessage { get; set; } CSharp精选营;}点击并拖拽以移动2、MainLayout 组件在从 Blazor 项目模板创建的应用中MainLayout 组件就是应用的默认布局。Blazor 的 CSS 隔离功能将独立 CSS 样式应用于 MainLayout 组件。 按照惯例样式由相同名称的随附样式表 MainLayout.razor.css 提供。4e72d0845945faae717cbd8bc4e4dc47e2f8774f69788dd6c9469c6be0cee86a​3、应用布局在razor文件顶部申明“layout 模板页名”来设置母版页bc1edcdda470ec5d61fc422465d5e24e如果一个页面没有设置模板页就像blazor默认项目那样他就会使用在app.razor文件中定义的默认模板页07c69bc84df89396eb47a0f95384f6b9​如何不设置任何模板页?比如我们的登录的页面是不需要加通用模板的通过if 控制 RouteView的DefaultLayout即可Router AppAssemblytypeof(App).AssemblyFound ContextrouteDataif (routeData.PageType typeof(Pages.LayoutSample)){RouteView RouteDatarouteData /}else{RouteView RouteDatarouteData DefaultLayouttypeof(MainLayout) /FocusOnNavigate RouteDatarouteData Selectorh1 /}/FoundNotFoundPageTitleNot found/PageTitleLayoutView Layouttypeof(MainLayout)p rolealertSorry, theres nothing at this address./p/LayoutView/NotFound/Router4、嵌套布局组件可以引用一个布局该布局又可以引用另一个布局。 例如嵌套布局可用于创建多级菜单结构。以下示例演示如何使用嵌套布局:inherits LayoutComponentBaselayout ProductionsLayoutPageTitleDoctor Who® Database/PageTitleheaderh1Doctor Who® Database/h1/headernava hrefmain-episode-listMain Episode List/aa hrefepisode-searchSearch/aa hrefnew-episodeAdd Episode/a/navBodyfooterTrademarkMessage/footercode {public string TrademarkMessage { get; set; } CSharp精选营;}点击并拖拽以移动ProductionsLayout 组件包含顶级布局元素其中包含有标头 (header.../header) 和页脚 (footer.../footer) 元素。 带有DoctorWhoLayout组件的 Episodes 会在Body出现的位置显示。inherits LayoutComponentBaseheaderh1Productions/h1/headernava hrefmain-production-listMain Production List/aa hrefproduction-searchSearch/aa hrefnew-productionAdd Production/a/navBodyfooterFooter of Productions Layout/footer点击并拖拽以移动以下呈现的 HTML 标记由前面的嵌套布局生成:headerh1Productions/h1/headernava hrefmain-production-listMain Production List/aa hrefproduction-searchSearch/aa hrefnew-productionAdd Production/a/navheaderh1Doctor Who® Database/h1/headernava hrefmain-episode-listMain Episode List/aa hrefepisode-searchSearch/aa hrefnew-episodeAdd Episode/a/navfooterCSharp精选营/footerfooterFooter of Productions Layout/footer点击并拖拽以移动更多参考https://learn.microsoft.com/zh-cn/aspnet/core/blazor/components/layouts?viewaspnetcore-9.0二、路由配置和导航ASP.NET Core Blazor 路由配置和导航 - 码农刚子 - 博客园三、条件渲染和循环渲染第一章中已经讲过了Blazor的语法。1、Blazor 条件渲染Blazor 中的 if 语法用于根据条件动态渲染页面元素。它类似于 C# 的 if 语句但专门用于处理 UI 渲染。请看以下示例if (isLoading){p加载中.../p}else{p加载完成/p}code {private bool isLoading true;protected override void OnInitialized(){// 模拟加载完成Task.Delay(2000).ContinueWith(_ {isLoading false;InvokeAsync(StateHasChanged);});}}点击并拖拽以移动你可以嵌套多个 if 或结合 else if 使用if (userRole Admin){p欢迎管理员/p}else if (userRole User){p欢迎普通用户/p}else{p请登录。/p}code {private string userRole Admin;}点击并拖拽以移动2、Blazor 循环渲染下面我们有一个list需要显示多个学生信息,for,do…while,while 与foreach类似这里就不在赘述h3用户列表/h3tabletheadtrthName/ththAge/ththGender/th/tr/theadtbodyforeach (var item in list){trtditem.Name/tdtditem.Age/tdswitch (item.Gender){case 0:{td男/tdbreak;}case 1:{td女/tdbreak;}case 2:{td未知/tdbreak;}}/tr}/tbody/tablecode {ListUser list new ListUser();User User1 new User(){Name John,Age 20,Gender 2,};User User2 new User(){Name Sub,Age 22,Gender 0,};protected override void OnInitialized(){list.Add(User1);list.Add(User2);}public class User{public string Name { get; set; } string.Empty;public int Age { get; set; }public int Gender { get; set; } // 0: 男, 1: 女, 2: 未知}}