些对象都是用来保存信息的，包括用户信息，传递值的信息，全局信息等等。下面主要说一下他们之间的区别：

1.Application对象
Application用于保存所有用户的公共的数据信息,如果使用Application对象,一个需要考虑的问题是任何写操作都要在Application_OnStart事件(global.asax)中完成.尽管使用Application.Lock和Applicaiton.Unlock方法来避免写操作的同步,但是它串行化了对Application对象的请求,当网站访问量大的时候会产生严重的性能瓶颈.因此最好不要用此对象保存大的数据集合. 下面我们做个在线用户统计的例子来说明这个问题:
(以文件的形式存放网站总访问量)

Global.asax类
代码：

一节我们实现了分类树的右键菜单弹出，本节我们继续实现数据从浏览器到数据库的工作。

完善菜单内容

我们先来丰富右键菜单的选项，在Menu控件中添加MenuItem，分别是修改节点和删除节点：

<Menu Style="@menuStyle">
???????<MenuItem OnClick="CreateNode">
???????????@menu_create_text
???????</MenuItem>
???????<MenuItem OnClick="ModifyNode">
???????????修改节点
???????</MenuItem>
???????<MenuItem OnClick="DeleteNode">
???????????删除节点
???????</MenuItem>
???</Menu>

由于修改和删除不像创建涉及到不同的名称，所以菜单文章内容直接写死。事件响应代码一并复制就好。

void ModifyNode(MouseEventArgs args)
{
menuStyle="display:none;";
}

void DeleteNode(MouseEventArgs args)
{
menuStyle="display:none;";
}

运行效果：

创建分类编辑组件

我们的右键菜单现在有了事件触发，接下来要弹出分类编辑页面来录入信息。我们首先需要创建一个名为CategoryEdit.Razor组件，过程跟上一节我们创建ContextMenuPanel一样。如下图：

这个过程我们以后就不再讲了。

有同学私信问不使用Ant Design组件，直接用Blazor系统的组件可行吗？我觉得这个问题比较有代表性，所以这个CategoryEdit我就不使用Ant Design的组件来完成。先上完整的代码吧：

<div style="width:100%; display:@display;">
<div class="page">
<div @onclick="toggle" id="close">X</div>
<div style="padding: 10px;">
<ul>
<li class="item"><span>编码：</span><input @bind="@Value.Id" /></li>
???????????????<li class="item"><span>名称：</span><input @bind="@Value.Name" /></li>
???????????????<li class="item"><span>所属Id：</span><input @bind="@Value.ParentId" /></li>
???????????</ul>
???????????<ul>
???????????????<li class="item">
???????????????????<span>是否有子类：</span>
???????????????????<select @bind="@has_child">
???????????????????????<option value="1">true</option>
???????????????????????<option value="0">false</option>
???????????????????</select>
???????????????</li>
???????????????<li class="item"><span>分类类型：</span><input @bind="@Value.Type" /></li>
???????????????<li class="item"><span>显示顺序：</span><input @bind="@Value.ShowOrder" /></li>
???????????</ul>
???????????<div>
???????????????<label>分类描述：</label>
???????????????????<textarea style="width:100%; min-height:200px;" @bind=@Value.Description></textarea>
???????????????<label>备注：</label>
???????????????????<textarea style="width:100%; min-height:200px;" @bind=@Value.Remark></textarea>
???????????</div>
???????????<button @onclick="save">保存</button>
???????</div>
???</div>
</div>

@code {
???string display="none";

???public void toggle()
???{
???????display=(display=="none") ? "block" : "none";
???}

???[Parameter]
???public EventCallback OnSave { get; set; }

???[Parameter]
???public Model.Category Value { get; set; }

???int has_child=0;
???void save()
???{
???????Value.HasChild=(has_child==0) ? false : true;
???????if (OnSave.HasDelegate) OnSave.InvokeAsync();
???}
}

样式文件CategoryEdit.razor.css

.page { width:960px; border: 1px solid #CCC; margin-left:auto; margin-right:auto; }
.item { width: 280px; list-style:none; display: inline-block; }
.item span { width: 100px; display: inline-block; }
#close {
    position: relative;
    text-align: center;
    cursor: pointer;
    background: #FCC;
    float: right;
    width: 20px;
    height: 20px;
}
    #close:hover {
        background-color: #F00;
    }

