济南seo网站推广公司,南通给公司做网站的,网站 防采集,十大直播电商平台James: 转载技术社区中一位朋友最新的文章#xff0c;介绍自己为公司的 WebForm 遗留系统使用 Blazor 重写前端 UI 的经历。什么是Blazor组件Blazor 应用是使用 Razor 组件构建的。组件是用户界面 (UI) 的自包含部分#xff0c;具有用于启用动态行为的处理逻辑。组件可以嵌套… James: 转载技术社区中一位朋友最新的文章介绍自己为公司的 WebForm 遗留系统使用 Blazor 重写前端 UI 的经历。什么是Blazor组件Blazor 应用是使用 Razor 组件构建的。组件是用户界面 (UI) 的自包含部分具有用于启用动态行为的处理逻辑。组件可以嵌套、重复使用、在项目间共享并可在 MVC 和 Razor Pages 应用中使用。以上是官方文档给出的定义。实际在工程上Blazor组件和其他Web前端框架组件一样包括HTML、CSS和代码三个部分只是这里的“代码”特指C#语言而非最常见的JavaScript。让我们先看一下官方文档给出的例子创建一个razor文件Dialog.razordiv classcard stylewidth:22remdiv classcard-bodyh3 classcard-titleTitle/h3p classcard-textChildContent/pbutton onclickOnYesYes!/button/div
/divcode {[Parameter]public RenderFragment ChildContent { get; set; }[Parameter]public string Title { get; set; }private void OnYes(){Console.WriteLine(Write to the console in C#! Yes button selected.);}
}
这就是一个组件了。这个Dialog组件封装了一个允许外部传递值Title属性的标题h3标签一个允许外部传入子组件的段落p标签一个点击后触发OnYes方法的按钮button标签div标签及样式这个组件也展示了razor标记语言的特点在HTML模板里‘’标记可以将控件的数据与C#代码的属性进行双向绑定控件的事件与C#函数的绑定也是类似。这种数据和事件绑定的方式在三大前端框架的应用中也不陌生Angular开发者可能最为亲切。注意到p标签里的内容ChildContent表示一个子组件与当前的组件形成嵌套。而对应的C#类型则是RenderFragment这是一个非常重要的类型是开发模板化组件的基础。官方提供了一些使用案例但若要从实际应用的角度去理解我还是建议去参考一些开源组件项目里的组件实现这里暂不赘述。我们再看一下如何使用它page /h1Hello, world!/h1pWelcome to your new app./pDialog TitleLearn MoreDo you want to ilearn more/i about Blazor?
/Dialog这段代码的效果如下展示效果可以看到页面下方就是封装了html标签的Dialog组件其中page用来表示当前页面的路由。官方给的这个案例在我看来是花了点心思的它的结构很简单并不难理解却充分展示了Blazor组件的基本面貌和Razor语言的基本特点又涉及到了Blazor组件十分灵活同时开发上限很高的模板化开发后续等初学者接触到“组件模板化”的文档时起码不会一无所知了。本地内置组件Blazor框架官方内置了一些组件。其中AuthorizeView组件和Route组件是最值得关注的。涉及到敏感数据的后台管理系统肯定要有一套认证授权的机制。AuthorizeView组件经常被用在Layout组件里来区别显示认证前后的UI元素。这个组件的实际应用将在系列的后文中具体介绍。Route组件则更基础了SPA框架当然需要自己的一套路由规则另外还要处理404的情况。这些都在Route组件写在App.razor文件中里为开发者提供了。Router AppAssemblytypeof(Program).AssemblyFound ContextrouteDataRouteView RouteDatarouteData DefaultLayouttypeof(MainLayout) //FoundNotFoundpSorry, theres nothing at this address./p/NotFound
/Router另外Blazor提供了一个默认布局的MainLayout组件由项目模板创建。但本质上它只是方便开发者理解如何在Blazor中使用布局。布局组件当然可以自定义名称和内容我们可以在页面里使用layout指令来指定页面具体使用哪一个布局组件。page /
layout CustomLayoutdiv.../div其他组件往往有更好的第三方开源组件在功能和UI风格上可以取代本文不特别介绍。内置组件的官方文档还是比较细致的因此本文只略作指引有兴趣的读者可以细读文档。第三方开源组件在组件式开发流行的今天任何一个前端框架想要获取开发者的青睐开源社区的支持必不可少。甚至我认为Blazor的推广和普及开源组件库首当其冲属于社区生态的基础设施。Blazor发展至今已经有了多个第三方开源组件项目基本涵盖了市面上比较常见的UI组件Ant Design/Bootstrap/Material UI/Element UI/……开发Blazor应用时选择什么样的UI组件和风格本就是“萝卜青菜各有所爱”。我最终选择了Ant-Design组件来开发后台这里仅提几点个人的意见供读者参考Ant Design源自阿里优秀的企业级开源UI设计前端三大框架均有对应的组件实现。Blazor实现的原型来自Ant Design React。Ant-Design-Blazor项目的更新周期较短issue和开发团队的活跃度较高——意味着个人的意见更容易得到反馈bug更快地得到修复新功能更快地落实和发布。Ant-Design-Blazor项目是较早一批被Blazor官方在技术大会上提及的开源项目之一——意味着项目已经得到一段时间的检验。项目由国内开发者Microsoft MVP发起在历史参与者中也有不少国内开发者因此中文文档比较完善对其他国内应用开发者的问题解答和技术支持也比较到位。成熟的开源组件可以带来巨大的开发效率提升。举一个非常简单的例子使用Ant-Design-Blazor的Result组件实现一个更优雅的404提示页面来替换上面展示的官方Demo里的404NotFound页面。先创建一个MyNotFound.razor文件代码如下using AntDesign;div stylemargin:40pxResult Status404Title404SubTitle您要访问的页面不存在Extraextra /
/divcode {RenderFragment extra strong stylefont-size:20px回到 a href/home首页/a/strong;
}然后在上文提到的Route组件里替换NotFound组件的内容即可Router AppAssemblytypeof(Program).AssemblyFound ContextrouteDataRouteView RouteDatarouteData DefaultLayouttypeof(MainLayout) //FoundNotFoundMyNotFound //NotFound
/RouterAntContainer /让我们故意访问一个不存在的路由看一下效果404提示页面还不错吧比只显示一行文字好看多了而且并不需要费多少心思找素材和写代码。目前Ant-Design-Blazor项目正发起一个讨论欢迎开发者们分享基于Antd组件实现的产品Who is using Ant Design Blazor in production? · Discussion #1693 · ant-design-blazor/ant-design-blazor。另外开发团队还增加了一个开箱即用的模板项目ant-design-blazor/ant-design-pro-blazor。该项目既可以作为参考教材又可以作为项目生成的基础。ant-design-pro-blazor当然对任何开源Blazor UI组件项目来说项目维护活跃、较完善的中文文档支持、开箱即用的模板项目都会得到更多用户的信任从而吸引更多的用户使用。例如在我个人眼中BootstrapBlazor和MatBlazor也是出类拔萃的竞争者。结束语在本系列接下来的文章里我将围绕一个基于内置组件和Ant-Design-Blazor组件开发的后台Demo为例具体介绍Blazor框架的实践经验。让我们先从正常用户访问后台的第一个页面——登录页面开始下一篇文章再会
