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“，記住我！
總結
以上是生活随笔為你收集整理的Hello Blazor：(7)WebAssembly、Server模式你选哪种？小孩子才做选择！我用混合模式...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Asp.Net Core 中如何设置 I
- 下一篇： C#中的解构