开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在Chrome中使用swagger和Blazor WebAssembly

在Chrome中使用Swagger和Blazor WebAssembly

Swagger是一种用于设计、构建、文档化和使用RESTful Web服务的开源工具集。它提供了一种简单且易于理解的方式来描述API，并生成交互式文档。Swagger可以帮助开发人员和团队更好地理解和使用API，提高开发效率。

Blazor WebAssembly是一个用于构建现代、交互式Web应用程序的.NET Web框架。它允许开发人员使用C#和.NET技术来构建客户端Web应用程序，而无需编写JavaScript代码。Blazor WebAssembly通过在浏览器中运行.NET代码，实现了在客户端执行的功能，从而提供了更好的性能和开发体验。

在Chrome中使用Swagger和Blazor WebAssembly可以通过以下步骤进行：

安装Swagger插件：在Chrome浏览器中，打开Chrome Web Store，搜索并安装Swagger插件。Swagger插件可以帮助我们在浏览器中直接查看和测试API。
配置Swagger文档：在项目中使用Swagger注解来描述API，并生成Swagger文档。Swagger文档通常以JSON或YAML格式提供。将Swagger文档部署到服务器上，并确保可以通过URL访问。
在Chrome中打开Swagger文档：在Chrome浏览器中，输入Swagger文档的URL地址，打开Swagger文档页面。在该页面上，你可以查看API的详细信息，包括请求和响应的参数、示例代码等。
测试API：在Swagger文档页面上，你可以直接测试API。选择一个API端点，输入请求参数，并点击"Try it out"按钮。Swagger插件将自动发送请求，并显示响应结果。
使用Blazor WebAssembly开发应用程序：在Chrome浏览器中，打开Blazor WebAssembly应用程序的开发环境。使用C#和.NET技术来编写应用程序的前端逻辑和界面。Blazor WebAssembly提供了丰富的组件和功能，可以帮助开发人员快速构建现代化的Web应用程序。

总结：在Chrome中使用Swagger和Blazor WebAssembly可以帮助开发人员更好地设计、构建和测试API，并使用C#和.NET技术来开发现代化的Web应用程序。Swagger插件提供了方便的API文档查看和测试功能，而Blazor WebAssembly则提供了强大的前端开发框架和工具。这些技术的结合可以提高开发效率，并提供更好的用户体验。

腾讯云相关产品推荐：

腾讯云API网关：https://cloud.tencent.com/product/apigateway
腾讯云云开发：https://cloud.tencent.com/product/tcb
腾讯云云原生应用引擎：https://cloud.tencent.com/product/tke
腾讯云云服务器：https://cloud.tencent.com/product/cvm
腾讯云对象存储：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云人工智能：https://cloud.tencent.com/product/ai

相关搜索:Appsetting.json表示在尝试使用Blazor WebAssembly时未找到 Blazor -在blazor组件中不起作用的JavaScript/Bootstrap动画和脚本 InputFile在Blazor和Visual Studio中的位置？toDataURL()无法使用Blazor Webassembly中的JS Interop保存HTML5画布的内容？WebAssembly Blazor在IIS上部署时不使用令牌为什么我的blazor webassembly只在chrome上有可安装的图标/弹出窗口，而在opera或firefox上却没有可以在Blazor中使用Vue和Vue组件吗？在blazor webassembly中设置背景图像在Blazor Webassembly中读取.NET中的Javascript变量在Blazor WebAssembly中，如何编写警告或信息？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Blazor学习之旅(1)初步了解Blazor

2022年9月以来在学习Blazor做全栈开发，因此根据老习惯，我会将我的学习过程记录下来，一来体系化整理，二来作为笔记供将来翻看。作为第一篇，我们先来了解一下这个Blazor到底是个什么鬼。

02

全面的ASP.NET Core Blazor简介和快速入门

