用ASP.NET创建一个Blazer Web应用程序

用ASP.NET创建一个Blazer Web应用程序

Build a Blazer Web Application Using ASP.NET

By Jackson@ML

本文旨在引导读者使用.NET框架进行ASP.NET开发,从而实现构建一个Blazer Web应用程序。希望对读者有所帮助。

1. 获取.NET最新版SDK

打开Chrome浏览器,访问微软.NET官网链接:https://dotnet.microsoft.com/en-us/,如下图。

点击Download,进入到下载页面。

点击下载,之后可以安装最新版.NET SDK 10.0.0, 至于安装使用,可以参照文章:2025最新版.NET 10.0安装使用指南。此处不再赘述。

2. 下载安装Visual Studio Code及其Extension

为了实现使用.NET开发Blazer Web应用程序,需要安装集成开发环境(IDE)。最常用的莫过于Visual Studio Code。

至于如何安装使用Visual Studio Code最新版,可以参照文章:2025最新版Visual Studio Code for Mac安装使用指南。本文不再赘述。

VS Code安装完毕后,创建一个Blazer所用的Web应用程序文件夹,例如:BlazerDemo。

3. 创建Blazer Web应用程序

在VS Code中,选定上述的项目文件夹。使用组合键Shift+Command+P 启动搜索栏,搜索".NET: New Project", 选择该选项并按Enter键。此时,VS Code立刻更新Extension。

随后,弹出新的下拉菜单项,输入并选择Blazor Web App,按Enter键。

可以对新的项目命名为:BlazorApp1。系统自动配置完毕后,将文件架构显示在VS Code左侧区域。

打开新的Terminal(终端)窗口,切换到新建的项目文件夹:

csharp 复制代码
$ cd BlazorApp1

然后,执行以下命令以运行.NET应用程序:

csharp 复制代码
$ dotnet run

此时,按照提示,在Chrome浏览器中,输入本地主机地址:http://localhost:5205/ ,然后按Enter键,出现下方Web应用视图。

*注意: 有另一种替代方法如下。打开新的Terminal(终端)窗口,并执行以下命令创建命令 Blazor Web App:

$ dotnet new blazor -o BlazorApp1

另外,代码完成后,也可在Terminal中执行以下命令预览Web应用:

csharp 复制代码
$ dotnet watch

此时,启动本地主机将自动启动Chrome浏览器到应用程序的登录主页面,点击左侧导航栏的Weather按钮,则显示天气情况:

至此,利用VS Code构建的基于ASP.NET的Blazer Web应用程序成功上线了!


.NET开发技术好文陆续推出。敬请关注、收藏和点赞👍!

您的认可,我的动力!😃

推荐阅读:

  1. 2025最新版.NET 10.0 for Mac安装使用指南
  2. 360度看C#编程语言
  3. 2025最新版Python 3.14.0安装使用指南
  4. 用Visual Studio Code最新版开发C#应用程序
  5. 用JetBrains Rider开发C#应用程序
  6. 在macOS上搭建C#集成开发环境指南
  7. 2025最新版Eclipse for Java安装使用指南
相关推荐
你脸上有BUG27 分钟前
【工程化】记给ant-design-vue打补丁的示例
前端·javascript·vue.js·补丁·ant-design-vue
灰灰勇闯IT1 小时前
Flutter for OpenHarmony:布局组件实战指南
前端·javascript·flutter
⑩-2 小时前
Vue框架学习
前端·vue.js·学习
a程序小傲2 小时前
京东Java面试被问:基于Gossip协议的最终一致性实现和收敛时间
java·开发语言·前端·数据库·python·面试·状态模式
小二·2 小时前
Python Web 开发进阶实战:AI 原生应用商店 —— 在 Flask + Vue 中构建模型即服务(MaaS)与智能体分发平台
前端·人工智能·python
Devlive 开源社区2 小时前
技术日报|推理RAG文档索引PageIndex登顶日增1374星,React视频工具Remotion二连冠进前二
前端·react.js·前端框架
xkxnq2 小时前
第三阶段:Vue 路由与状态管理(第 45 天)(路由与状态管理实战:开发一个带登录权限的单页应用)
前端·javascript·vue.js
方方洛2 小时前
技术实践总结:schema-bridgion:json、xml、yaml、toml文件相互转换
xml·前端·typescript·node.js·json
object not found3 小时前
基于uniapp开发小程序自定义顶部导航栏状态栏标题栏
前端·javascript·小程序·uni-app
We་ct3 小时前
LeetCode 28. 找出字符串中第一个匹配项的下标:两种实现与深度解析
前端·算法·leetcode·typescript