Blazor带我重玩前端(三)
写在前面
需要升级VS2019以及.NET Core到最新版(具体的最低支持,我已经忘了,总是越新支持的就越好),以更好的支持自己开发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向我们展示了事件调用
运行项目
设置BlazorApp.Server为启动项目
1. 下载必须文件
如图所示,我们需要加载6.15M的文件,同时可以看到Blazor的运行时信息mono_wasm_runtime_ready。
2. 接下来,我们展开Object来看看其详细信息,会看到Object中有太多的依赖程序集。
3. 打开源代码tab页,会看到以下几个文件
- dotnet.wasm文件,打开后,会看到我们前文说过的WebAssembly文本格式的内容。
- blazor.webassembly.js,用于下载.NET运行时,依赖程序集等,同时还会初始化运行应用的程序集
- dotnet.3.2.0.js也是我们之前所说的用于调用C#方法的JS文件
添加页面
这个比较简单,如下操作即可
接下来的内容我们将以此模板为例,进行展开讨论
Blazor带我重玩前端(三)的更多相关文章
- Blazor带我重玩前端(四)
布局 Blazor中的布局和MVC中的布局是类似的. 创建布局 新建一个Razor页面,所有新增的布局都要继承LayoutComponentBase,同时标识自定义内容的输出位置,即标识Body的位置 ...
- Blazor带我重玩前端(一)
写在前面 曾经我和前端朋友聊天的时候,我说我希望有一天可以用C#写前端,不过当时更多的是美好的想象,而现在这一切正变得真实…… 什么是Blazor 我们知道浏览器可以正确解释并执行JavaScript ...
- Blazor带我重玩前端(五)
概述 本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第一篇,后续会有第二篇. 我们可以视组件是一个类,我们先看一下前文所说的Index.Razor页面生成的 ...
- Blazor带我重玩前端(六)
本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第二篇. 双向绑定 概述 如图所示 当点击单项绑定的时候,MyOnewayComponent里的属性值会发生变 ...
- Blazor带我重玩前端(二)
概览 Blazor目前有两种托管模式,一种是Server-Side模式,一种是WebAssembly模式.官方首先支持的是Service-Side模式,使用WebAssembly模式,需要更新到最新版 ...
- 重学前端 --- Promise里的代码为什么比setTimeout先执行?
首先通过一段代码进入讨论的主题 var r = new Promise(function(resolve, reject){ console.log("a"); resolve() ...
- node十年心酸史,带你了解大前端的由来!
前言 近年来,随着前端的丰富,前后端分离是趋势.各种东西如雨后春笋一般,层出不穷.node.js的出现,使前端真正意义上变成了大前端. 前端由来之HTML发展史 1990 年,Tim Berners- ...
- 重学前端--js是面向对象还是基于对象?
重学前端-面向对象 跟着winter老师一起,重新认识前端的知识框架 js面向对象或基于对象编程 以前感觉这两个在本质上没有什么区别,面向对象和基于对象都是对一个抽象的对象拥有一系列的行为和状态,本质 ...
- 带你轻松玩转Git--图解三区结构
在上篇文章的结尾我们提到了Git 的三区结构,在版本控制体系中有这样两种体系结构,一种是两区结构一种是三区结构.接下来我们通过对Git三区的结构学习来帮助我们更好的去理解并运用Git. 两区结构是其他 ...
随机推荐
- GitHub 热点速览 Vol.23:前后端最佳实践
作者:HelloGitHub-小鱼干 摘要:最佳实践,又名 best-practices,是 GitHub 常见的项目名,也是本周 Trending 关键词.25 年 Python 开发经验的 Dav ...
- javaScript的执行机制-同步任务-异步任务-微任务-宏任务
一.概念理解 1.关于javascript javascript是一门单线程语言,在最新的HTML5中提出了Web-Worker,但javascript是单线程这一核心仍未改变.所以一切javascr ...
- Vue中解决新脚手架3创建项目的移动端双击屏幕放大,双手拉动放大的方法
替换新版vue-cli创建项目的public>index.html <!DOCTYPE html> <html lang="en"> <head ...
- Markdown入门学习202004
Markdown入门学习202004 推荐使用Typora这款轻量级markdown编辑软件 标题 # 一级标题(井号后面有空格) ## 二级标题 ### 三级标题 ...... ###### 最多到 ...
- 第一次前端实习机试题 很粗糙的一个天气预报demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- nginx下如何l在网站目录的二级目录下url重写的方法
以我新项目为例子,该项目要求用laravel来做,因此我把整个项目丢到一个叫laravel的文件夹里面了,目录就变成c:/nginx/html/laravel了,然后发现只能通过localhost/l ...
- uni-app动态修改顶部导航栏标题
动态修改顶部导航栏标题有两种方法方式一.使用自定义到导航栏,覆盖原生导航栏 缺点:自定义到导航栏性能远远不如原生导航栏,手机顶部状态栏区域会被页面内容覆盖,这是因为窗体是沉浸式的原因,即全屏可写内容: ...
- Anaconda 安装 以及conda使用
下载 https://www.anaconda.com/distribution/#macos 管理 conda 版本查看 conda --version conda 版本更新 conda updat ...
- ESP8266服务器模式 发送数据和接收数据 模板1
功能如下: 1.将客户端发来的数据转发到串口:2.串口数据转发给所有客户端3.可连接4个客户端4.可设置静态IP地址5.指示灯闪烁表示无客户端连接,灯亮代表有客户端连接 /** 功能: 1.将客户端发 ...