上篇文章讲了Blazor的两种模式的区别及各自的使用场景,本篇就开始学习WebAssembly模式,本篇主要学习的是创建项目及认识项目结构:

  1. 创建项目

选择Blazor应用

选择WebAssemblyApp,并且勾选PWA,之后的文章会说到PWA

创建成功后,运行项目,成功运行

  1. 认识项目结构

项目结构

创建好的项目分成以上几个区域,wwwroot,Pages,Shared,_Imports.razor,App.razor,Program,以下分别介绍下各个部分,这里是我个人的对这个项目的理解,有不对的欢迎指正。

Program

项目运行开始是从Program进来的,builder.RootComponents.Add<App>("app");这里的‘App’类 对应了App.Razor, 括号里的app 对应了 wwwroot下index.html里的<app>标签。名称要一致。index.html算是整个单页应用最大的母版。

index.html

日常使用的通用的js都写在这个index.html里

App.Razor

App.Razor里主要看一个地方就行,就是默认Layout的设置,这里默认的是MainLayout,如果Pages里的Razor 不做特殊声明的话,就是默认使用这个。如果想使用别的,就可以代码头部加@layout LoginLayout (这里是举例,不一定叫LoginLayout)

@page 代表的单页应用里的页面路径

从代码中可以看到大部分之前用js来做的这里用到了C#来写了。比如这里的获取天气信息json数据的,这里用了HttpClient读取。代码很清晰,对于.net开发人员确实是很友好。

_imports.razor

_imports.razor里放了一些引用的命名空间。

以上来块,整个页面的结构是index.html->Layout->Page 一层层嵌套而成。页面之间跳转使用page里的@page来设置路径。不同页面想用不同的layout可以单独设置,很多逻辑可以用C#来实现。这是默认项目给到的东西,下篇将会结合实际项目登录功能讲一个结合js使用的功能。

最新文章

  1. 在Windows用Rebar来构建,编译,测试,发布Erlang项目
  2. Effective C++ 之 Item 5:了解C++默默编写并调用哪些函数
  3. django signal 浅析
  4. BZOJ2789 : [Poi2012]Letters
  5. MINIX3 系统任务分析
  6. uva247 - Calling Circles(传递闭包+DFS)
  7. MVC+MEF+UnitOfWork+EF架构,网站速度慢的原因总结!(附加ANTS Memory Profiler简单用法)
  8. chage命令管理用户口令时效
  9. Chromium如何显示Web页面
  10. EasyUI知识点
  11. 利用PN532读取二代证UID
  12. java集合详解
  13. Java学习笔记之——自动装箱与拆箱
  14. MVC模式-----struts2框架
  15. 【NLP】分词 新词
  16. SAP接口的调用
  17. mysql workbench中my.ini路径不一样
  18. October 31st, 2017 Week 44th Tuesday
  19. sql server 用脚本管理作业
  20. python当中的装饰器

热门文章

  1. 客户端软件GUI开发技术漫谈:原生与跨平台解决方案分析
  2. Java Service Wrapper 浅谈
  3. Head First 设计模式
  4. 入门大数据---Spark车辆监控项目
  5. 利用oracle数据库闪回功能将oracle数据库按时间点恢复
  6. (私人收藏)Vue.js手册及教程
  7. EOS基础全家桶(十四)智能合约进阶
  8. .net core Web API参数绑定规则
  9. 使用MWeb进行博客发布测试
  10. python 如何判断一组数据是否符合正态分布