Blazor带我重玩前端(三)
VS自带的Blazor模板介绍
需要升级VS2019以及.NET Core到最新版(具体的最低支持,我已经忘了,总是越新支持的就越好),以更好的支持自己开发Blazor项目。
使用VS创建Blazor WebAssembly项目
搜索Blazor模板
选择Blazor WebAssembly App模板
项目实例
项目实例
BlazorApp.Shared:提供最一般的支持,包括各个Model
BlazorApp.Client:依赖BlazorApp.Shared,该项目侧重于Pages功能
BlazorApp.Server:依赖BlazorApp.Shared、BlazorApp.Client,该项目侧重于提供接口功能
BlazorApp.Client
项目结构
从上图可知 该项目主要包括wwwroot、Pages、Shared三个文件夹,以及_Imports.razor、App.razor、Program.cs这三个单独的文件。
wwwroot
这个文件夹和我们ASP.NET Core MVC里的wwwroot基本一致,不过需要注意的是,这个文件夹里面有一个比较重要的文件index.html,它是我们Blazor项目的起点。这个文件里也引用了blazor.webassembly.js,可是我们在项目中没有看到。这没关系,因为它会由Microsoft.AspNetCore.Components.WebAssembly.Build提供,在运行编译的时候会自己出现的。
Shared
这个文件夹里,有三个文件,分别是MainLayout.razor、NavMenu.razor、SurveyPrompt.razor。
MainLayout是Layout文件,它定义了该项目的基本布局
NavMenu是Component,它实现了菜单功能,并对外提供了独立而又单一的组件功能
SurveyPrompt也是Component,它实现了文件传入与连接跳转功能,对外也是提供了独立而又单一的菜单功能,同时这也是一个带参的组件 组件功能后续会详细介绍,但是需要提前说明的是,任何组件一经对外使用,都是独立而又单一的。接下来看一下运行后的效果图:整体的风格、左侧的菜单、右侧的链接都像我们展示了布局和组件功能
Pages
里面定义了三个.razor文件,这也是模板提供给我的Blazor编写案例
Index.razor向我们展示了,组件的调用
FetchData.razor向我们展示了Call远程API和路由功能(@page "/fetchdata")
Counter.razor向我们展示了事件调用
其他文件
_Imports.razor,这个文件和我们在ASP.NET Core项目中的_Imports.cshtml文件,没有什么区别
App.razor,这是根组件,里面定义了路由功能、默认布局、以及404展示
Program.cs 在职能上和我们ASP.NET Core项目的Program.cs文件也没有什么区别,但是里面定义了Http所要调用的EndPoint(builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });)
运行项目
设置BlazorApp.Server为启动项目
下载必须文件如图所示,我们需要加载6.15M的文件,同时可以看到Blazor的运行时信息mono_wasm_runtime_ready。
接下来,我们展开Object来看看其详细信息,会看到Object中有太多的依赖程序集。
打开源代码tab页,会看到以下几个文件
dotnet.wasm文件,打开后,会看到我们前文说过的WebAssembly文本格式的内容。
blazor.webassembly.js,用于下载.NET运行时,依赖程序集等,同时还会初始化运行应用的程序集
dotnet.3.2.0.js也是我们之前所说的用于调用C#方法的JS文件
添加页面
这个比较简单,如下操作即可接下来的内容我们将以此模板为例,进行展开讨论
Blazor带我重玩前端(三)相关推荐
- Blazor带我重玩前端(四)
布局 Blazor中的布局和MVC中的布局是类似的. 创建布局 新建一个Razor页面,所有新增的布局都要继承LayoutComponentBase,同时标识自定义内容的输出位置,即标识Body的位置 ...
- Blazor带我重玩前端(六)
本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第二篇. 双向绑定 概述 如图所示 当点击单项绑定的时候,MyOnewayComponent里的属性值会发生变 ...
- Blazor带我重玩前端(五)
概述 本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第一篇,后续会有第二篇. 我们可以视组件是一个类,我们先看一下前文所说的Index.Razor页面生成的 ...
- Blazor带我重玩前端(一)
写在前面 曾经我和前端朋友聊天的时候,我说我希望有一天可以用C#写前端,不过当时更多的是美好的想象,这一切正变得真实-- 什么是Blazor 我们知道浏览器可以正确解释并执行JavaScript代码, ...
- Blazor带我重玩前端(二)
概览 Blazor目前有两种托管模式,一种是Server-Side模式,一种是WebAssembly模式.官方首先支持的是Service-Side模式,使用WebAssembly模式,需要更新到最新版 ...
- 重学前端学习笔记(三十六)--Flex 布局
笔记说明 重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
- 重学前端学习笔记(十三)--浏览器工作解析(三)
笔记说明 重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
- 一个计算机爱好者的不完整回忆(十五)自带游戏你玩过么?
Windows自带的小游戏小软件你们都玩过么? Windows捆绑的最古老的程序是啥我不知道,我知道的是纸牌游戏,知道windows做这个游戏干什么么?是为了让大家练习鼠标操作的,你会用到拖动.双击等 ...
- 判断字符串 正则_(重学前端 - JavaScript(模块一)) 14、引用类型之 RegExp (正则)(详述)...
上一篇文章介绍了 JavaScript 中的 Date 类型,从地理方面的原理知识开始入手,如果大家认真看过上一篇文章,相信 JavaScript 中的 Date 类型已经难不住大家了!!! 但是今天 ...
最新文章
- 早上起来收到两个消息
- Sql Server之旅——第十四站 深入的探讨锁机制
- 视频培训网站发布问题
- ZeroClipboard 和JqueryUI_dialog 完美组合!
- Python的oop概述
- FastDFS部署及测试
- CS231n(1):图片分类笔记与KNN编程作业
- 机器人中的轨迹规划(Trajectory Planning )
- IT管理如何从“普通”走向“高效”?
- python关键词提取源码,python实现textrank关键词提取
- 使用广泛的开源PCB文件查看器 Gerbv 含多个严重漏洞
- android 音频设备类型,实现车载音频 HAL | Android 开源项目 | Android Open Source Project...
- 构筑基于物联网操作系统的物联网生态环境【转】
- .mmap文件用什么软件可以打开?
- 远程小组软件开发过程(3):人
- python列表平均值的算法_python计算一个序列的平均值的方法
- 最新微信记录恢复工具MMRecovery的下载与使用方法
- 车载以太网测试:关于测试
- 如何把两段即以上视频合并成一个
- div 页面框架布局
热门文章
- Java线程与Linux内核线程的映射关系
- 如何保护你的linux操作系统
- thinkphp的select和find的区别(转)
- cmd命令不识别exp_Cmder-超量级的Cmd
- 【Filecoin源码仓库全解析】第一章:搭建Filecoin测试节点
- maven,gradle本地缓存位置
- The SDK platform-tools version ((23)) is too old to check APIs compiled with API 26;
- Winform VS2015打包
- ftp服务器搭建遇到的问题
- Mysql 常用函数总结