国内高端大气的网站设计,WordPress怎么新建导航菜单,为网站做seo需要什么软件,品牌网站建设黑白H狼【Blazor】| 总结/Edison Zhou大家好#xff0c;我是Edison。最近在学习Blazor做全栈开发#xff0c;因此根据老习惯#xff0c;我会将我的学习过程记录下来#xff0c;一来体系化整理#xff0c;二来作为笔记供将来翻看。本篇我们来构建第一个Blazor Web应用#xff0c;…【Blazor】| 总结/Edison Zhou大家好我是Edison。最近在学习Blazor做全栈开发因此根据老习惯我会将我的学习过程记录下来一来体系化整理二来作为笔记供将来翻看。本篇我们来构建第一个Blazor Web应用这里我们选择Blazor Server类型后面我们再学习Blazor WebAssembly类型。话外音有人问我西门子在用Blazor吗是的西门子德国的两家数字化工厂都有在用Blazor开发Web应用特别用到了MudBlazor这个UI组件库值得关注而作为西门子在中国的首家数字化工厂我们自然也要用Blazor开发新的Web应用系统啦创建新的Blazor应用在VS中添加一个Blazor Server应用。在“框架”组合框中选择“.NET 6.0(长期支持)”。保持其他设置不变然后选择“创建”即可。Blazor应用的结构一个默认的Blazor应用的项目结构如下图所示其中1Data文件夹主要存放Model和Service。2Pages文件夹主要存放基于Razor的页面和组件。其中.cshtml是页面.razor的则一般是组件可复用。3Shared文件夹主要存放页面模板、导航模板等。其他1Imports.razor用于声明全局应用的命名空间。2App.razor用于声明默认的Router。Blazor应用初体验这里我们暂时啥也不改Run起来看看效果1首先是一段文字介绍2点击Counter菜单进入计数器页面3点击Fetch data菜单进入天气预报示例数据表格计数器示例在Pages/Counter.razor我们可以看到这个Counter组件的实现page /counterh1Counter/h1p rolestatusCurrent count: currentCount/pbutton classbtn btn-primary onclickIncrementCountClick me/buttoncode {private int currentCount 0;private void IncrementCount(){currentCount;}
}我们来看看这个组件的代码1page指令说明了浏览器可以通过/counter请求来访问该组件2code指令说明了C#代码区域声明了一个InCrementCount方法用于点击次数的自增。3button标签中通过onclick绑定了点击事件InCrementCOunt会触发currentCount的自增。使用组件这里我们尝试在Index.razor文件中添加一个刚刚的Counter组件page /h1Hello, world!/h1Welcome to your new app.SurveyPrompt TitleHow is Blazor working for you? /Counter /这时我们重新启动应用就可以看到Counter组件显示在主页上面了此时假设我们每个Counter组件的调用方希望的递增值是不固定的不一定都是1。换句话说我们希望支持调用方传递它需要递增的值比如10。这里我们稍微改动一下Counter组件的实现page /counterh1Counter/h1p rolestatusCurrent count: currentCount/pbutton classbtn btn-primary onclickIncrementCountClick me/buttoncode {private int currentCount 0;[Parameter]public int IncrementAmount { get; set; } 1;private void IncrementCount(){currentCount IncrementAmount;}
}这里的改动为使用 [Parameter] 特性为 IncrementAmount 添加公共属性。更改 IncrementCount 方法以在 currentCount 的值递增时使用 IncrementAmount。当我们再次运行在主页点击后就会以10递增。而在Counter组件页它还是以1递增。小结本篇我们创建第一个Blazor应用。下一篇我们来写一个Todo应用把分层结构和EF Core串起来参考资料Microsoft Docs《使用Blazor生成Web应用》年终总结Edison的2021年终总结数字化转型我在传统企业做数字化转型C#刷题C#刷剑指Offer算法题系列文章目录.NET面试.NET开发面试知识体系.NET大会2020年中国.NET开发者大会PDF资料
