学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（下）

男娘i 2024-03-16 13:10 11阅读 0赞

## 五、启动第一个Blazor应用程序 ##

8.按F5在调拨模式下运行这个应用程序或者按Ctrl+F5在不调试模式下运行这个应用程序。

第一次在Visual Studio 2022 中运行Web应用程序时，它将为HTTPS托管该应用程序设置开发证书，会弹出两个提示您信任证书的对话框，分别是“信任ASP.NET Core SSL证书”和“信任IIS Express 证书”。如下三个图。我们建议您同意信任该证书，使用鼠标点击“是”按钮。证书将仅用于本地开发。

![a4d2bcea30a048ab47f9884e8f407574.png][]

**图2-11**

![be17a6182d711524697b9e575d31f511.png][]

**图2-12**

![7d062bb9cc49b4827b57b300bafc1080.png][]

**图2-13**

9.在两个证书安装完成之后，等待应用程序在浏览器中启动。如果见到如下图，证明第一个Blazor应用程序成功运行！

![da569ad71ed5b93dc4131131d66fbdaa.png][]

**图2-14**

*  Visual Studio 2022 将启动BlazorAppDemo.exe运行Blazor应用程序。注意，地址栏显示“localhost：端口”而不是域名（如www.cnblogs.com）。这是因为localhost是本地计算机的标准主机名。当Visual Studio 2022创建Web项目时，Web服务器使用随机端口。在上面的图片中，端口号是7110。浏览器中的URL显示“http://localhost: 7110/”。你运行应用程序时，可能会看到一个不同的端口号。

10.在Visual Studio 2022的解决方案资源管理器中，Pages\\Index.razor文件，打开。代码如下。

![cace9d5ec69aeb67e2f8d890cfe67e01.gif][]

@page "/"
    
    <PageTitle>Index</PageTitle>
    
    <h1>Hello, world!</h1>
    
    Welcome to your new app.
     
    
    <SurveyPrompt Title="How is Blazor working for you?" />

![6b867ac4560aef402eb0e5e092de7f1d.gif][]

11.在上面代码的最后一行后面，添加“测试热重载功能 。”这一句话，保存文件之后，我们回到浏览器中，不停的按F5刷新浏览器，无法查看代码更改之后的结果。

12.在Visual Studio 2022的工具栏上，点击“热加载”按钮。如下图中的红框所示。

“热重载”，可以编辑应用程序的代码文件并将代码更改立即应用于正在运行的应用程序。 应用更改后，通过在应用中执行操作（或通过某种计时器等）再次重新执行代码并立即查看更改；不需要通过断点暂停应用！

![d4f137cd0fac08c0a5a74b4c2f940e6c.png][]

**图2-15**

13.不需要重新启动应用程序，不需要刷新浏览器，就可以查看代码更改之后的结果。如下图中。

![059238a924e85b43b7f1fb54a06218df.png][]

[a4d2bcea30a048ab47f9884e8f407574.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/528439b9ef1148d5abd3b036b50e42d6.png
[be17a6182d711524697b9e575d31f511.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f225d6c2080645479905d32aaf9fdd31.png
[7d062bb9cc49b4827b57b300bafc1080.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/5dfd0e15ecc74922abc65391b9bbdc2b.png
[da569ad71ed5b93dc4131131d66fbdaa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/0720a7c5c3cd4c7d8bfd20496a403eaf.png
[cace9d5ec69aeb67e2f8d890cfe67e01.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/938cfb628b2247028274dfc0c1393245.png
[6b867ac4560aef402eb0e5e092de7f1d.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f8c1d9f8a41744e2893b628c1b3c887b.png
[d4f137cd0fac08c0a5a74b4c2f940e6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/af325602b2314957b853e469a4628f8d.png
[059238a924e85b43b7f1fb54a06218df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/3e52dad4b35d4fbc99b02a59a1d92ab6.png