上部分为html元素标签，具体标签和布局就不展开讲了。

@display是引用下面code中的变量，只要display的值变化，这里就会随之生效；

@onclick是绑定click事件；用到了两处，一个是右上角的关闭按钮，一个是下方的保存按钮；

@bind="@Value.Id跟上面的@display类似，只是这个用于控件，控件的值与变量值双向绑定；

public void toggle()是切换是否显示的方法，默认隐藏，调用一次就切换一次；

[Parameter]是定义CategoryEdit组件的属性；

public EventCallback OnSave是声明一个OnSave的函数作为回调；

public Model.Category Value是要编辑或新建的Category数据实体；

int has_child是对应Model.Category中的HasChild，在标准select及option中无法直接绑定bool类型的熟知，所以用has_child来作为媒介；

void save()则是保存函数，做数据处理后回调OnSave；

css文件在blazor中是隔离的，即声明一个跟razor组件同名的css文件，它就会从属于这个razor组件，只对这个razor生效，这样可以很好的解决不同css文件命名相互冲突的问题。

上面完全都是靠代码堆的，这里有点没想明白为什么微软不延续winform、webform的所见即所得的方式，哪怕是有个设计视图浏览也好。难道是技术上过于复杂吗？目前以Blazor这种开发方式，想要看到修改效果，哪怕是只调一个颜色，都只能重新编译运行才能看到效果，非常影响开发效率。以前webform的那种，改前端根本需要编译，重新刷新页面就好。希望这里未来能有改进。

调用分类编辑组件

CategoryEdit组件设计完成后，我们就可以在Index.razor中使用它了

<CategoryEdit @ref="categoryEditor" Value="@curCategory" OnSave="@SaveCategory"></CategoryEdit>
@code {
CategoryEdit categoryEditor;
Model.Category curCategory=new Model.Category();
void SaveCategory()
{
}
}

我们只需要这几行代码就够了。对属性赋值，响应事件。然后我们先来看下效果：

我们可以看到，调用完成后，在Index.razor中的SaveCategory函数中，curCategory中的值就都有了。实际上我们用的控件库，比如Ant Design也都是这样一步一步来完成的，只要有时间、有耐心，啥都不是事。

到目前为止，我们已经完成了前端的数据准备，接下来我们就是要通过WebAPI正式向服务器提交信息了。在一般的公司中，前端和后端都是分开不同团队来做的，后端做完提供接口，前端按照接口规范进行调用。那我们接下来的事情就是要做后端的工作了，考虑到同样编码内容较多，这节暂时到这里，我们下节继续。

----------------------------------------------------

本教程项目源码已作为开源项目加入到Gitee，代码内容会随教程实时更新，大家有兴趣的话可以关注我，以获得最及时的更新。私信：

私人日记 可以获取相关链接；

大家阅读过程中有哪些看不懂或未尽兴的地方，可以在评论区留言，我会先记下来在后续的教程中找机会再说。

教程有帮助的话请大家帮忙关注、转发、扩散，能不能开专栏还需要你们的支持！

lazor 是一个 Microsoff ASP.NET Core 框架，用它无需任何附加组件或插件即可在浏览器中运行.NET 应用程序。相比之下，Angular 是一种基于组件的流行 JavaScript 框架，用于构建可扩展的 Web 应用程序。

本文将深入探讨 Blazor 和 Angular 之间的异同，以帮助大家为自己的下一个项目选择最佳框架。

Blazor 是什么？

Blazor 是微软新出的 ASP.NET Core Web 框架，允许开发人员在 Web 应用程序中使用 C#代码。Blazor 应用基于现有的 Web 技术（例如 HTML 和 CSS）构建，但该框架允许开发人员使用 C#和 Razor（一种流行的模板标记语法）而不是 JavaScript 语言。Blazor 这个名称是 Browser 和 Razor 的组合。

