分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-21 23:01:00

今天我们开始详细的从微软的官方文档中半翻译半加入自己的理解顺着将微软Blazor的官方文档学习的经历记录在这一系列的文章里，以供大家学习和参考。 今天我们来讲一下Blazor的基础之一路由： 前面我们说过了Blazor是基于组件来编程的，需要注意的是在Blazor里有两种组件，一种是带有路由功能的组件，另外一种不具备路由功能的组件，要想理解路由组件，我们先需要理解Blazor应用的架构是什么样子的。 我们之前的文章中也有谈到过这个问题，每个Blazor应用都是从Program.cs 主类开始，在该类中的Main方法初始化Host，然后由host引入Blazor应用中的主要组件App.razor, 其中的分别是基于WebAssembly是直接从wwwroot/index.ht

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Web Client   #Blazor   ◆ 发布于: 2023-05-21 22:07:32

之前我们已经使用Blazor Server的部署模式创建了一个简易的代办事件列表，今天我们使用SignalR技术+Blazor WebAssembly部署模式+ASP.net Core 服务端创建一个简易的聊天室，虽然这两个教程都非常简单，基本上由dotnet 工具和框架完成了大部分的工作，但是这两个实例的开发基本上描述了使用Blazor技术开发一个应用的所有的技术要点，希望大家能够认真理解这些基础的知识点，在完成这两个教程之后，后期我们会将Blazor编程中技术要点会一一给大家满满讲解，同时技术要点完成了之后，我们会根据Github上的一个项目整理一个较为深入的教程，帮助大家尽快的能够上手使用Blazor技术。 对上一个教程不是太了解的同学可以参考如下链接（本教程不在叙述技

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Blazor   ◆ 发布于: 2023-05-21 21:57:48

前面我们通过几篇文件介绍了什么是Blazor以及给出了我们的hello Word, 同时介绍了典型的部署Server和WebAssembly模板创建出来的文件结构是什么样的，特别是创建不同的部署模型，应用是如何配置和启用的， 如果您对这些概念还不是很清楚，建议您通过之前的文章复习一下。 今天我们使用基于Blazor Server的部署模型创建一个简单的TodoList应用，虽然这个应用非常简单，但是基本包含了Blazor应用开发的很多要点： 如何定义应用默认的Layout。 如何使用预定义的组件。 如何新建一个自定义的组件。 如何进行数据绑定。 如何监听一个事件。 如何使用单独的CSS，对自定义的组件定义外观。 深入的理解基于Blazor的UI

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web   #Blazor   ◆ 发布于: 2023-05-21 21:44:07

桌面开发、安卓ios开发对于很多用户来说都是成本很大的选项，因为一个项目需要花多几份的钱，例如你不得不要花安卓开发维护的钱，iOS开发维护的钱，还有网站开发维护的钱，然而自己的项目并不是那么吃资源，或者高大上的项目，无非都是增删查改这些最为基础的业务的组合。有没有新技术可以解决这类的问题？以前想着在web app里就画个框框，框框里的内容都走html5, 如今有了PWA，框框也不要画了，还能省省发行渠道费用，技术上是一个很值得考虑的选项。 前面我们介绍了什么是Blazor, 以及Blazor的两个Hello World应用，一个基于WebAssembly技术，一个是基于Server技术，没有看过介绍的同学可以快速的通过如下的链接回顾一下：

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #Blazor   #Web   #.Net   ◆ 发布于: 2023-05-21 21:29:18

Razor 语法混合了C#代码，HTML标记。一般情况下Razor 文件以cshtml作为扩展名，或者在Blazor的Razor 组件中以razor作为扩展名。 语法 Razor以字符@从HTML转换到C#, Razor会运行C#表达式，并输出HTML内容。同时需要注意当在Razor中以@+Razor保留关键字，它会转到Razor特定的标记，否则是转到换到普通的C#代码。 为了在Razor标记中对字符@逃逸，我们需要使用两个@, 例如: <p>@@Username</p> 在Razor输出如下结果: <p>@Username</p> 在HTML 标记的属性和标记内容中使用电子邮件地址，不会对字符@进行转义: <ahref="mailto:S

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #Blazor   #Razor   #Web   #.Net   ◆ 发布于: 2023-05-21 19:48:35

当我学习到Blazor 组件的时候，突然发现对于Razor 的语法有些生疏了，因此回过头来想重新问一下关于Razor的语法和Razor Page的编程模型，因此接下来的两篇文章主要是回顾Razor Page 的编程模型和Razor 语法参考。 Razor Page 编程模型上手非常容易，本篇文章主要信息如下： Razor Page快速入门介绍。 Razor Page 项目结构介绍。 Razor Page项目的基础知识 使用Razor Page提交表单。 Razor Page表单验证 处理head方法。 使用Layout, partials, templates 以及Tag helps 在Razor Pages中处理URL 自

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #.Net   #Web Client   #Blazor   ◆ 发布于: 2023-05-21 19:23:31

前面的文章我们简要的介绍了什么是blazor以及给大家分享了两个hello world, 并且分别基于blazor框架的两种部署模式：WebAssembly部署模式和基于Blazor Server的部署模式。从Blazor的开发历史上来看是先在.net Core 3.0时发布了Blazor Server，然后在.net 5才发布了Webassembly。 但是这里有很多问题，例如： Blazor Webassembly和Blazor Server优缺点是什么？ Blazor WebAssembly和Blazor Server分别适用于什么场景？ Blazor Server和传统的基于Razor Page或者ASP.net Core MVC的应用到底有什么不同？

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #Blazor   #.Net   #Web Client   ◆ 发布于: 2023-05-21 19:19:58

上一章我们详细的介绍了如何使用Blazor 技术创建一个基于WebAssembly部署的Hello, Blazor World 的Demo代码，您可以通过如下的链接回顾该文章：Hello, Blazor World(基于WebAssembly) 本章源代码也可以从此处下载： https://github.com/hylinux/AzureDeveloperCN/tree/main/AzureDeveloperCN.Demo.Server.HelloWorld 本章接着介绍另外一个demo, 如果创建一个基于Blazor Server部署的Helllo, Blazor World. 闲话少说，正式开始： 1. 使用命令行创建一个新的项目： dotnet new bla

分类:  Blazor入门    ◆ 标签:  #Asp.Net core基础   #Web   #.Net   #Web Client   ◆ 发布于: 2023-05-21 19:12:05

本章我们想给大家一个初始的映像，使用Blazor框架像Blazor 的世界来大声说一句：Hello, Blazor World!， 需要注意的是，我们这次的Demo代码会使用两个部署模型，本章使用的是基于WebAssembly的部署模型。 如果只是想体验一下，您也可以直接从这里下载源代码： https://github.com/hylinux/AzureDeveloperCN/tree/main/AzureDeveloperCN.Demo.WebAssembly.HelloWorld 下面是分布介绍： 打开任何一个可以使用的windows 终端，cmd, powershell, terminal, 都可以，进入到一个目录，使用命令：