第25個冬天

System.InvalidOperationException: 'An exception has been raised that is likely due to a transient failure. Consider enabling transient error resiliency by adding 'EnableRetryOnFailure()' to the 'UseSqlServer' call.' Ref: https://www.thecodebuzz.com/enabling-transient-error-resiliency-enableretryonfailure/

 A second operation was started on this context before a previous operation completed. This is usually caused by different threads concurrently using the same instance of DbContext.  在Blazor Server應用中有時候因為撰寫非同步的處理 可能會將原本DB相關存取服務(設置的生命週期:Scoped) 會有此例外發生在某些時候 在asp.net core3.1版本 我們可以藉由 引用命名空間 using Microsoft.Extensions.DependencyInjection; 並且確立只要該服務存取相同的DbContext 有呼叫存取的地方全部都要改為如下寫法 假設該頁有兩隻Service都存取相同DbContext就建議都統一調整 1 2 3 4 5 6 7 8 9 10 11 using ( var scope = this .serviceProvider.CreateScope()) { var tmpAAA_Service = scope.ServiceProvider.GetRequiredService<AAA_Service>(); AAAData = tmpAAA_Service.GetOne(); } using ( var scope = this .serviceProvider.CreateScope()) { var tmpBBB_Service = scope.ServiceProvider.GetRequiredService<BBB_Service>(); List<BBBData> lsBData = tmpBBB_Service.GetAll(); } 其他高手也遇到類似的問題 https://rainmakerho.github.io/2020/09/13/2020020/

  通常富文本編輯器中還涉及到圖檔上傳的處裡 我們可在Blazor Server專案目錄創建webapi 目錄並新增一個API 控制器 ImageHandlerController 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 using System ; using System.Collections.Generic ; using System.IO ; using System.Linq ; using System.Text ; using System.Threading.Tasks ; using Microsoft.AspNetCore.Http ; using Microsoft.AspNetCore.Mvc ; namespace XXXProj.WebApi { [Route("api/Images")] [ApiController] public class ImageHandlerController : ControllerBase { [HttpPost, DisableRequestSizeLimit] public IActionResult Upload () { try { IFormFile file = Request.Form.Files[ 0 ]; if (file.Length > 0 ) { string strFileName = $ "{Guid...

  近期又開始超忙碌了 要忙鐵人 還要協助研究技術>~<||| 好吧廢話不多說來準備整合富文本編輯器(CKEditor)到 Blazor 中吧 在很久前曾研究並於專案中使用過 那時結合NodeJs後端搭配ckeditor4 https://coolmandiary.blogspot.com/2021/02/nodejswysiwygckeditor4.html 這次採用新版本ver5做整併 https://ckeditor.com/ckeditor-5/online-builder/ 這裡多加兩項plugins (CKEditor 可讓我自行組合所需的插件) 這裡我就選以下這些 若有勾選到涉及雲端服務付費的會在最後一步驟匯出前有提醒 https://ckeditor.com/pricing/ 預設自動幫我們挑選了這個有premium的 那就先取消選取 等他下載匯出一版js 預設解壓出來會有sample code直接可以運行跑效果 將ckeditor.js添加至專案當中的 wwwroot 再到_Host.cshtml 去引入此js 詳情可參考 Blazor第6天_Blazor_在Blazor中去呼叫存取javascript https://coolmandiary.blogspot.com/2022/04/blazor6blazorblazorjavascript.html 預設build過的js會壓縮 這邊若要排版好看觀察有哪些function 可以先線上js排版好後觀察有哪些function可以使用 https://beautifier.io/ 由於太長就省略 將新增好的另一個editor.js存放在相同目錄 editor.js程式碼 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 editors = {}; function CreateEditor(editorId, defaultValue, height, dotNetReference) { ClassicEdi...

  如題同事來問我 他遇到的這個異常 第一眼就先確認應該是透過button開啟的一個子視窗原件 問題真因在於默認button 的type會被渲染為submit導致整頁表單提交因而導致 blazor會Reload一整頁 Ref: https://stackoverflow.com/questions/1878264/how-do-i-make-an-html-button-not-reload-the-page

  [2022-06-13T09:10:08.300Z] Error: System.InvalidOperationException: The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to the Dispatcher when triggering rendering or component state.    at Microsoft.AspNetCore.Components.Dispatcher.AssertAccess()    at Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue(Int32 componentId, RenderFragment renderFragment)    at Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()    at Microsoft.AspNetCore.Components.ComponentBase.Microsoft.AspNetCore.Components.IHandleEvent.HandleEventAsync(EventCallbackWorkItem callback, Object arg)    at BlazorBarcodeScanner.ZXing.JS.BarcodeReader.ReceivedBarcodeText(BarcodeReceivedEventArgs args)    at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_0(Object state)    at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchr...

  用來儲存每一頁要顯示特定筆數分頁結果的資料結構 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 using System ; using System.Collections.Generic ; using System.Text ; namespace Common.Pagination { /// <summary> /// TODO:分頁機制:Add by Samuel 用來儲存每一頁要顯示特定筆數分頁結果的資料結構 /// </summary> /// <typeparam name="T"></typeparam> public struct PagingResult <T> { public IEnumerable<T> Records { get ; set ; } public int TotalRecords { get ; set ; } public PagingResult (IEnumerable<T> items, int totalRecords) { Records = items; TotalRecords = totalRecords; } } } 儲存下面分頁元件的資料結構 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 using System ; using System.Collections.Generic ; using System.Text ; namespace Co...

  專案目錄嚇新建一個js ~\wwwroot\js\MyUtility.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function ShowAlertJs(message) { alert( "Hello" + message); } function ReturnResult() { return confirm( "Are you sure you want to delete?" ); } function GetFocus(id) { document .getElementById(id).focus(); } function EnableAccordian() { $( function () { $( "#accordion" ).accordion(); }); } 至~\Pages\_Host.cshtml 進行全域引用 自行創建測試頁razor 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 @page "/javascript" @inject IJSRuntime jsRuntime <h3>Javascri...

  近期同事跟主管遇到技術困難協助研究一番 由於UI上標題要於跳轉至特定某頁去更換標題 但原先更新標題觸發事件跟時機都寫在側欄click後才去設定 因此若不是透過側欄點進去的就沒辦法存取更新到正確的標題 CascadingParameter也無法直接從子元件去更新ParentComponent的變數屬性 以往都是單向的設值(從Parent到Child) Before After Step1.要先確認當前該頁引用的是默認全域Layout ParentComponent還是自己有額外設置 以此頁為例就是有使用額外自訂的Layout元件 默認全域Layout ParentComponent 會在App.razor當中 Step2.至Layout元件(只要該頁上方有@inherits LayoutComponentBase 的就都算一種Layout元件) 包覆一組CascadingValue <CascadingValue Value="this"> …..原先該元件中整頁內容都要包進來… </CascadingValue> Step3.於該頁Layout下定義方法(或將標題用C#屬性包覆裡面可設定寫入時候的邏輯) Step4.至子元件中透過CascadingParameter參考到該特定類型的Layout Component(對目前領料該頁相當於其Parent Component) 並在要賦值或異動時機(可能blazor頁面事件or生命週期)去觸發參考到的Parent Component中定義的設值方法或針對屬性去賦值 參考文章: 官網 https://docs.microsoft.com/zh-tw/aspnet/core/blazor/components/cascading-values-and-parameters?view=aspnetcore-3.1 Is there any way to communicate to main layout of blazor pages https://stackoverflow.com/questions/66476652/is-there-any-way-to-communicate-to-main-layout-of-blazor-pages In Blazor, how ...

  .net core Blazor這套元件驅動的框架 本身基於元件(Component)為單位來進行業務流程的封裝，達到複用。 主要賣點就是 以.razor為後綴的 Counter .razor 為例 就是Blazor的元件程式檔 ~\BlazorServerApp1\Pages\Counter.razor 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 @page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button class= "btn btn-primary" @onclick= "IncrementCount" >Click me</button> @code { private int currentCount = 0 ; private void IncrementCount () { currentCount++; } } ~\BlazorServerApp1\Pages\FetchData.razor 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 @page "/fetchdata" @using BlazorServerApp1.Data @inject WeatherForecastService ForecastService <h1>Weather forecast</h1> <p>This component demonstrates fetching data from a service.</p> @if (forecasts == null ) { <p><em...