在Winform中一分钟入门使用好看性能还好的Blazor Hybrid

在Winform中一分钟入门使用好看性能还好的Blazor Hybrid

安装模板

dotnet new install Masa.Template::1.0.0-rc.2

创建 Winform的Blazor Hybrid项目

dotnet new masablazor-winform -n WinformDesktop

创建完成打开项目文件WinformDesktop.csproj文件

打开以后的项目文件,启动项目

这是提供的简单的项目Demo

我们只需要使用masa Blazor提供的模板,一分钟入门使用,你要做的只需要去Masa Blazor组件库去CV代码,

并且Masa Blazor也提供了Blazor在线编辑器去体验Masa Blazor的组件

MASA Try (masastack.com) 可以通过这个地址访问,支持在线编辑Masa Blazor组件,动态渲染。

Blazor分层简单讲解

​ 1. 在Winform的MainFrom的文件中存在一下代码

首先流程是先创建一个ServiceCollection,用于注册服务,在和BlazorWebView进行绑定!将指定的html和BlazorWebView绑定以后在对于html内的id为app的元素进行Blazor组件的绑定绑定到Blazor组件的App组件中;

  1. App.razor组件的作用

我们看到上图, 上线在组件外部有一个Router组件,用于注册路由组件,并且扫描App的实在程序集下所有的路由组件

Found下的DefaultLayout则是默认绑定的Layout组件,

NotFound则是当未找到路由时绑定的Layout的组件,当前代码都绑定到了MainLayout的组件,则所有路由都会使用MainLayout的组件。

  1. MainLayout.razor组件的作用

    当前组件的代码包括在MApp中,这是Masa Blazor的使用方法,所有Masa Blazor的组件都必须在MApp中使用,当前的MainLayout.razor组件使用的一个默认的布局,当加载指定页面的时候页面的组件会渲染在@Body中,这就相当于组件的布局的复用性,对于Shared的组件尽量都是Layout组件,或者菜单栏的组件,更容易复用。

  2. Pages下的组件

看到上图,在Pages/Index.razor组件最上面有一个@page "/"的代码,这个是给当前的组件进行路由绑定,资源当加载/路由的时候就会将当前的组件加载到指定的Layout的组件中的@Body当中。

  1. 组件复用

在日常项目当中,我建议创建Components文件夹,文件夹下面则是项目的界面的组件被细致拆分的组件,这样的好处就是组件易于复用,当然也会对于开发者来说需要一定的能力,但是对于组件界面的可维护性更好!

结尾

Masa Blazor
来自token的分享

技术交流群:737776595

本文转载于网络 如有侵权请联系删除

