Hello Blazor:(7)WebAssembly、Server模式你选哪种?小孩子才做选择!我用混合模式...

在上次的文章中,我们介绍了“Blazor WebAssembly和Blazor Server的区别”。它们各有优缺点。

Blazor WebAssembly的优势在于运行期间可以和服务器无交互,但是需要长时间下载资源,而Blazor Server则首次加载速度非常快,但是必须和服务器实时通讯。

如果,同一个网站,在网络环境好的情况下使用Blazor WebAssembly模式加载,而在网络环境差的情况下使用Blazor Server模式加载以加快启动速度。

这样,不就可以把2种模式的优点都利用上了吗?!

实现

创建Blazor WebAssembly项目

新建Blazor WebAssembly项目WebApplication1,只是在新建窗口中选择“ASP.NET Core托管”:

这样服务端也有了!

生成的解决方案会包含3个项目:WebApplication1.Client、WebApplication1.Server、WebApplication1.Shared。

添加Blazor Server代码

上次我们已经知道,Blazor Server项目和普通ASP.NET Core服务端项目没有太大区别。

因此,我们只需和标准的Blazor Server项目比较了一下,把WebApplication1.Server项目的Startup.cs中缺少的代码复制过来:

public void ConfigureServices(IServiceCollection services)
{...services.AddServerSideBlazor();
}public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{...app.UseEndpoints(endpoints =>{...//endpoints.MapFallbackToFile("index.html");endpoints.MapBlazorHub();endpoints.MapFallbackToPage("/_Host");});
}

注意,需要把Blazor WebAssembly项目的入口映射代码注释起来。

添加_Host页面

把标准的Blazor Server项目中的_Host.cshtml文件复制到WebApplication1.Server的Pages目录下。

设置namespace:

@namespace WebApplication1.Client

并将引用的css文件名改成WebApplication1.Client.styles.css:

<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Blazor混合模式</title><base href="~/" /><link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /><link href="css/app.css" rel="stylesheet" /><link href="WebApplication1.Client.styles.css" rel="stylesheet" />
</head>

看下效果

使用上次“判断当前运行在WebAssembly模式还是Server模式”的方法,修改WebApplication1.Client项目的Index.razor:

@page "/"@inject IJSRuntime JS@JS.GetType().ToString()

运行代码,发现现在已经运行在Server模式下了:

切换模式

假设,网站应该默认使用WebAssembly模式,只有当用户用手机访问网站时,才需要使用Server模式。

我们可以通过检查浏览器的USER-AGENT,判断是否来源于手机浏览器实现。

但是,没法在Startup.cs中处理这个判断,那么只能在入口文件_Host.cshtml中想办法。

首先,我们判断是否是手机浏览器:

var isMobile = false;
string u = Request.Headers["USER-AGENT"];
var b = new System.Text.RegularExpressions.Regex(@"(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino", System.Text.RegularExpressions.RegexOptions.IgnoreCase | System.Text.RegularExpressions.RegexOptions.Multiline);
var v = new System.Text.RegularExpressions.Regex(@"1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-", System.Text.RegularExpressions.RegexOptions.IgnoreCase | System.Text.RegularExpressions.RegexOptions.Multiline);
if ((b.IsMatch(u) || v.IsMatch(u.Substring(0, 4))))
{isMobile = true;
}

然后,我们把原来Blazor WebAssembly项目的入口文件index.html的代码复制到_Host.cshtml,根据isMobile判断是否加载:

...@if (isMobile)
{<component type="typeof(App)" render-mode="ServerPrerendered" />
}
else
{<div id="app">Loading...</div>
}...@if (isMobile)
{<script src="_framework/blazor.server.js"></script>
}
else
{<script src="_framework/blazor.webassembly.js"></script>
}

再看下效果

运行,默认已经是Blazor WebAssembly模式了:

然后,打开浏览器的开发者工具,切换到手机模式,刷新页面。

不错,已经变成Blazor Server模式了:

结论

在本文中,我们实现了Blazor混合模式。你可以根据实际需求进行改造,那你的Blazor变得又快又好!

如果你觉得这篇文章对你有所启发,请关注我的个人公众号”My IO“,记住我!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/300061.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一生只有43年,喜欢泡妹打架,却凭借一篇文章震惊世界,跻身一流数学家

全世界只有3.14 %的人关注了青少年数学之旅不会做就别乱套我洛必达的公式!——节选自《数学之旅 闪耀人类的54个数学家》众所周知&#xff0c;求极限是高等数学中最重要的内容之一&#xff0c;而洛必达法则将对原式的求导转化成了导函数形式的问题&#xff0c;这就大大简化了一…

ORACLE 常用函数

好像ORACLE的资料比较少,把ORACLE的常用函数写下,以备一时忘记查看用...1.INITCAP 返回字符串并将字符串的第一个字母变为大写; SQL>selectinitcap(smith) upp fromdual;-----Smith2.CONCAT 连接两个字符串; SQL>selectconcat(010-,88888888)||转23高乾竞电话 fromdual;-…

计算机三级网络技术分值占比,大一能考计算机三级吗?计算机三级考试题型分析...

原标题&#xff1a;大一能考计算机三级吗&#xff1f;计算机三级考试题型分析计算机等级考试&#xff0c;很多学生在刚刚进入大学时&#xff0c;就想把计算机三级证书拿到手。那么&#xff0c;大一能考计算机三级吗&#xff1f;计算机三级考试题型有哪些&#xff1f;下面&#…

asp.net网页上嵌入Flash显示

网页上显示Flash&#xff0c;功能实现&#xff1a; 文件格式&#xff1a;.wmv;大小&#xff1a;19,530KB;长度&#xff1a;00:27:39&#xff1b;还包含JavaScript与用户控件等文件。 下载地址&#xff1a;http://download.cnblogs.com/insus/ASPDOTNET/Flash.zip转载于:https:/…

DTO 和 POCO(或 POJO)有什么区别

DTO 和 POCO&#xff08;或 POJO&#xff09;有什么区别原文链接&#xff1a;https://ardalis.com/dto-or-poco/作者&#xff1a;Ardalis Steve在讨论 .NET 和 C# 中的软件开发时经常出现的两个术语是 DTO 和 POCO。一些开发人员交替使用这些术语。那么&#xff0c;DTO 和 POCO…

Nginx server之Nginx作为反向代理服务器

2019独角兽企业重金招聘Python工程师标准>>> 一&#xff1a;Nginx介绍 1.Nginx简介&#xff1a;nginx [engine x]是一个俄罗斯人编写的HTTP和反向代理服务器&#xff0c;另外它也可以作为邮件代理服务器。 它已经在众多流量很大的俄罗斯网站上使用了很长时间&#x…

增加FiroFox3对迅雷的支持

当然&#xff0c;这对于Firefox来说是最好的了&#xff0c;以前的Thunder 扩展”Thunder Extension1.1“在firefox 2.0.0.4之后就不能用了&#xff0c;现在该扩展用的用的版本是”Thunder Extension3.5“。不用大家满世界找了&#xff0c;迅雷已经内置了。 注意&#xff1a;鉴于…

***一般如何***服务器

***方式&#xff0c;前期准备工作&#xff0c;漏洞收集&#xff0c;扫描&#xff0c;路由及网关分析&#xff0c;然后有网络编程以达到***的作用以至被***的机器瘫换.这种是具备专业知识的.一般的就是用工具了***.比如用工具发大量数据包,造成拒绝服务器***,SYN同步***.总的来说…

为什么现在老师这么难,值得大家深思

致各位老师不知不觉&#xff0c;顶级教师圈已经陪伴大家走过3个月的时光。我们每天为教师们推送教育资讯&#xff0c;得到了许多关心和支持。为了感谢各位教师们的支持和鼓励&#xff0c;顶级教师圈今日特举办限时资源福利活动。我们精心整理了100G海量教学资源&#xff0c;包含…

学计算机要买什么样的电脑,大学开学要买电脑吗?又要买什么样的电脑?看准这些再买也不迟!...

电脑是我们生活中重要的通讯工具&#xff0c;方便了我们学习办公、工作设计、娱乐游戏&#xff0c;我们也越来越依赖电脑处理不同的事情&#xff0c;尤其是现在的开学季&#xff0c;很多准大学生都准备给自己购置一台电脑&#xff0c;但是由于自己不懂&#xff0c;买了怕被坑&a…

C#中的解构

解构是将一个对象分割成若干部分并将其存储到新的变量中。在 C# 中&#xff0c;解构可以方便地一次性将一个对象的多个成员的值存储到多个变量中。1解构元组元组为方法返回多个值提供了便捷&#xff0c;无需创建额外的类型来承载返回的值。例如&#xff0c;下面这个方法使用元组…

javascript一些常用的代码

1&#xff1a;Response.Write("<script>alert(登录名和密码不能为空&#xff01;);locationjavascript:history.go(-1);</script>");返回上一页&#xff1b; 2&#xff1a;增加到收藏夹&#xff1a;javascript:window.external.addfavorite&#xff08;“…

转:人生成功必读的经典语录200条

1 热忱是推销成功的最大要素&#xff0c;也是唯一要素。 2 身为一名推销员&#xff0c;没有比完成一笔好交易更快乐的事。 3 无论推销什么东西&#xff0c;先推销自己。 4 充分了解客户对一位推销员而言&#xff0c;是一件非常重要的事。 5 我们每个人在世界上都是独一无二的&a…

在Ubuntu上安装RealPlayer的方法

初用Ubuntu感觉还不错&#xff0c;但发现没有RMVB的播放软件&#xff0c;下载个安装不上。后来才发现&#xff0c; 不是有效的可执行文件。转换之&#xff1a;chmod &#xff0b;x RealPlayer10GOLD.bin之后一路回车就OK了。./RealPlayer10GOLD.bin装完毕&#xff0c;在“应用程…

如果格局决定人生,那到底什么决定了格局

全世界只有3.14 %的人关注了青少年数学之旅真正决定人与人之间的差距的&#xff0c;其实是我们对事物的见识与内心的格局&#xff0c;见识的深浅决定人生的深浅&#xff0c;格局的大小决定了人生之路是宽是窄。今天给大家推荐几个有深度、有想法的公众号&#xff0c;希望能够给…

海尔微型计算机一键还原怎么操作,教你电脑一键还原怎么操作

当系统使用的时间久了&#xff0c;出现了不好修复的问题&#xff0c;可使用电脑的一键还原来解决。但一些用户不知电脑一键还原怎么操作呢?其实方法并不难&#xff0c;有需要的用户&#xff0c;请来看看下面的步骤吧一键还原又叫做一键恢复&#xff0c;计算机系统出现问题时就…

我从大厂面试中学到的关于 C# 的知识

我从工作面试中学到的关于 C# 的知识原文链接&#xff1a;https://michaelscodingspot.com/what-i-learned-about-c-from-job-interviews/作者&#xff1a;Michael Shpilt我最近参加了一些最大的科技公司的一系列工作面试。在没有透露姓名的情况下&#xff0c;我得到了世界排名…

C#正则表达式的特定字符或转义序列

大多数重要的正则表达式语言运算符都是非转义的单个字符。转义符 " (单个反斜杠)通知正则表达式分析器反斜杠后面的字符不是运算符。 例如&#xff0c;分析其将星号&#xff08;*&#xff09;视为重复限定符&#xff0c;而将后跟星号的反斜杠&#xff08;"*&#xff…

深入浅出自定义标签(二)生成javascript

自从写了深入浅出自定义标签(一)入门之后一直没有得出时间继续写,正好这次项目中用到"自定义标签",这次的用途是通过Session中的存储的相关功能点的List,进行迭代生成javascript脚本,在前台通过javascript生成树桩结构所有的页面元素都是Html,包括javascript所以生成…

曾凭一己之力推动物理学发展,是清华大学最年轻教授,世界却欠他一个诺贝尔奖!...

全世界只有3.14 %的人关注了青少年数学之旅说起中国最牛的科学家&#xff0c;大家可能都会想起钱学森。钱学森被美国称为“一个人抵五个师”并阻止他回国的故事&#xff0c;几乎家喻户晓。钱学森但事实上&#xff0c;在中国近代&#xff0c;也有一个科学大牛&#xff0c;曾被美…