分类:  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 blazorserver -o HelloWorldServer

2. 进入到目录: HelloWorldServer, 通过文件管理器查看生成的文件和目录，强烈建议最好是对比一下上一篇文章我们创建的基于WebAssembly部署模型的代码结构是否有不一样。如下图：

3. 在项目的根目录下运行：dontnet run

4. 打开浏览器查看效果：

5. 进入到根目录添加我们自己的hello world组件：
dotnet new razorcomponent -n HelloBlazor -o Pages

6. 进入目录Pages, 编辑文件: HelloBlazor.razor.

6.  进入目录：Shared, 编辑文件: NavMenu.razor

<li class="nav-item px-3">

            <NavLink class="nav-link" href="helloblazor">

           <span class="oi oi-list-rich" aria-hidden="true"></span> Hello

            </NavLink>

        </li>

7. 保存文件后，在项目根目录下运行: dotnet run, 效果如下图：

至此我们基于Blazor 框架的两种部署模型的Hello world程序都已经完成了，新手从应用的表现上来看，初看上去很难看出有什么区别，这是因为虽然我们采用的部署模型不同，但是在Blazor框架的开发上实际上一摸一样的。

如果想体验一下这两种部署模型到底有何不同，您可以尝试中断dotnet run的运行，然后你可以观察到基于webassembly部署的应用不会受到任何影响，但是基于blazor Server部署的模型，则会有如下的错误：

这是因为基于Webassembly部署模型是直接运行在用户的客户端，但是基于Blazor server运行的部署模型，是客户端通过SignalR的技术远程链接服务端生成UI的。

这是最明显的区别了。

接下来我们要讨论一下基于Blazor Server部署的模型和普通的ASP.net Core MVC 或者基于Razor 技术的有什么区别，这个部分会放在下一章，敬请期待。