相关文章

  • Java中使用double转BigDecimal的问题

    大家好,又见面了,我是你们的朋友全栈君。先上结论:不要直接用double变量作为构造BigDecimal的参数。线上有这么一段Java代码逻辑:1,接口传来一个JSON串,里面有个数字:57.3。2,解析JSON并把这个数字保存在一个float变量。3,把这个float变量赋值给一个BigDecimal对象,用的是BigDecimal的double参数的构造:newBigDecimal(doubleval) 4,把这个BigDecimal保存到MySQL数据库,字段类型是decimal(15,2)。这段代码逻辑在线上跑了好久了,数据库保存的值是57.3也没什么问题,但是在今天debug的时候发现,第三步的BigDecimal对象保存的值并不是57.3,而是57.299999237060546875,很明显,出现了精度的问题。至于数据库最终保存了正确的57.3完全是因为字段类型设置为2位小数,超过2位小数就四舍五入,所以才得到了正确的结果,相当于MySQL给我们把这个精度问题掩盖了。总觉得这是个坑,所以研究了一下相关的知识。首先是BigDecimal的double参数构造,在官方JDK文

  • SAP ABAP实用技巧介绍系列之利用RTTC给DDIC structure动态添加新的field

    CreatedbyJerryWang,lastmodifiedonDec29,2014例如需要给DDICstructureCOMM_PRODUCT在runtime时添加新的field‘FIELD3’,类型为int. Sourcecode:DATA:gs_c_newTYPEcomm_product. DATA:gr_structdescrTYPEREFTOcl_abap_structdescr, gr_elemdescrTYPEREFTOcl_abap_elemdescr. DATAgt_componentsTYPEcl_abap_structdescr=>component_tableWITHHEADERLINE. DATA:gr_new_strTYPEREFTOdata. FIELD-SYMBOLS<new_str>TYPEANY. gr_structdescr?=cl_abap_typedescr=>describe_by_data(gs_c_new). gt_components[]=gr_structdescr->get_components().

  • 不怕辣眼睛!这个机器人用脸来摘辣椒

    乾明整理编译自Wired 量子位报道|公众号QbitAI如果你是被这个标题吸引进来的,一定要相信我,我不是一个标题党。因为这个机器人,真的是用脸来摘辣椒,不过是......水果椒。《Wired》杂志在网站上发表了一篇文章,介绍了这样的一个机器人。这个机器人是由以色列和欧洲的研究人员开发出来的,名为“Sweeper”。可以自动在温室里面“巡逻”,看辣椒是否熟了,然后把它们摘下来。放到篮子里。这个机器人长成这样:摘辣椒的时候是这样的: 来一段配音可能会更好:来,让我看看……别躲,让我看看…..好,你已经熟了,那就下来吧~ 想要理解这个机器人到底是怎么工作的,你可以把它想象成一个自动驾驶汽车,只不过……脸上有个锯子,还有一脸对辣椒的“渴望”。为了能够在温室里面行动,它身上配备有激光雷达传感器。在沿着植物“巡逻”的时候,每隔几英尺就会停下来拍摄它们。一旦它发现有类似于辣椒一样的东西,就会“凑过去”,然后从各个角度来“打量”这个辣椒。它也有照明设施,从而来更好地观察辣椒的形态。此外,这也代表着它能够夜以继日地工作。具体的工作细节是这样的:机器人关注的重点是颜色。当辣椒成熟的时候,颜色会发生不均匀

  • Websocket之Jmeter压力测试 原

      最近使用到Websocket进行聊天功能开发,用Jmeter进行压力测试,记录下。  使用的Jmeter版本5.1.1,自行从apachejmeter官网下载。  首先要添加Websocket的插件,网上有很多,我从百度网盘下载的。之后放到$JMETER_HOME/lib/ext下;下载得到的英文的,如果要汉化,那么修改$JMETER_HOME/bin/jmeter.properties中language的值为zh_CN,之后重启JMeter(我使用的是Ubuntu18,所以执行$JMETER_HOME/bin/jmeter.sh即可)。1、新建线程组  测试计划->右键,添加->线程(用户)->线程组,如下图1.1所示,我们可以修改线程个数、循坏次数                                              图1.12、添加WebSocketsampler  线程组->右键,添加->取样器->WebSocketsampler,如下图2.1所示,如图2.1所示,设置websocket的IP、端口、path,注意协议

  • 动态语言-Python1.动态语言的定义

    1.动态语言的定义动态编程语言是高级程序设计语言的一个类别,在计算机科学领域已被广泛应用。它是一类在运行时可以改变其结构的语言:例如新的函数、对象、甚至代码可以被引进,已有的函数可以被删除或是其他结构上的变化。动态语言目前非常具有活力。例如JavaScript便是一个动态语言,除此之外如PHP、Ruby、Python等也都属于动态语言,而C、C++等语言则不属于动态语言。----来自维基百科1.运行的过程中给对象绑定(添加)属性 运行结果:这里我想给要在运行过程里给对象绑定属性运行结果:这里实际上就是动态给实例绑定属性!2.运行的过程中给类绑定(添加)属性运行结果:3.运行的过程中给类绑定(添加)方法运行结果:既然给类添加方法,是使用类名.方法名=xxxx,那么给对象添加一个方法也是类似的对象.方法名=xxxx完整代码如下:运行结果:4.运行的过程中删除属性、方法删除的方法:1.del对象.属性名 2.delattr(对象,"属性名")通过以上例子可以得出一个结论:相对于动态语言,静态语言具有严谨性!所以,玩动态语言的时候,小心动态的坑!那么怎么避免这种情况呢?请使

  • Git_学习_07_ 推送修改到远端

    一、操作流程多人协作时,若自己的本地代码有了修改,想提交自己的代码,就需要按照以下步骤操作:1.确认修改正确使用以下命令,查看有哪些是自己未提交的代码gitstatus复制2.拉取远程最新代码gitpull复制3.添加修改到缓存区gitadd--all复制4.提交修改到本地仓库gitcommit-m"提交的信息"复制5.推送代码到远端gitpushoriginmaster复制二、常见问题1.放弃本地修改参见:Git_学习_06_放弃本地修改2.有冲突参见:Git_学习_05_解决冲突三、参考资料

  • TINYTEXT,TEXT,MEDIUMTEXT和LONGTEXT最大存储容量

    大家好,又见面了,我是你们的朋友全栈君。 本文翻译自:TINYTEXT,TEXT,MEDIUMTEXT,andLONGTEXTmaximumstoragesizesPertheMySQLdocs,therearefourTEXTtypes:根据MySQL文档,有四种TEXT类型:TINYTEXTTINYTEXTTEXT文本MEDIUMTEXTMEDIUMTEXTLONGTEXTLONGTEXTWhatisthemaximumlengththatIcanstoreinacolumnofeachdatatypeassumingthecharacterencodingisUTF-8?假设字符编码为UTF-8,我可以在每种数据类型的列中存储的最大长度是多少?#1楼参考:https://stackoom.com/question/wSXm/TINYTEXT-TEXT-MEDIUMTEXT和LONGTEXT最大存储容量#2楼Fromthedocumentation:从文档:Type|Maximumlength -----------+--------------------------------

  • 腾讯云云HDFS使用CHDFS作为Druid的Deepstorage

    环境依赖 CHDFS_JAR Druid版本:Druid-0.12.1 下载与安装获取CHDFSJAR在官方Github上下载CHDFS_JAR。 安装CHDFSJAR使用CHDFS作为Druid的DeepStorage,需要借助Druid-hdfs-extension实现。下载CHDFSJAR后,将chdfs_hadoop_plugin_network-1.7.jar拷贝到Druid安装路径extensions/druid-hdfs-storage以及hadoop-dependencies/hadoop-client/2.x.x下。 使用方法配置修改 修改Druid安装路径的conf/druid/_common/common.runtime.properties文件,将hdfs的extension加入到druid.extensions.loadList中,同时指定hdfs为Druid的deepstorage,而路径则填写为CHDFS的路径:properties druid.extensions.loadList=["druid-hdfs-storage"] dr

  • 博弈论练习2 Digital Deletions(sg函数)

    题目链接在这里:B-DigitalDeletions_牛客竞赛博弈专题班组合游戏基本概念、对抗搜索、Bash游戏、Nim游戏习题(nowcoder.com) 这道题有一个很明显的特征,就是由当前状态可以推到后面的状态,这符合sg函数类博弈问题,所以我们按照题目要求将当前状态推导到之前遍历过的状态,然后把sg函数推出来就行了。 本题注意一下特殊情况如最高位如果减到0了该如何判断就行了。 1#include"bits/stdc++.h" 2usingnamespacestd; 3constintMAX=1e6+5; 4intt,ls; 5intsg[MAX]; 6chars[15]; 7voidsgf(intx){ 8if(sg[x]!=-1)return; 9inti,j; 10for(i=1;i<=x;i*=10){ 11j=x; 12while(j/i%10!=0&&j-i>=i){ 13if(sg[j-i]==0){ 14sg[x]=1; 15gotoaway; 16} 17j-=i; 18} 19if(x/i%10==0&&sg[x/

  • Code Forces 543A Writing Code

    题目描述 Programmersworkingonalargeprojecthavejustreceivedatasktowriteexactly mm linesofcode.Thereare nn programmersworkingonaproject,the ii -thofthemmakesexactly a_{i}ai​ bugsineverylineofcodethathewrites. Let'scallasequenceofnon-negativeintegers v_{1},v_{2},...,v_{n}v1​,v2​,...,vn​ aplan,if v_{1}+v_{2}+...+v_{n}=mv1​+v2​+...+vn​=m .Theprogrammersfollowtheplanlikethat:inthebeginningthefirstprogrammerwritesthefirst v_{1}v1​ lineso

  • js提取JSON数据中需要的那部分数据

    vardata=[ {name:"程咬金",sex:"1",age:26}, {name:"程才",sex:"0",age:20}, {name:"程新松",sex:"1",age:22}, {name:"程功",sex:"1",age:18} ]; varnewd=JSON.stringify(data,['name','sex']) console.log(newd)复制

  • 2022HDU多校第七场

    2022HDU多校第七场 过程 本场队友上场秒了08,是昨天刚出现的nim博弈,随后04模拟分类讨论,我巨大演员wa了2发过了,随后03一眼树形dp,想了想计数方法,随后忘情况演了一发,然后就过了。随后便开始坐牢,队友做06,我看09,09打了个\(n*m\)的暴力,发现了一点整除分块的性质,然而对于做题并没有什么卵用,这里应该要靠到积性函数去,然后看了一眼10,发现是期望推式子题,应该还需要多项式,随后看02过的人有点多便去想02,发现了图的特殊性质一遍过,最后队友06寄了,最后1h狂调06,赛后发现是队友在输入时把k=0特判了,以为所有数的0次方都为0,但实际只有\(0^0\)为0,而我看他代码时只看了一看快速幂里面的判断和dp转移,没看输入,然后对拍造的数据也是恰好的把k=0的情况忽略了,然后拍的速度飞起,但却查不出错,这下难受了。赛后听说07也是树形dp,09min25,10多项式,07事实必09,10好做,只能说卡06时间太长了,没时间看了。 题解 08 三条边各减一异或,为0输,否则赢。为nim游戏。 04 模拟,找最少合并和最多合并的情况。最少合并是L放左,R放右,中间E

  • caffe solver configuration

    (用到一个加一个,并非完整的介绍) #lr_policy 基本的learningrate在`solver.prototxt`中由参数`base_lr`配置. 配合`lr_policy`和其余的一些参数制定learningrate的变化策略. ##lr_policy="fixed" 在整个训练过程中learningrate不变. ##lr_policy="step" 需要另外几个参数配合: ``` base_lr:0.01#begintrainingatalearningrateof0.01=1e-2 lr_policy:"step"#learningratepolicy:dropthelearningratein"stepsize" #byafactorofgammaeverystepsizeiterations gamma:0.1#dropthelearningratebyafactorof10 #(i.e.,multiplyitbyafactorofgamma=0.1) stepsize:100000#dropthelearningrateevery100Kiterations

  • maven跳过单元测试-maven.test.skip和skipTests的区别

    mvninstall-DskipTests,不执行测试用例,但编译测试用例类生成相应的class文件至target/test-classes下。 mvninstall-Dmaven.test.skip=true,不执行测试用例,也不编译测试用例类。

  • 小知识点(复制过来的)

    1.用scanf不是不显示空格,而是用scanf接收字符串的话,在串首遇到空格的话,跳过,继续寻找下一个非空格字符,在串中遇到空格时,结束字符串的输入。所以如果用户输入"abcdefg"的话,scanf取得的字符串为"abcd"。而gets取得字符串时,是在遇到EOF(串尾)时停止,所以不存在这个问题。总结:感觉和gets()正好互补这2个函数可以解决大多数情况下对字符串读取的要求2.复制 exit(0);表示在正常下结束程序exit(1);表示强制结束程序3.fgets(str,50,fp);从文件中读取字符串时其读取的是一行的内容中间的50参数表示读取的最大字符数如果一行的内容很多这个数字可以尽量取大而且当中间这个数字足够大的时候该字符数组str的最后两个字符分别是‘\n’'\0'而当中间的参数不够大无法读完一行的内容字符数组str的结尾是'\0'占一个字节复制

  • 图片大小不一放在div中的兼容方案

    css部分: .img-center{ width:200px; height:150px; margin:20px; overflow:hidden; position:relative; } .img-centerimg{ display:block; position:absolute; } .img-centerimg.aspectFill-x{ width:100%; top:50%; transform:translateY(-50%); } .img-centerimg.aspectFill-y{ height:100%; left:50%; transform:translateX(-50%); } 复制   js部分 //components/imageCenter.js define(function(require){ //利用Promise封装一个加载函数,这里也是可以单独放在一个功能模块中进一步优化 varimageLoad=function(img){ returnnewPromise(function(resolve,reject){ if(

  • 对多行进行合并(collect_set,collect_list,sort_array函数)

    一、字段 字段含义 wname姓名 wtype科目复制   二、函数说明(在hivesql中适用) 1、collect_set() 根据wname进行分组,将wtype进行合并,统计每个人的科目,如果有两行wname,wtype一模一样的数据,collect_set()会去重,只合并其中一行,相同的科目只出现一次   2、collect_list() 根据wname进行分组,将wtype进行合并,统计每个人的科目,如果有两行wname,wtype一模一样的数据,collect_list()不会去重,相同的科目会出现两次   3、concat_ws() 语法:concat_ws(separator,str),通过分隔符连接两个字符串   4、sort_array() 语法:sort_array(str),对输入数组元素进行排序   三、结合使用 SELECTwname,concat_ws(';',sort_array(collect_set(wtype)))asexpfrominputgroupbywname复制  

  • 关于Jackson的jsonNode取参数作为Mybatis的String参数的坑

    最近项目中使用的Json工具是Jackson,要取得jsonNode的某个属性的值,作为String参数传给Mybatis的方法 但是,配置的sqldebug发现传入的String都是带着双引号的 debug发现,jsonNode中的属性,都是两个双引号,故取得的属性值转为String再传入Mybatis的String参数,也是多了一个双引号的 解决方案: jsonNode的get方法后的toString方法后,再加上一句replaceAll()方法,替换掉多余的引号。 详情见图: 修改为: 增补:使用asText()方法也可达成同样的效果,比toString()再replaceAll()要方便一些 参考链接

  • cxf 整合 spring 时 java.lang.VerifyError异常

    异常信息主要有两个,Fallingofftheendofthecode和illegalinstructionfoundatoffset1: java.lang.VerifyError:(class:xxx/webservice/jaxws_asm/DoService,method:getRequestsignature:()Lxxx/service/webservice/Request;)Fallingofftheendofthecode复制 java.lang.verifyerror:(class:xxxxxx;)v)illegalinstructionfoundatoffset1复制   经反复查找资料发现最终是asmjar包冲突导致的。直接通过maven进行依赖分析: 在控制台会输出一堆依赖信息,ctrl+f查找asm 我这里主要是因为集成了shiro,shiro中有asm包和cxf中的asm包冲突了。排除掉shiro中的asm包即可。假如是因为集成其他框架导致的,同理排除掉框架中的asm包即可  

  • 软件工程个人作业01

    一、实验题目:加减乘除 二、程序设计思想:随机产生4个随机数,分别判断前两个和后两个的大小,然后将他们以分数的形式输出。然后再产生4个随机数分别代表加减乘除,带入算式。 三、程序源代码: package四则运算; importjava.util.Random;importjava.util.Scanner; publicclasstest{ publicstaticvoidmain(Stringargs[]) { Scannerscanner=newScanner(System.in); System.out.println("请输入算术题数:"); inte=scanner.nextInt(); for(inti=0;i<e;i++) { intd=0; intx=(int)(Math.random()*100+1); inty=(int)(Math.random()*100+1); inta=(int)(Math.random()*100+1); intb=(int)(Math.random()*100+1); intc=(int)(Math

  • java HttpClicent网络请求与解析

      HttpClicent是Apache下的一个子项目,文档齐全,详见官网:http://hc.apache.org/httpcomponents-client-4.5.x/quickstart.html   这里列出一些常见用法:     (1)使用步骤:       1. 创建HttpClient对象。       2. 创建请求方法的实例,并指定请求URL。如果需要发送GET请求,创建HttpGet对象;如果需要发送POST请求,创建HttpPost对象。       3. 如果需要发送请求参数,可调用HttpGet、HttpPost共同的setParams(HetpParamsparams)方法来添加请求参数;对于HttpPost对象而言,也可调用setEntity(HttpEntityentity)方法来设置请求参数。       4. 调用HttpClient对象的execute(HttpUriRequestrequest)发送请求,该方法返回一个HttpResponse。       5. 调用HttpResponse的g

相关推荐

推荐阅读