如何让百度快照找到自己的网站,怎么建网站教程,校园二手交易网站设计的原则,建设网站需要什么技术【Blazor】| 总结/Edison Zhou大家好#xff0c;我是Edison。为了实现一个Web应用系统#xff0c;需要有个看起来不丑的UI#xff0c;而对于.NET程序员来说要做全栈开发还是有点难#xff0c;而本篇介绍的这个UI组件库正好可以帮助我们解决这个问题#xff01;MudBlaozr是…【Blazor】| 总结/Edison Zhou大家好我是Edison。为了实现一个Web应用系统需要有个看起来不丑的UI而对于.NET程序员来说要做全栈开发还是有点难而本篇介绍的这个UI组件库正好可以帮助我们解决这个问题MudBlaozr是啥MudBlazor是一个基于Blazor的前端UI组件库它可以使.NET开发者使用C#语言快速地构建酷炫的Web应用。重点是MudBlazor提供的UI组件真的还是蛮好看的对于企业内部信息系统的开发绰绰有余可以助力实现.NET开发者的全栈梦想。MudBlazor官网https://mudblazor.com/MudBlazor在线尝试https://try.mudblazor.com/MudBlazor主要提供了以下类型的组件以官网介绍为准1基础组件颜色、图标等2布局组件容器、网格、工具栏等3按钮组件按钮、图标按钮、按钮组等4Input组件表格、文本框、数字框、文件上传、高亮、打分等常见效果5数据显示组件头像、列表、卡片、分页、Tab、时间线等6导航组件链接、菜单、导航栏等7互动组件进度条、提示栏、消息框等这里我们着重来看看常见的Table UI效果安装配置MudBlazor第一步安装MudBlazor包dotnet add package MudBlazor第二步在_Imports.razor中添加MudBlazor的引用using System.Net.Http
using Microsoft.AspNetCore.Authorization
using Microsoft.AspNetCore.Components.Authorization
using Microsoft.AspNetCore.Components.Forms
using Microsoft.AspNetCore.Components.Routing
using Microsoft.AspNetCore.Components.Web
using Microsoft.AspNetCore.Components.Web.Virtualization
using Microsoft.JSInterop
.....
using MudBlazor第三步在_Layout.cshtml中添加字体和样式引用如果是WebAssembly模式的话则是在index.html中同时注释掉原有的site.css样式文件引用。headmeta charsetutf-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /base href~/ /!-- 以下为新添加的css引用 --link hrefhttps://fonts.googleapis.com/css?familyRoboto:300,400,500,700displayswap relstylesheet /link href_content/MudBlazor/MudBlazor.min.css relstylesheet /!-- 以下为原有的css引用 --link relstylesheet hrefcss/bootstrap/bootstrap.min.css /!-- 以下为不再需要的css引用 --*link hrefcss/site.css relstylesheet /*......
/head第四步在_Layout.cshtml底部添加MudBlazor的js脚本引用。script src_framework/blazor.server.js/script
!-- 以下为新添加的js脚本 --
script src_content/MudBlazor/MudBlazor.min.js/script第五步在Program.cs中向IoC容器注入MudService。.NET 6以下版本在StartUp.cs类中using MudBlazor.Services;
// MudBlazor
builder.Services.AddMudServices();最后一步在MainLayout.razor中添加以下组件inherits LayoutComponentBase
MudThemeProvider /
MudDialogProvider /
MudSnackbarProvider /......至此MudBlazor组件库的安装配置工作就完成了下一篇我们使用MudBlazor UI来重构之前的Todo应用。小结本篇我们了解了MudBlazor这个强大的UI组件库。下一篇我们就试着将之前的Todo应用使用MudBlazor来重构一下。参考资料MudBlazor官网年终总结Edison的2021年终总结数字化转型我在传统企业做数字化转型C#刷题C#刷剑指Offer算法题系列文章目录.NET面试.NET开发面试知识体系.NET大会2020年中国.NET开发者大会PDF资料
