一文说通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 模型。
一、创建空项目
我们先创建一个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
喜欢就来个三连,让更多人因你而受益
一文说通Blazor for Server-Side的项目结构相关推荐
- 一文说通C#中的异步编程补遗
前文写了关于C#中的异步编程.后台有无数人在讨论,很多人把异步和多线程混了. 文章在这儿:一文说通C#中的异步编程 所以,本文从体系的角度,再写一下这个异步编程. 一.C#中的异步编程演变 1. ...
- 一文说通Dotnet Core的后台任务
这是一文说通系列的第二篇,里面有些内容会用到第一篇中间件的部分概念.如果需要,可以参看第一篇:一文说通Dotnet Core的中间件 一.前言 后台任务在一些特殊的应用场合,有相当的需求. 比方, ...
- [MS评估文档]SharePoint Portal Server 2003 的 10 大优点
[MS评估文档]SharePoint Portal Server 2003 的 10 大优点 TechNet 主页 > 产品与技术 > 桌面产品与技术 > Microsoft Off ...
- 在Blazor中构建数据库应用程序——第1部分——项目结构和框架
目录 介绍 存储库和数据库 设计理念 数据 UI 解决方案结构 界面结构 页面 路由视图 布局 表单 控件 Blazor.Database项目 Program.cs ServiceCollection ...
- 网络存储技术Windows server 2012 (项目二 动态磁盘的配置与管理)
网络存储技术Windows server 2012 (项目二 基本磁盘的配置与管理) 目录 前言 一.项目背景 二.项目实训题 1.项目1 2.项目2 3.项目3 前言 网络存储技术,是以互联网为载体 ...
- 网络存储技术Windows server 2012 (项目五 存储服务器的数据快照计划与故障还原)
网络存储技术Windows server 2012 (项目五 存储服务器的数据快照计划与故障还原) 目录 前言 一.项目背景 二.项目实训题 三.环境部署 1.在[新加卷E]新建一个共享目录 2.将共 ...
- 网络云存储技术Windows server 2012 (项目十九 iSCSI磁盘的在线扩容)
网络云存储技术Windows server 2012 (项目十九 iSCSI磁盘的在线扩容) 前言 网络存储技术,是以互联网为载体实现数据的传输与存储,它采用面向网络的存储体系结构,使数据处理和数据存 ...
- 网络云存储技术Windows server 2012 (项目十五 存储服务间的数据同步)
网络云存储技术Windows server 2012 (项目十五 存储服务间的数据同步) 目录 前言 一.项目背景 二. 项目实训题 前言 网络存储技术,是以互联网为载体实现数据的传输与存储,它采用面 ...
- SQL Server 2005查询处理结构-用户模式计划(UMS)
SQL Server 2005查询处理结构-用户模式计划(UMS) 在对数据库进行性能调优时,必须全面的考虑各种可能造成系统性能瓶颈的各种因素,因此深入了解SQL Server 2005的查询处理机构 ...
最新文章
- mysql处理上百万条的数据库如何优化语句来提高处理查询效率
- 链表c的经典实现(一)
- IntelliJ IDEA使用说明
- Leetcode 40组合总数(回溯)Ⅱ41缺失的第一个正数42接雨水
- 堆叠柱形图上自定义数字_用Excel绘制Cell上的漂亮配图
- LOJ:蚂蚁之旅(欧拉回路)
- 前端学习(757):预解析
- idea设置自定义代码模板(webstorm也是如此)
- wechat.php+获取昵称,微信后台代码,获取用户昵称
- Ajax不起作用....
- Yii Framework2.0开发教程(2)使用表单Form
- 软件设计工程——数据库设计
- java98道经典面试题
- 洛谷 P3807 【模板】卢卡斯定理/Lucas 定理
- 华为交换机查看端口对应的oid索引值
- 使用微搭低代码集成腾讯地图
- 【更新21.02.03】百分浏览器继续使用Flash Player的临时解决方案!
- Python解释器和IDE的安装
- Ubuntu 16.04 一系列软件安装命令,包括QQ、搜狗、Chrome、vlc、网易云音乐安装方法(转载)...
- 如何:创建 MDI 父窗体、子窗体、确定活动的 MDI 子窗体
热门文章
- 【python】python中的定义类属性和对像属性
- 服务发现与健康监测框架Consul-DNS转发的应用
- 边工作边刷题:70天一遍leetcode: day 11-3
- kdbchk: the amount of space used is not equal to block size
- shared_ptrT make_shared( Args ... args );
- 西电开源社区Ubuntu 10.04软件源
- GChemPaint-绘制化学分子布局
- 如何在Safari中查看网页的完整URL
- 邮件系统之webmail
- JavaScript格式化数字显示格式