第25個冬天

  在Blazor當中若要去設定事件的callback寫法很單純 針對Button前端的元素我們可以加上@onclick後頭捕上 lambda expression的匿名方法或者具名方法 而元件封裝跟過去webform時代的ascx 其實很像 額外定義一個razor元件 ~\Pages\Alert.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 @if (Show) { <div class= "dialog-container" > <div class= "dialog" > <div> @ChildContent </div> <div> <button @onclick= "OnOk" > OK </button> </div> </div> </div> } @code { [Parameter] public bool Show { get ; set ; } [Parameter] public EventCallback OnOk { get ; set ; } [Parameter] public RenderFragment ChildContent { get ; set ; } } [Parameter]修飾的屬性 則代表可從父元件傳遞進來給當前這個子元件的意思 EventCallback 則是對外可去指定要呼叫的客製化委派(也就是方法回呼) RenderFragment 則代表這個子元件也就是open/close tag裡面你可以填入取代的內文block 你可以從父元件傳入新型的子元...

  通常富文本編輯器中還涉及到圖檔上傳的處裡 我們可在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

  用來儲存每一頁要顯示特定筆數分頁結果的資料結構 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 ...