使用 Blazor，开发人员能够为在.NET 中开发的，基于 WebAssembly 的客户端应用程序创建交互式和可复用的 Web UI。此外，它让开发人员能够共享代码和库，因为客户端和服务端代码都是用 C#编写的，从而为开发人员提供了一个平台，可以使用.NET 端到端开发充满活力的现代单页应用程序（SPA）。

Blazor 的最大卖点是它使用最新的 Web 标准，并且不需要额外的插件或附加组件即可在两个单独的部署模型（客户端 WebAssembly 和服务端 ASP.NET Core）中运行。

Blazor 在 GitHub 上已经积累了超过 9K Stars，非常适合 Web 应用开发用途。但要完全理解 Blazor，我们必须深入了解它的起源。Blazor 提供了两种开发选项，服务器和 WebAssembly。除此之外，Blazor 中还有另外三个可用的开发选项：

• Blazor PWA：开发渐进式 Web 应用。
• Blazor Hybrid：开发混合应用程序。
• Blazor Native：为移动平台创建原生应用程序。

Blazor 中的功能

• 使用 C#创建 Web UI。
• 支持渐进式 Web 应用开发。
• 创建可复用的 C#组件。
• 完全支持服务端调试。
• 支持服务端渲染，用于更快的 WebSocket 连接。

下面我们讨论一下 Blazor 的一些优缺点。

Blazor 的优势

• Blazor 共享服务端代码和客户端代码：Blazor 允许开发人员在前端和后端之间复用代码。
• 依赖注入：依赖注入是一个可用的对象，可以在 Blazor 中充当一个服务。Blazor 在其应用程序中使用依赖注入来实现控制反转，它允许为对象提供依赖。在 Blazor 中，依赖注入可以分为多个类：注入器、客户端和服务。Blazor 还有不同的注入器，例如构造器、属性和方法。
• Visual Studio Code：我们可以使用 Visual Studio Code 开发 Blazor 应用，因为它们都是微软产品。当你在 Blazor 框架中开发应用程序时，VSCode 将帮助你轻松利用其各种功能。
• 与 JavaScript 的互操作性：Blazor 使用 Blazor WebAssembly 中的互操作功能来处理 DOM 操作。此外，这个 JavaScript 功能可以在 Blazor WebAssembly 中使用浏览器 API 调用。因此，Blazor 应用可以将.NET 方法与 JavaScript 函数结合使用。要了解更多信息，请参阅这篇文章：在 Blazor 中使用 JavaScript 互操作的优缺点（地址：https://www.syncfusion.com/blogs/post/pros-and-cons-of-using-javascript-interop-in-blazor.aspx）。

Blazor 的缺点

Blazor 服务器的缺点：

• 无离线支持：Blazor Server 必须有活动的网络连接。如果连接失败，应用程序将停止工作，原因是整个项目托管在服务端，需要连接到互联网。
• 使用 ASP.NET Core：Blazor 始终需要 ASP.NETCore 服务器才能运行。因此，如果你使用 Blazor 开发任何应用，你都应该先安装 ASP.NETCore。

Blazor WebAssembly 的缺点：

• 应用程序体积：Blazor 执行时间取决于应用的体积。因此，基于 Blazor WebAssembly 构建的较重应用可能会影响性能。
• 受限于浏览器：浏览器的功能在 Blazor 中受到限制。因此，只要浏览器可以处理 Blazor，应该就不会有什么问题。然而，并不是所有的浏览器都支持 WebAssembly，所以如果你碰巧在使用 Internet Explorer，可能就会遇到麻烦。

Angular 是什么？

Angular 是一个基于 TypeScript 的前端框架。它被评为世界上最受欢迎的开源 Web 框架之一。它可以帮助开发人员创建交互式用户界面、单页 Web 应用、高级 Web 应用等。它的前身是使用 JavaScript 的 AngularJS。但是随着技术的发展，TypeScript 已经在 Angular 中取代了 JavaScript。

让我们看看使用 Angular 的一些优势。

Angular 的优点

