一文说通Blazor for Server-Side的项目结构
用C#代替Javascript来做Web应用，是有多爽？
今天聊聊 Blazor。
Blazor 是一个 Web UI 框架。这个框架允许开发者使用 C# 来创建可运行于浏览器的具有完全交互 UI 的 Web 应用。
可以理解为，这是一个 C# 语言的 Vue / Angular / React，可以和 HTML、CSS 一起实现可重用的 Web UI，可以和服务器共享代码和库。
Blazor 拥有现代 Web 框架具备的所有功能，包括：
用于构建 composable UI 的组件模型
路由
布局
表格和验证
依赖注入
JavaScript 互操作
开发期间在浏览器中实时重新加载
服务器端渲染
在浏览器和 IDE 中全面调试 .NET
能够通过 asm.js 在较早版本的（非 WebAssembly ）浏览器上运行
Blazor 有两种托管模型：
- Blazor WebAssembly （blazorwasm）
- Blazor Server （blazorserver）
两种模型从应用层面没有太大的区别，但从实际运行和布署上，两个模型还是有相当的区别的。
Blazor WebAssembly 应用跑在浏览器上，要求浏览器支持 WebAssembly。换句话说，早期的一些浏览器并不支持 WebAssembly，所以也无法使用。同时，应用在首次运行时，需要下载应用和应用依赖项和运行时到本地，所以会有个加载延时。但是，这种模型可以全部运行在客户端，充分利用客户端资源，对服务器压力小。
Blazor Server 则相反，应用跑在服务器上，通过SignalR来处理 UI 更新、事件处理。所以，它加载速度快，可以充分利用服务器功能，并可以运行早期的浏览器。不过，因为应用需要跟服务器通讯，所以，不支持脱机工作，服务器压力大。
简单的区别就这么多，详细的内容，我会另开一文来说。
今天我们主说 Blazor for Server-Side ，也就是上面介绍的 Blazor Server 模型。
为了防止不提供原网址的转载，特在这里加上原文链接：https://www.cnblogs.com/tiger-wang/p/13264415.html
一、创建空项目
我们先创建一个Web空项目：
% dotnet new sln -o demo
The template "Solution File" was created successfully.
% cd demo
% dotnet new web -o demo
The template "ASP.NET Core Empty" was created successfully.
Processing post-creation actions...
Running 'dotnet restore' on demo/demo.csproj...
Determining projects to restore...
Restored /demo/demo/demo.csproj (in 148 ms).
Restore succeeded.
% dotnet sln add demo/demo.csproj
Project `demo/demo.csproj` added to the solution.
创建完成。看一下目录结构：
% tree .
.
├── demo
│ ├── Program.cs
│ ├── Properties
│ │ └── launchSettings.json
│ ├── Startup.cs
│ ├── appsettings.Development.json
│ ├── appsettings.json
│ └── demo.csproj
└── demo.sln
这就是我们的基础项目了。后面所有的项目，都会在这个基础上进行修改和增加。
二、添加 Blazor 服务
打开Startup.cs文件。
1. 修改 ConfigureServices
在ConfigureServices中添加：
services.AddRazorPages();
services.AddServerSideBlazor();
这两行代码中，services.AddRazorPages()是添加Razor服务。
Razor和Blazor名字很像，但本身并没有关系。Razor是一种服务器标记语言，类似于PHP。
这里添加Razor，只是因为我习惯用Razor，并没有特殊性。如果你习惯用 MVC，这儿也可以换成services.AddMvc()，是一样的。
下面一行services.AddServerSideBlazor()，才是真正的内容：添加Blazor Server-Side服务。
2. 修改 Configure
在Configure中添加：
app.UseStaticFiles();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
});
其中，app.UseStaticFiles()表明我们会用到静态文件。文件默认要求放在wwwroot目录下，所以可以把目录也建了。
app.UseEndpoints，需要使用Blazor路由，所以要改成endpoints.MapBlazorHub()。
这儿就完成了。
3. 加入路由
接下来，我们需要建立路由。在项目中建一个目录Pages。这是Blazor默认的单页面目录。然后在里面建一个_Host.cshtml。
@page "/"
@namespace demo.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
<base href="~/" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
然后在Startup.cs文件的Configure中加入回退路由：
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
这里把这个_Host.cshtml登记为回退路由，作用是把所有请求到 Razor 的页面，先路由到这个页面中，由这个页面做最终合成。
这个页面中必须有的元素为：
- @page，定义这个页面的访问点
- @namespace，当前页面的namespace
- addTagHelper，标记帮助
- base，定义这个页面的路由起始
- app，这一句是这个页面的核心。我们后边创建的
Razor页面，会以一个组件的形式，放在这个位置 - script，用来跟服务器通讯
上面的代码中，调用到一个typeof(App)，这个App，是路由组件。下面我们来创建这个路由 - 创建一个App.razor：
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" />
</Found>
<NotFound>
Page Not found
</NotFound>
</Router>
这个模板的用处，是在 Dotnet 编译时.razor时，为带有@page的类提供指定的路由模板属性RouteAttribute，同时，也映射出了上面说的App类。
运行。浏览器中会出现Page Not Found。这是我们在App.razor里定义的，表明我们没有找到任何可用的路由。
三、创建一个页面
下面，我们来创建一个页面index.razor：
@page "/"
<h1>Hello, world!</h1>
这个页面简单。
@page，告诉路由这个页面的URL是/。
再运行，我们就看到了这个页面。
@page定义的是这个页面的路由。路由有以下几种样式，我简单列一下：
- 直接路由：
/page - 参数路由：
/page/{page_id} - 约束路由：
/page/{page_id: int}
四、创建一个布局模板
我们先在项目中创建一个目录Shared，用来存放各种组件和模板。在目录中，我们创建一个布局模板 - MainLayout.razor：
@using Microsoft.AspNetCore.Components
@inherits LayoutComponentBase
<div>
<h3>This is layout</h3>
</div>
@Body
这里面有几个重点：
- 布局模板必须继承自类
LayoutComponentBase - @Body定义了引用布局的页面的内容位置
- Body的数据类型是
RenderFragment，在Microsoft.AspNetCore.Components中，需要引用
其实这些操作，都是C#的结构，只不过用了Razor，换了一种写法
下面，我们给刚才的Index.razor加入布局模板：
@using demo.Shared
@layout MainLayout
只要在Index.razor代码的最上边加上这两行就行。这两行中：
@layout是定义这个页面用哪个布局模板的；而@using是引用这个模板的位置，就是 C# 中的using。
运行，我们就看到，这个布局加到页面前边了。
五、设置默认布局引用
上面的例子，是把布局给到一个页面。
我们也可以设置所有页面的默认布局模板，通过改动路由模板App.razor：
@using demo.Shared
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
Page Not Found
</NotFound>
</Router>
对方前边的文件内容，这一段，仅仅在RouteView中加了一个DefaultLayout。
现在，所有的页面都默认加上了布局模板。
六、设置默认命名空间引用
上面的例子，在App.razor和Index.razor中，我们都引用了demo.Shared命名空间。
Blazor提供了一个默认的文件，叫_Imports.razor，用来存放所有.razor文件中共同的引用。
@using demo.Shared
我们把引用加到这个文件中，同时把上面两个.razor中的引用去掉，就完成了。
*这儿也多说一句：布局模板也可以在这里引用。布局模板的引用优先级是：页面引用 > _Imports.razor引用 > App.razor 引用。
以上就是Blazor Server的项目结构。做好这个结构后，所有的功夫，就只在 Razor 页面了。
（全文完）
本文的代码在https://github.com/humornif/Demo-Code/tree/master/0017/demo
 |
