Blazor 初体验

最新推荐文章于 2025-03-26 09:30:08 发布

65号腕

最新推荐文章于 2025-03-26 09:30:08 发布

阅读量1.9k

点赞数

分类专栏： Blazor

本文链接：https://blog.youkuaiyun.com/weixin_46295080/article/details/106817758

版权

本文介绍了Blazor，一个使用C#构建Web UI的框架。通过创建、运行Blazor Web WebAssembly项目，分析项目结构，展示了Blazor如何替代部分JavaScript功能，并在客户端和服务端共享代码。文章探讨了Blazor的页面路由、组件、生命周期以及HTTP请求处理，同时也提出了几个待解决的问题，如页面状态保持和调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Blazor

通过官方的介绍可以知道，Blazor是一个Web端的UI框架。
但与现在流行的UI框架(Angular，VUE等)不同，Blazor 是允许使用C#来代替一些Javascript功能的，而且可以在UI端和服务端共享业务逻辑代码。
听起来就很有吸引力，作为一个多年的.NET癌，自然要尝试一下。

创建

创建Blazor项目需要Visual Studio 2019 以上版本，笔者用的是Version 16.6.2。

新建项目，选择Blazor App，然后点击下一步.
输入项目名称，点击创建
接下来会出现两个选项，一个是基于Server的，一个是基于Web WebAssembly的，这恐怕也是Blazor与其他传统Web UI框架最大的区别，
官方文档上也有介绍两者的区别。
笔者此次选择的是Web WebAssembly，并且勾选了右边栏的ASP.NET Core Hosted和PWA复选框。如下图：

运行

创建完直接运行就可以了，默认的模板会创建3个页面。

第1个是万能的Hello World。
第2个页面包含一个计数器，每次点击按钮都会加1。
第3个页面是一个数据列表。

监控网络可以发现,第一次加载页面的时候会有大量的程序集加载到浏览器，最大的甚至达到了1.4MB，对于互联网网站来说还是不太友好，
不过由于只会加载一次，如果是企业内部应用或者一些胖客户端应用，还是可以接受的。
在这里插入图片描述

项目结构分析

由于创建的时候选择了Web WebAssembly，并且勾选了多个复选框，所以Visual Studio会自动创建3个项目。

BlazorApp1.Client： Blazor的核心项目，负责客户端的呈现和逻辑处理。
BlazorApp1.Server：后台项目，处理服务端请求，添加了一个Web Api。
BlazorApp1.Shared： Client和Server的共享代码，这里只添加了一个Model。

Server和Shared项目没什么特别的，唯一需要留意的是Server的Startup里面对Blazor中间件的声明：
在这里插入图片描述

BlazorApp1.Client

在这里插入图片描述

wwwroot 网站的根目录，里面包含了常用的css，js等文件
wwwroot/index.html 网站首页，当浏览器输入url(比如http://localhost:5000/)的时候首先会加载该页面,代码如下：

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorApp1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
<

最低0.47元/天解锁文章