前言
这篇文章不会介绍什么是 Blazor,若想理解基本概念,请自行百度或查看微软官方文档。这篇文章是偏向技术的,也就是说它不是概念,而是教你从零开始搭建一个 Blazor 项目,前提是你必须先掌握 ASP.NET CORE 的基本知识。
学习Blazor的前提知识点
- ASP.NET CORE 的基本概念
- Razor Page 的基本概念
- 依赖注入的知识
言归正传
Blazor 是属于 ASP.NET CORE 3.0 体系下的又一套框架,所以你第一件事要做的就是下载 ASP.NET CORE 3.0 SDK 环境。而且仅支持 Visual Studio 2019 的版本,如果没有的话,出门右转。
小伙伴们一定要转变一个思维:
Blazor 是使用 C# 语言来进行客户端开发的框架。
和 React / Vue / Angular 这些客户端框架一样,是用来做前端的。具体怎么实现的,大家自己去看文档吧。
从零开始
请记住:这篇教程是从零开始,而不是从一个 Blazor 模版开始。
而是使用
1. 创建一个空的解决方案
然后为这个解决方案创建一个空项目或者一个控制台项目
创建完成后,只有一个 Program.cs
2.修改项目文件
- 修改项目文件【直接点击项目,或使用右键->编辑项目文件】
然后会看到如下显示代码:<Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <OutputType>Exe</OutputType> <TargetFramework>netcoreapp3.0</TargetFramework> </PropertyGroup> </Project>
- 修改节点【Project】的 SDK 值为【Microsoft.NET.Sdk.Web】,表示使用的是 Web 项目。
<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <OutputType>Exe</OutputType> <TargetFramework>netcoreapp3.0</TargetFramework> </PropertyGroup> </Project>
3. 添加 Startup.cs 类
public class Startup
{
public void Configure(IApplicationBuilder app)
{
throw new NotImplementedException();
}
public void ConfigureServices(IServiceCollection services)
{
throw new NotImplementedException();
}
}
4.修改 Program.cs 类
class Program
{
static void Main(string[] args)
{
CreateHostBuilder(args).Build().Start();
}
static IHostBuilder CreateHostBuilder(string[] args)
=> Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(configure =>
{
configure.UseStartup<Startup>();
});
}
对比一下 ASP.NET CORE 2.2 的写法
public class Program
{
public static void Main(string[] args)
{
CreateWebHostBuilder(args).Build().Run();
}
public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
WebHost.CreateDefaultBuilder(args)
.UseStartup<Startup>();
}
大致猜测
3.0 将 Host 抽象出来,可能是为了更好的兼容 Winform 和 WPF,也有可能是为了下一代的跨平台 App 做准备,因此他们托管的不一定就是 WebHost,可以是其他容器。
5. 修改 Starup.cs 的代码
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
}
public void Configure(IApplicationBuilder app)
{
app.UseStaticFiles(); //必须要有
app.UseRouting();
app.UseEndpoints(configure =>
{
configure.MapBlazorHub();
configure.MapFallbackToPage("/_Host");
});
}
}
services.AddRazorPages()
这是添加 Razor Page 的服务,Blazor 也兼容 Mvc 视图模式,你也可以改成services.AddMvc()
,这里不过是添加依赖注入的服务的位置。services.AddServerSideBlazor()
同理,也需要添加 Server-Side Blazor 的服务。点这里查看有关Blazor for Server-Side 和 Blazor for Client-Side(Blazor WebAssembly) 的区别。
在3.0中,映射路由的中间件代码,从原来的
app.UseMvc()
改为使用了app.Endpoints()
终结点模式。相关3.0的迁移改动请移步微软官方迁移文档。
app.MapBlazorHub()
添加 Singlr 对 Blazor 的路由机制。app.MapFallbackToPage()
这是一个失败处理的路由,如果路由匹配失败,则跳转到该页面。
6. 添加一个 _Host.cshtml 页面
Razor Page 默认是在 Pages 文件夹下。
代码如下:
@page "/"
@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<title></title>
<base href="~/" />
</head>
<body>
<script type="text/javascript" src="_framework/blazor.server.js"></script>
</body>
</html>
注意事项
- @page 标记一定要有,而且是“/”,表示根目录。
- @addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers 必须要有
- 在
<head></head>
中,一定要有<base href="~/" />
这段代码。 - 在底部必须有
<script type="text/javascript" src="_framework/blazor.server.js"></script>
代码,这个 js 是内置的,路径和名字就得原封不动是这个。
7. 在 Pages 外面添加一个 _Imports.razor 组件
_Imports.razor
组件是用来导入全局命名空间的,相当于 using 命名空间
,否则就得在每一个 razor 组件中自己引用命名空间。
默认会有以下命名空间:
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.JSInterop
需要其他的,自行添加。
8. 添加 App.razor 组件
该组件是一个基本路由组件,用来呈现 SPA(Single Page Application)的单页面容器。(学过前端的应该都懂这个基本概念吧。)
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="routeData"></RouteView>
</Found>
<NotFound>
<h2>抱歉!找不到页面。</h2>
</NotFound>
</Router>
Router 组件
,位于 Microsoft.AspNetCore.Components.Routing 命名空间。AppAssembly
是必填的,要指定一个路由所在的程序集。因此你可以有多个不同的路由形式。
Found 组件
,当找到页面了显示的内容区域。Coontext
是必填的,声明一个变量。RouterView 组件
,顾名思义就是显示的视图容器,RouteData
属性要求必填,使用Found 组件
声明的Context
的变量即可。
NotFound 组件
当然就是找不到视图要显示的内容了。
9. 修改 _Host.cshtml 页面
@page "/"
@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<title></title>
<base href="/" />
</head>
<body>
@(await Html.RenderComponentAsync<BlazorApp.App>(RenderMode.ServerPrerendered))
<script type="text/javascript" src="_framework/blazor.server.js"></script>
</body>
</html>
在 body 内部增加了一段代码,用于呈现某个组件:@(await Html.RenderComponentAsync<BlazorApp.App>(RenderMode.ServerPrerendered))
10. 最后,你可以新建一个 Index.razor 来显示首页
@page "/"
<h1>这里是首页</h1>
然后运行你的项目吧!!准备好雀跃一番_
恭喜你完成了第一个 Blazor App 的搭建
现在你学会了 Blazor Server-Side 从零开始搭建的技能,所以接下来可以趁热打铁,开始搭建属于自己的应用程序咯。