微信公众号：老王Plus 扫描二维码，关注个人公众号，可以第一时间得到最新的个人文章和内容推送 本文版权归作者所有，转载请保留此声明和原文链接 |
一文说通Blazor for Server-Side的项目结构的更多相关文章
- 第三篇——第二部分——第二文 计划搭建SQL Server镜像
原文:第三篇--第二部分--第二文 计划搭建SQL Server镜像 本文紧跟上一章:SQL Server镜像简介 本文出处:http://blog.csdn.net/dba_huangzj/arti ...
- 一文说通Dotnet Core的后台任务
这是一文说通系列的第二篇,里面有些内容会用到第一篇中间件的部分概念.如果需要,可以参看第一篇:一文说通Dotnet Core的中间件 一.前言 后台任务在一些特殊的应用场合,有相当的需求. 比方, ...
- 一文说通C#中的异步编程补遗
前文写了关于C#中的异步编程.后台有无数人在讨论,很多人把异步和多线程混了. 文章在这儿:一文说通C#中的异步编程 所以,本文从体系的角度,再写一下这个异步编程. 一.C#中的异步编程演变 1. ...
- Node.js 从零开发 web server博客项目[安全]
web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...
- 在Myeclipse buildpath 加server lib （server runtime）/项目导入时报错：The import javax.servlet.http.HttpServletRequest cannot be resolved
来源于:http://blog.csdn.net/dingqinghu/article/details/8805922 http://yl-fighting.iteye.com/blog/140946 ...
- eclipse新建web项目，发布 run as 方式和 new server然后添加项目方式。 后者无法自动编译java 成class文件到classes包下。
eclipse新建web项目,发布 run as 方式和 new server然后添加项目方式. 后者无法自动编译java 成class文件到classes包下. 建议使用run as - run ...
- Node.js 从零开发 web server博客项目[express重构博客项目]
web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...
- Node.js 从零开发 web server博客项目[数据存储]
web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...
- Node.js 从零开发 web server博客项目[koa2重构博客项目]
web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...
随机推荐
- https如何进行加密传输
客户端是没有证书的,也就没有公钥和私钥. SSL握手阶段,服务器把证书传输给客户端,同时也就传输了公钥(公钥是证书的一部分). 由客户端来对这个证书进行有效性认可,再由这个客户端来生成对称密钥. 对称 ...
- CentOS7.6操作系统安装实例以及Linux版本、哲学思想介绍
Linux起源1991年的10月5日,Torvalds在comp.os.minix新闻组上发布消息,正式向外宣布他自行编写的完全自由免费的内核诞生(Freeminix-like kernel sour ...
- Python实现海贼王的歌词组成词云图
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:一粒米饭 喜欢的朋友欢迎关注小编,除了分享技术文章之外还有很多福利, ...
- 掌握SpringBoot-2.3的容器探针：深入篇
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:原创分类汇总及配套源码,涉及Java.Docker.K8S.DevOPS等 关于<Spr ...
- 日期时间设置 QDate, QTime, QDateTime
#!/usr/bin/python3 from PyQt5.QtCore import QDate, QTime, QDateTime, Qt now = QDate.currentDate() pr ...
- Redis的内存和实现机制
1. Reids内存的划分 数据 内存统计在used_memory中 进程本身运行需要内存 Redis主进程本身运行需要的内存占用,代码.常量池等 缓冲内存,客户端缓冲区.复制积压缓冲区.AOF缓冲区 ...
- 私有云nextcloud、seafile、syncthing的比较
可选 nextcloud.seafile.syncthing 1. seafile https://www.jianshu.com/p/43f570118e63 https://www.jianshu ...
- 《ElasticSearch入门》一篇管够，持续更新
一.顾名思义: Elastic:灵活的:Search:搜索引擎 二.官方简介: Elasticsearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTf ...
- 如何用 Python 和 API 收集与分析网络数据？
摘自 https://www.jianshu.com/p/d52020f0c247 本文以一款阿里云市场历史天气查询产品为例,为你逐步介绍如何用 Python 调用 API 收集.分析与可视化数据.希 ...
- Java容器相关知识点整理
结合一些文章阅读源码后整理的Java容器常见知识点.对于一些代码细节,本文不展开来讲,有兴趣可以自行阅读参考文献. 1. 思维导图 各个容器的知识点比较分散,没有在思维导图上体现,因此看上去右半部分很 ...