• 支持：与 Blazor 相比，使用 Angular 的社区规模非常大。因此对于 Angular 来说，我们在应用开发过程中遇到问题时，找到解决方案的机会很高。
• 使用 TypeScript：TypeScript 有很多比 JavaScript 更好的属性。例如，干净、可理解和可预测的代码在 Angular 上表现更好。
• 可复用性：Angular 也像 Blazor 一样支持可复用性，这对开发人员来说很有用。
• MVVM：Angular 是一个开源的 MVVM 框架，它将程序逻辑与用户界面控件分开。用户可以使用模型-视图-视图模型（也称为模型-视图-绑定器）来保持代码结构清晰、项目各自分离。他们可以快速轻松地更新、编辑和修复代码。视图负责托管可视项目并接收来自模型的输入。ViewModel 连接视图和模型。最后，模型包括了程序的逻辑。

Angular 的缺点

• 难学：即使对于经验丰富的工程师来说，Angular 也是一个难以掌握、问题多多的框架。Angular 的难度来自于陡峭的学习曲线和需要深度知识才能理解的全套文档。此外，Angular 是一个固执的框架，这意味着它有自己的做事方法，开发人员别无选择，只能遵循它的风格。然而，一旦你掌握了 Angular，它就会成为一个非常有益的工具。
• 搜索引擎优化：默认情况下，Angular 对搜索引擎优化并不友好。除非网站建立在服务端，否则搜索引擎爬虫很难对其进行索引。但网站应该没有障碍地在 SERP 中被索引和发现才对。
• 体积较大：Angular 项目包的大小通常比其他框架的更大，这使得 Angular 应用运行缓慢。

Blazor 与 Angular 对比

我们来直接比较 Blazor 和 Angular。

Angular 和 Blazor 都是开源 Web 框架。主要区别在于 Angular 使用 TypeScript，而 Blazor 使用 C#。但两者之间存在一些关键差异：

• Angular 已经存在了一段时间，但 Blazor 仍处于早期阶段。
• 每个客户端都必须有一个活动连接，并且 Blazor 将每个客户端的组件状态保存在服务器上。
• Blazor 现在提供了 scoped 组件样式和 CSS 隔离。在 Angular 中，与组件样式和 CSS 隔离相关的工具链已经非常成熟了。
• Angular 提供了对 PWA 的支持，但服务端 Blazor 不能用作 PWA。

下表详细列出了 Angular 与 Blazor 的对比细节。

编程语言、发展历史和流行度是两者之间最显著的区别。因为世界各地的大公司都在使用 Angular，所以找到一份 Angular 开发人员的工作也容易得多。此外，Angular 是一个优秀的企业解决方案，它主要用于此类需求。

你应该根据你的目标来选择框架。如果你想确保自己选择的框架有一个庞大的社区，可以在需要时为你提供帮助，请选择 Angular。PWA 得到了 Angular 的强力支持，但 Blazor 的服务端尚未赶上。另一方面，Blazor 更适合熟悉 C#的开发人员，而对于经验丰富的 TypeScript 开发人员来说，上手 Blazor 会有些麻烦。如果你正在寻找一个完善的产品，Angular 是正确的选择。

在选择 Blazor 或 Angular 时，你必须考虑以下几点：

何时使用 Blazor：

• 如果你是想要更快构建应用的 C#开发人员。
• 当项目需要更快的周转时间时。

何时使用 Angular：

• 如果你愿意在 Angular 上投入大量的学习努力，以从一个久经考验的框架中获益。
• 如果你是一个顽固的 JavaScript 开发人员，永远不会选择使用.NET 进行 Web 开发。
• 如果你需要开发具有高灵活度的最小设计应用。

结论

在本文中，我全面概述了 Blazor 和 Angular 各自的功能和用法。这两个框架都令人印象深刻，但每个框架都有其优点和局限性。最终，你应根据项目要求在 Blazor 和 Angular 之间进行选择，选出最能满足你需求的一种。我建议阅读它们的文档以获取更多信息。

现在你知道该选择什么了，如果你用过它们，请在下面的评论中分享你的经验。感谢你的阅读！

原文链接：https://www.syncfusion.com/blogs/post/blazor-vs-angular.aspx/amp

了解更多软件开发与相关领域知识，点击访问 InfoQ 官网：https://www.infoq.cn/，获取更多精彩内容！