因为咱们的MongoDB入门到实战教程Web端准备使用Blazor来作为前端展示UI，本篇文章主要是介绍Blazor是一个怎样的Web UI框架，其优势和特点在哪？并带你快速入门上手ASP.NET Core Blazor(当然这个前提是你要有一定的C#编程基础的情况，假如你完全没有接触过C#的话建议你先从基本语法学起)。

02

别了，JavaScript；你好，Blazor

Web开发与JavaScript开发向来是同义词。直到WebAssembly的横空出世，WebAssembly (Wasm)是一种在浏览器中可以执行的二进制指令。 WebAssembly 的官方工具链能够编译 C/C++ 代码，但许多社区也提供了不同语言的编译器，如 Rust，Python，Java 和 Blazor(C#)。特别是 Rust 社区非常活跃，可以开始看到完整的前端框架，如 Yew 和 Dodrio，这为基于浏览器的应用带来了更多新的可能性，只要测试一些使用 WebAssembly 构建的优秀应用，就可知道基于浏览器的近乎原生的应用现在已经成为现实，例如 Sketchup 或 Magnum。

03

MasaFramework入门第二篇，安装MasaFramework了解各个模板

Masa Blazor App的模板创建的是一个没有携带解决方案的项目模板，默认项目结构如图：

03

Blazor 中如何下载文件到浏览器

最近想给之前文章《下载中转加速器 VPSDownloader.NET（.NET Core 程序部署到 Linux 系统）》中提到的 VPS 文件中转下载服务添加一个前端页面，其实之前也想使用热门的前端框架 Vue 来做，也做了点工作了，但是毕竟不是前端开发，上手起来还是比较慢的，而且引入了 NodeJS 等技术栈，和后端的 ASP.NET Core WebApi 也不共存于一个项目，开发和维护起来不太方便。后来了解到了发展如火如荼的 Blazor 框架，这个是微软开发的 .NET 领域的前端框架，在某种程度上和以前的 WebForm 有点类似，不过以前那个是微软自己搞的，大家都不待见它，现在这个是符合 Web 领域新标准 WebAssembly，而且 UI 方面也可以使用现有的成熟库。总之，使用 Blazor，可以使用 C# 代码来代替（当然也是兼容的）JavaScript 代码，使 .NET 开发人员能有极致的全栈开发体验，颠覆以往那种 “师夷长技以制夷” 的前端开发方式，所以决定学习使用一下。另外，本文的 Blazor 项目使用 Blazor Server 模式，而不是 Blazor WebAssembly 模式。

01

Blazor资源大全，很棒的Blazor(2)

.NET Foundation提供的Blazor应用程序构建工作坊，Blazzing Pizza。

02

对打 Angular，Blazor 赢在哪里？

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

03

创建API服务最小只要4行代码！！！尝新体验ASP.NET Core 6预览版本中的最小Web API(minimal APIS)新特性

本文首发于《创建API服务最小只要4行代码！！！尝新体验ASP.NET Core 6预览版本中的最小Web API(minimal APIS)新特性》

03

.NET周报【12月第2期 2022-12-15】

https://mp.weixin.qq.com/s/HJYnBE-7wbvkAYHxQaq3eQ

02

.NET 8 Preview 5发布，了解一下Webcil 是啥

2023年6月13日 .NET 8 Preview 5，.NET 团队在官方博客发布了系列文章：

03

.NET 8 Release Candidate 1 (RC1)现已发布，包括许多针对ASP.NET Core的重要改进！

这是我们计划在今年晚些时候发布的最终.NET 8版本之前的两个候选版本中的第一个。大部分计划中的功能和变更都包含在这个候选版本中，可以供您尝试使用。您可以在文档中找到完整的ASP.NET Core在.NET 8中的新功能列表[1]。一些领域（尤其是Blazor）仍然有一些重大的变更待完成，我们预计将在下一个.NET 8候选版本中完成这些变更。

04

使用Jexus 容器化您的 Blazor 应用程序

在本文中，我们将介绍如何将 Blazor 应用程序放入Jexus 容器以进行开发和部署。我们将使用 .NET Core CLI，因此无论平台如何，使用的命令都将是相同的。

01

.NET平台系列10 .NET统一平台愿景

2019年，微软分享了【统一的.NET堆栈和生态系统的愿景】。给开发者带来的价值是，将能够使用一组API，语言和工具来针对广泛的应用程序类型，包括移动，云，桌面和IoT。可能会意识到，如今已经可以使用.NET定位广泛的平台，但是，这些工具和API在Web和Mobile上并不总是相同的，例如它们不是同时发布的。

01

Blazor资源大全，很棒的Blazor（1）

Blazor允许您使用C#而不是JavaScript构建交互式Web用户界面。Blazor应用程序由使用C#、HTML和CSS实现的可重用的Web用户界面组件组成。客户端和服务器代码都是用C#编写的，允许您共享代码和库。更多信息请参阅官方Blazor网站[22]。

05

Blazor WebAssembly 修仙之途 - 初尝

Blazor 是一个可是使用 .NET/C# 来编写交互式客户端的 Web UI 框架，在官网有一句话概括 “Build client web apps with C#”。在 Blazor 里面有三个比较重要的概念：

01

.NET周刊【8月第2期 2023-08-14】

本周由于Myuki大佬感染新冠，国际板块暂停更新一周，将在下周补齐，所以本周只有国内板块。

01

Day 02 网页和Blazor介绍

笔者对网站的认知为前端、后端及数据库，使用者在浏览器页面按下按钮或是表单请求，触发前端事件，将收集起来的条件打包送往后端，后端接收条件后去数据库据此处理判断，捞出使用者想要的数据后，后端将页面、数据回传给前端，前端再将相应数据呈现在页面上，这就是最原始的前后端交流。

02

如何优化线上WebAssembly

WebAssembly部署使用 HTTPS ：为什么？我可以通过一个案例查看，下面我们会通过masa docs站点进行测试打开 http://docs.masastack.com/blazor/getting-started/installation 网站查看网络耗时

02

什么将会替代 JavaScript 呢？

JavaScript 正在蓬勃发展。但由于 WebAssembly 的出现，它的衰落可能只是一个时间问题。

02

.NET 8 Preview 6发布，支持新的了Blazor呈现方案和 VS Code .NET MAUI 扩展

2023年7月11日 .NET 8 Preview 6，.NET 团队在官方博客发布了系列文章：

02

NET 8 预览版 2 亮点是Blazor

.NET 团队在2023年3月14日发布了.NET 8预览版2，博客文章地址：https://devblogs.microsoft.com/dotnet/announcing-dotnet-8-preview-2/，亮点是了对Blazor的一些改进。

05

Blazor带我重玩前端(一)

曾经我和前端朋友聊天的时候，我说我希望有一天可以用C#写前端，不过当时更多的是美好的想象，这一切正变得真实……

01

最流行的 .NET 开源项目合集

Github 上有很多优秀的 .NET 开源项目，它们很适合用来学习 .NET 、设计模式和架构。

02

一个新实验：使用gRPC-Web从浏览器调用.NET gRPC服务

无法在浏览器中实现gRPC HTTP / 2规范，因为没有浏览器API能够对HTTP请求进行足够的细粒度控制。gRPC-Web通过与HTTP / 1.1和HTTP / 2进行兼容来解决此问题。

03

.NET Core/.NET5/.NET6 开源项目汇总8：Blazor项目

Ant Design Blazor是一套基于 Ant Design 和 Blazor 的企业级组件库。

03

通过 Serverless 加速 Blazor WebAssembly | 社区精选文章

本文为 Serverless 社区成员撰稿。作者杨舜杰，系统架构研发工程师，开源爱好者，.NET开源项目shriek-fx作者。供稿请戳~ 作为一种新型的开发架构，Serverless具备低人工、基础设施成本、低故障风险、高扩展性以及交付周期短等优势，但是在真正落地方面还面临成本费用过高、开发支持欠缺以及开源标准不统一等难题。腾讯云基于自身在计费模式、开发体验以及上下游生态等方面的超前探索，正在引领Serverless的行业“新标准”。 Blazor 与 Serverless 初遇我正在开发 Ant

05

Blazor资源大全，很棒的Blazor(3)

更新 .razor 文件并立即查看更新，无需重新加载页面。由于无需重新加载任何内容，因此保留了应用程序状态。livesharp.net。

04

Blazor学习之旅 (14) Blazor WebAssembly

在上一篇我们学习了如何创建和使用Razor类库，这一篇我们了解下WebAssembly是什么，以及创建第一个Blazor WebAssembly应用。

01

Blazor VS React / Angular / Vue.js

Blazor是一项新的Microsoft技术，允许开发人员使用C＃为浏览器编写代码, 本文将Blazor与其他三个常见SPA框架进行了比较：React，Angular和Vue.js, JavaScript是当前基于浏览器的单页应用程序（SPA）最受欢迎的语言，因为直到最近，它还是在浏览器中运行的唯一语言。这些框架可以从JavaScript或TypeScript进行编译或转换。本文询问开发人员是否需要依赖JavaScript，以及我们是否可以开始使用C＃构建SPA应用程序。

01

Blazor VS React / Angular / Vue.js

Blazor是一项新的Microsoft技术，允许开发人员使用C＃为浏览器编写代码, 本文将Blazor与其他三个常见SPA框架进行了比较：React，Angular和Vue.js, JavaScript是当前基于浏览器的单页应用程序（SPA）最受欢迎的语言，因为直到最近，它还是在浏览器中运行的唯一语言。这些框架可以从JavaScript或TypeScript进行编译或转换。本文询问开发人员是否需要依赖与JavaScript，以及我们是否可以开始使用C＃构建SPA应用程序。

00

在Blazor中使用Chart.js快速创建图表

BlazorChartjs是一个在Blazor中使用Chart.js的库（支持Blazor WebAssembly和Blazor Server两种模式），它提供了简单易用的组件来帮助开发者快速集成数据可视化图表到他们的 Blazor 应用程序中。本文我们将一起来学习一下在Blazor中使用Chart.js快速创建图表。

01

Day 03：Blazor Server和Blazor WebAssembly的差异

下载Visual Studio后首先建立一个Blazor解决方案，里面建立Blazor Server项目，方案位置可以自己选择(注：新版Visual Studio将Blazor Server跟Blazor WebAssembly的新建项目模板拆分了，较为直观)，先不管里面的程序，按下F5执行后在网页按下F12或是Ctrl+Shift+I开启开发人员工具(Dev tool)，切换到Network页签后重新加载网页，可以看到几个文件，其中blazor.server.js就是在服务器跟浏览器之间通过SingalR建立WebSocket通道的文件。

03

ASP.NET Core Blazor 初探之 Blazor Server

上周初步对Blazor WebAssembly进行了初步的探索(ASP.NET Core Blazor 初探之 Blazor WebAssembly)。这次来看看Blazor Server该怎么玩。

02

最流行的WebAssembly Web开发框架： Blazor

最新的一份《The State of WebAssembly 2022》调查报告已出炉，“对于 WebAssembly 来说，这是相当不错的一年”。报告的一些重点内容包括：

02

C#+web=？微软Blazor

C#是微软公司发布的一种面向对象的、运行于.NET Framework和.NET Core(完全开源，跨平台)之上的高级程序设计语言。

01

(7/30)Blazor系列：生命周期(Lifetime)

前面说过自己建立的Service都必须在Program.cs注册，但有些基本Service就不用自己做了。

03

浏览器里能跑C#？竟然有这样的神奇技术！

本号已有原创文章250+篇，以软件工程为纲，DevOps为基，洞察研发效能全貌，涵盖从需求管理、应用/游戏开发、软件测试、发布部署到运营监控的完整流程。无论您是项目经理、产品经理、开发人员、测试人员，还是运维人员，在这里您都可以有所收获，同时深入理解其他角色的工作内容，共同助力DevOps的成功落地。欢迎关注，有任何问题可发送私信~

01

.NET5 Blazor初探

经常看我公众号的朋友应该能看出来，我的文章基本都是.Net、Android、OpenCV的相关的，用到的语言C#、Kotlin、C++、还有现在偶尔还维护下的Delphi老代码。本来也想空余时间学一下前端的，公众号里也有几篇VUE文章，后台没再继续学习的主要原因就是学习的成本太高，除了JS的语言，像编译部署、环境搭建、跨域访问等一系列的东西，需要花费的时间太多。前阵子.Net5发布后跟着做了个小的东西，也是无意间看到了Blazor后，抱着测试看看是否占用学习时间太多的想法做了个Demo，于是有这今天这篇。

01

Blazor带我重玩前端(二)

Blazor目前有两种托管模式，一种是Server-Side模式，一种是WebAssembly模式。官方首先支持的是Service-Side模式，使用WebAssembly模式，需要更新到最新版VS2019。小编目前的精力是更多的专注于Blazor-WebAssembly模式的研究，所以本系列文章只会对Server-Side模式做简要说明。

02

Blazor带我重玩前端(三)

需要升级VS2019以及.NET Core到最新版（具体的最低支持，我已经忘了，总是越新支持的就越好），以更好的支持自己开发Blazor项目。

03

用 Blazor WebAssembly 实现微前端

我聊下最近我在做的事情，然后分享下在Blazor WebAssembly 微前端的实现细节，这篇文章是我的一些心得，以及一个示例的 Demo 项目，展示了如何使用Blazor 实现多模块分布式的应用程序的微前端，如下图所示。

00

8 个 WebAssembly 应用案例直击 /转

除了瀏覽器業者、遊戲業者大力支援WebAssembly外，許多需要加速效能表現的大型網頁應用或線上工具，也都能得利於WebAssembly的超快執行速度。目前WebAssembly已經開始應用在哪些場景呢？從這8個WebAssembly應用可以一探究竟，其中，有些專案更在GitHub上釋出了原始程式碼，可供開發者參考，來打造出自己的WebAssembly應用。

04

在 .NET 7上使用 WASM 和 WASI

WebAssembly（WASM）和WebAssembly System Interface（WASI）为开发人员开辟了新的世界。.NET 开发人员在 Blazor WebAssembly 发布时熟悉了 WASM。Blazor WebAssembly 在浏览器中基于 WebAssembly 的 .NET 运行时上运行客户端。WASI通过提供一个系统接口来在Web之外运行WebAssembly，从而将WASM带出浏览器世界。它是 WASM 模块如何与主机环境交互的标准。

01

Visual Studio 中的 Blazor WebAssembly 与Blazor Server 项目模板区别

在 Visual Studio 中，有两种主要的 Blazor 项目模板：Blazor WebAssembly 和 Blazor Server。这两种模板都可以用于构建现代化的、交互性强的 Web 应用程序，但它们在实现方式和使用场景上存在一些区别。

01

.NET8 Blazor的Auto渲染模式的初体验

通过VS创建Blazor应用时，选择Blazor Web App这个新模板。过程中可以看到有四种模板可供选择。我们可以选择Auto来体验。

04

MAUI 与 Blazor 共享一套 UI 实现（五端通用）

距离上次发《MAUI初体验：爽》一文已经过去2个月了，本计划是下半年或者明年再研究MAUI的，现在计划提前啦，因为我觉得MAUI Blazor挺有意思的：在Android、iOS、macOS、Windows之间共享UI，一处UI增加或者修改，就能得到一致的UI体验。

01

ASP.NET Core Blazor WebAssembly 之 .NET JavaScript互调

Blazor WebAssembly可以在浏览器上跑C#代码，但是很多时候显然还是需要跟JavaScript打交道。比如操作dom，当然跟angular、vue一样不提倡直接操作dom；比如浏览器的后退导航。反之JavaScript也有可能需要调用C#代码来实现一些功能，毕竟客户的需求是千变万化的，有的时候只能通过一些hack的手段来实现。

01

快速了解 ASP.NET Core Blazor

最近在几个微信 .NET 交流群里大家讨论比较频繁的话题就是这几天自己的面试经历。

01

C#程序员的福音来啦，Blazor框架概览

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

02

ASP.NET Core Blazor Webassembly 之渐进式应用(PWA)

Blazor支持渐进式应用开发也就是PWA。使用PWA模式可以使得web应用有原生应用般的体验。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