一 为什么用Blazor

　　　　原本就是后端程序员, 技术栈基于C#, 懂一点前端jQuery/Html

　　　　不管是webAssembly还是ServerSide, 就是想方便地做单页应用, 能wasm自然更好

　　　　对于项目进行一定阶段后繁琐的大量js调用如何合理规划很苦恼, 又没有深入了解流行的前端框架无法给出符合后端思维的解决方案.

　　二 创建一个Blazor项目

　　　　Visual Studio2019选择较成熟的ServerSide Blazor模板创建项目. 或者直接在原有asp.netcore项目的startup中注入blazor中间件.

　　　　blazor是可以和asp.netcore mvc共存的.

　　三 选择一款WebUI库

　　　　AdminLTE3, 多少年了Bootstrap+jQuery一把梭

　　四 做母版页/Layout

　　　　曾经的母版页后来的Layout, 现在的Blazor也有这样的东东, 一个razor组件+@Body搞定.

　　　　模板上需要子页面填充的部分用级联参数CascadingValue/CascadingParameter搞定, 如Title\Header之类的

　　五 菜单项与页面的激活状态同步

　　　　子页面的页标题\navBar\siderBar\面包屑等

　　　　可使用级联参数或者组件事件解决. 激活状态css由事件监听后修改activate属性绑定, 可以实现多级菜单状态绑定, 需要引入@inject NavigationManager NavigationManager, 核心事件NotifyLocationChanged

　　六 页面与服务器的数据交互

　　　　@inject XXXService

　　　　支持接口调用/支持事件触发(推送)

　　七 后感

　　　　用来做内部使用的监控系统/后台之类的很方便

Blazor入坑指南的更多相关文章

  1. electron入坑指南

    electron入坑指南 简介 electron 实际集成chrome浏览器和node环境, 运行你写的网页 app 基本目录结构 index.html 名称可以不是index, 这个文件与普通网页的 ...

  2. C语言入坑指南-被遗忘的初始化

    前言 什么是初始化?为什么要初始化?静态变量和局部变量的初始化又有什么区别?实际应用中应该怎么做?本文将一一回答这些问题. 什么是初始化 初始化指的是对数据对象或者变量赋予初始值.例如: int va ...

  3. Elasticsearch入坑指南之RESTful API

    Elasticsearch入坑指南之RESTful API Tags:Elasticsearch ES为开发者提供了非常丰富的基于Http协议的Rest API,通过简单的Rest请求,就可以实现非常 ...

  4. ElasticSearch入坑指南之概述及安装

    ---恢复内容开始--- ElasticSearch入坑指南之概述及安装 了解ElasticSearch ElasticSearch(简称ES)基于Lucene的分布式全文检索引擎.使用ES可以实现近 ...

  5. eclipse中导入外部包却无法查看对应源码或Javadoc的入坑指南

    eclipse中导入外部包却无法查看对应源码或Javadoc的 入坑指南 出现这个错误的原因是,你虽然导入了.jar包,但没有配置对应的Javadoc或源码路径,所以在编辑器中无法查看源 码和对应AP ...

  6. Rust入坑指南：核心概念

    如果说前面的坑我们一直在用小铲子挖的话,那么今天的坑就是用挖掘机挖的. 今天要介绍的是Rust的一个核心概念:Ownership.全文将分为什么是Ownership以及Ownership的传递类型两部 ...

  7. Rust入坑指南：鳞次栉比

    很久没有挖Rust的坑啦,今天来挖一些排列整齐的坑.没错,就是要介绍一些集合类型的数据类型."鳞次栉比"这个标题是不是显得很有文化? 在Rust入坑指南:常规套路一文中我们已经介绍 ...

  8. Rust入坑指南：亡羊补牢

    如果你已经开始学习Rust,相信你已经体会过Rust编译器的强大.它可以帮助你避免程序中的大部分错误,但是编译器也不是万能的,如果程序写的不恰当,还是会发生错误,让程序崩溃.所以今天我们就来聊一聊Ru ...

  9. Rust入坑指南：朝生暮死

    今天想和大家一起把我们之前挖的坑再刨深一些.在Java中,一个对象能存活多久全靠JVM来决定,程序员并不需要去关心对象的生命周期,但是在Rust中就大不相同,一个对象从生到死我们都需要掌握的很清楚. ...

随机推荐

  1. 微信小程序 wepy框架 之拦截器intercepter使用

    1,在使用wepy框架创建的项目下 找到src/app.wpy 2,在app.wpy constructor方法中添加 super(); this.use('promisify');//启用ES6 p ...

  2. 五分钟了解ES6对数值的扩展

    文章目录 数值的扩展(ES6) 1. 二进制八进制表示法 2. Number对象 3. Math对象 4. 指数运算符 5. Integer 数据类型 5.1 简介 5.2 运算 数值的扩展(ES6) ...

  3. CQRS+ES项目解析-Equinox

    今天我们来分析另一个开源的CQRS+ES项目:Equinox.该项目可以在github上下载并直接本地运行,项目地址:https://github.com/EduardoPires/EquinoxPr ...

  4. SpringMVC 数据交互

    为什么使用JSON进行数据交互? JSON数据格式比较简单.解析比较方便,在接口调用及HTML页面Ajax调用时较常用. JSON交互方式 请求是Key/Value,响应是JSON(推荐使用) 请求是 ...

  5. sudo 1.2.27 - Security Bypass

    EXP: https://www.exploit-db.com/exploits/47502?utm_source=dlvr.it&utm_medium=twitter 漏洞复现: 具体配置参 ...

  6. C# 面向切面编程 AOP

    AOP(Aspect Oriented Programming) 面向切面编程 起源 引言  http://wayfarer.cnblogs.com/articles/241012.html AOP技 ...

  7. Skulpt在线模拟运行Python工具

    1. Skulpt是一个完全依靠浏览器端模拟实现Python运行的工具 2. 不需要预处理.插件或服务器端支持,只需编写python并重新载入即可. 3. 由于代码完全是在浏览器中运行的,所以不必担心 ...

  8. FCC---CSS Flexbox: Apply the flex-direction Property to Create Rows in the Tweet Embed

    The header and footer in the tweet embed example have child items that could be arranged as rows usi ...

  9. Dynamics 365客户端编程示例：两个选项集字段的联动

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  10. Android 弹出Dialog时隐藏状态栏和底部导航栏

    上代码 dialog.getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION); di ...