C# Blazor JavaScript 함수에서 .NET 메서드 호출하는 방법

Blazor의 JavaScript 함수에서 .NET 메서드 호출하는 방법 Blazor 의 JavaScript 에서 .Net Method 를 호출하는 방법입니다. 1. 첫번째 방법은 아래와 같이 Assembly 명과 Method 명으로 호출하는 방법입니다. @page "/" Call .NET Trigger .NET static method @code { [JSInvokable] public static Task ReturnArrayAsync1(string jsParam) { return Task.FromResult(new string[] { "test1", jsParam }); } [JSInvokable("TEST")] public static Task ReturnArrayAsync2(string jsPa..

코딩/Blazor 2024. 4. 10. 23:53

C# Blazor BlazorWorker 를 이용해 Background Service 처리하기

BlazorWorker 를 이용해 Background Service 처리하기 BlazorWorker 는 Blazor 에서 Background Service 를 이용해 주기적으로 체크가 필요한 서비스를 만들기 위해 사용되는 라이브러리 입니다. Timer 를 사용하게되면 화면에서 JavaScript 호출하게되면 Timer 가 멈추는 증상이 발생됩니다. 싱글쓰레드로 동작하기 때문인데 BlazorWorker 는 이를 해결할 수 있게 해줍니다. https://github.com/Tewr/BlazorWorker GitHub - Tewr/BlazorWorker: Library for creating DotNet Web Worker threads/multithreading in Client side Blazor Lib..

코딩/Blazor 2024. 4. 8. 23:51

TypeScript 에서 API 호출하기 - fetch

TypeScript 에서 API 호출하기 - fetch 먼저 이전 시간의 TypeScript 포스팅을 기반으로 테스트가 진행되었습니다. 2024.04.06 - [코딩] - TypeScript API 서버 만들기 TypeScript에서 fetch 를 이용해 API 를 호출하는 방법입니다. 1. C# API 구성 API는 C# 에서 ASP.NET Core 웹 API 프로젝트를 만들면 샘플 예제로 생성되는 GetWeatherForecast API 를 호출해 봅니다. 아래는 C# API 코드입니다. using Microsoft.AspNetCore.Mvc; namespace TestApi.Controllers { [ApiController] [Route("[controller]")] public class Wea..

코딩 2024. 4. 7. 22:54

TypeScript API 서버 만들기

TypeScript API 서버 만들기 TypeScript 를 이용해서 API 를 만드는 방법입니다. Visual Studio Code 를 이용한 방법입니다. 1. nodejs 설치 기본적으로 nodejs 가 설치되어있어야합니다. https://nodejs.org/en/download Node.js — Download Node.js® Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 아래처럼 cmd 창에서 npm 명령어가 인식되어야 합니다. 2. Visual Studio Code 에서 packages.json 파일 만들기 작업할 폴더를 만들고 Visual Studio Code 에서 해당 폴더를 엽니다. 터..

코딩 2024. 4. 6. 23:54

TypeScript 에서 tsc.ps1 파일을 로드할 수 없습니다 오류 해결방법

TypeScript 에서 tsc.ps1 파일을 로드할 수 없습니다 오류 해결방법 아래 링크를 보면서 TypeScript 를 공부하고 있습니다.(기초 배우실 때 추천!) https://learn.microsoft.com/ko-kr/training/modules/typescript-get-started TypeScript 시작 - Training 이 모듈에서는 TypeScript 언어를 소개하고 TypeScript 개발 환경을 설정하는 방법을 보여 줍니다. learn.microsoft.com 그런데 Visual Studio Code 에서 tsc --init 명령을 수행하는데 아래처럼 에러 문구가 나타났습니다. tsc : C:\Users\junij\AppData\Roaming\npm\tsc.ps1 파일을 로드..

코딩 2024. 4. 3. 22:00

C# LINQ Zip 을 이용해 3개 List 번갈아 섞기

C# LINQ Zip을 이용해 3개 List 번갈아 섞기 이전 포스팅에서 2개의 List 를 번갈아 섞었습니다. 2024.04.02 - [코딩/C#] - C# 두 List 를 번갈아 섞기 - LINQ ZIP .NET6 부터는 3개의 List 를 가지고 처리할수 있습니다. using System; using System.Collections.Generic; using System.Linq; class Program { static void Main(string[] args) { var list1 = new List { 1, 4, 7 }; var list2 = new List { 2, 5, 8 }; var list3 = new List { 3, 6, 9 }; var combined = list1.Zip(li..

코딩/C# 2024. 4. 3. 00:12

C# 두 List 를 번갈아 섞기 - LINQ ZIP

C# 두 List 를 번갈아 섞기 - LINQ ZIP 두 List 를 번갈아서 섞는 방법입니다. 2가지 방법이 있습니다. 첫번째 방법은 linq 를 이용해 아래와 같이 처리합니다. var list1 = new List { 1, 3, 5 }; var list2 = new List { 2, 4, 6 }; // 두 리스트를 번갈아 합치기 var combined = list1 .Select((item, index) => new { Item1 = item, Item2 = list2.ElementAtOrDefault(index) }) .SelectMany(pair => new int?[] { pair.Item1, pair.Item2 }) .ToList(); combined.ForEach(item => Console..

코딩/C# 2024. 4. 2. 23:54

C# Blazor RadzenButton 의 ButtonType, ButtonStyle

C# Blazor RadzenButton 의 ButtonType/ButtonStyle RadzenButton 의 ButtonType/ButtonStyle 사용방법입니다. ButtonType 과 ButtonStyle 은 동시에 사용가능합니다. 아래 결과를 보면 알수 있듯이 ButtonStyle 에 따라서 배경색이 변경됩니다. 결과 ButtonType 은 양식을 제출할때 제출하거나 재설정시 사용됩니다.

코딩/Blazor 2024. 3. 30. 22:08

C# Blazor RadzenDropDown 에 Enum 바인딩하기

C# Blazor RadzenDropDown 에 Enum 바인딩하기 이전 포스팅에서 Enum 을 바인딩하는 방법에 대해서 알아봤습니다. 2024.03.27 - [코딩/C#] - C# Blazor Enum 값 바인딩 하기 이번에는 RadzenDropDown 에서 Enum 을 바인딩하는 방법을 알아봅니다. @page "/radzendropdown" @code { IEnumerable devTypes = Enum.GetValues(typeof(DevType)).Cast().ToList(); DevType selectDevType = DevType.Csharp; private enum DevType { Csharp, Java, Python, Fulutter, Unity, } } 위 코드에서 알 수 있듯이 Enu..

코딩/Blazor 2024. 3. 30. 21:55

C# RadzenButton ToolTip / Busy indicator 표시하기

C# RadzenButton ToolTip / Busy indicator 표시하기 1. ToolTip RadzenButton 에서 아래와 같이 버튼에 ToolTip 을 표시하려면 title 속성을 사용하면됩니다. 아래와 같이 아이콘으로 되어있는 경우 해당 버튼의 기능을 설명할 때 유용하게 사용됩니다. 2.Busy indicator Busy Indicator 는 버튼 클릭 시 사용자의 더블 클릭을 방지하고 진행 중 표시를 하려고 할 때 사용됩니다. @code { bool busy; async Task OnBusyClick() { busy = true; // Use await and Task.Delay to yield execution to Blazor and refresh the UI await Task...

코딩/C# 2024. 3. 30. 21:26

C# Blazor RadzenGrid 체크박스 추가하기

C# Blazor RadzenGrid 체크박스 추가하기 RadzenGrid 에서 체크박스를 사용하는 방법입니다. RadzenGrid 에서는 SelectionMode 를 Multiple로 해도 체크박스는 생기지 않습니다. 수동으로 체크박스를 추가하고 내부 로직을 처리해야합니다. 아래는 체크박스를 수동으로 처리한 코드입니다. @page "/radzengrid" { if(!allowRowSelectOnRowClick) { grid.SelectRow(data); }}) /> @code { bool allowRowSelectOnRowClick = true; IEnumerable employees; IList selectedEmployees; RadzenDataGrid grid; protected override ..

코딩/Blazor 2024. 3. 30. 17:51

C# Blazor Enum 값 바인딩 하기

C# Blazor Enum 값 바인딩 하기 Enum 값을 콤보박스에 바인딩 하는 방법을 알아봅니다. 먼저 아래의 Enum 을 생성합니다. public enum MyEnum { Option1, Option2, Option3 } Option1~3 까지의 항목이 콤보박스에 바인딩되도록 하려면 select 태그를 이용하여 foreach 문으로 Enum 항목을 option 태그를 이용해 추가하면 됩니다. @foreach (var value in Enum.GetValues(typeof(MyEnum))) { @value } 결과 여기에서 선택한 값을 처리하기 위해서는 아래처럼 @onchange 를 통해 처리하면됩니다. @foreach (var value in Enum.GetValues(typeof(MyEnum))) ..

코딩/Blazor 2024. 3. 27. 22:30

C# Blazor 유효성 처리하기 Validation

C# Blazor 유효성 처리하기 Validation 화면에서 값을 입력받아야 하는 경우 사용자가 갑을 입력하지 않았을 때 경고문구를 보여줌으로써 사용자가 해당 항목을 인지할 수 있도록하는 방법입니다. 흔히 이를 유효성체크라고 불리는데 필수값을 입력할 수 있게 해 줍니다. 먼저 화면에서 사용할 Model 을 정의합니다. using System.ComponentModel.DataAnnotations; using Blazor.AppTest.Data; public class ExampleModel { [Required] [StringLength(10, ErrorMessage = "Name is too long.")] public string? Name { get; set; } [Required] public ..

코딩/Blazor 2024. 3. 27. 21:59

C# Blazor Multiple CascadingParameter

C# Blazor Multiple CascadingParameter 이전 포스팅에서 CascadingParameter 에 대해서알아봤습니다. 이번에는 CascadingParameter 를 여러개 받고 싶을때 처리하는 방법입니다. 먼저 아래처럼 CascadingParameter 를 3개 선언합니다. Multi CascadingChild @if (ExampleList != null) { foreach (string example in ExampleList) { @example } } @IntExample @IntExample2 @code { [CascadingParameter] protected IEnumerable? ExampleList { get; set; } [CascadingParameter] pro..

코딩/Blazor 2024. 3. 26. 22:47

C# Blazor RenderFragment 사용하기

C# Blazor RenderFragment 사용하기 RenderFragment를 이용정의하여 Component 를 만들어 RenderFragment 선언한곳에 다른 Content 나 Component 를 설정할 수 있습니다. 아래처럼 RenderFragment 를 선언해주고 RenderFragment 가 표시될 영역을 잡아줍니다. @page "/renderfragmenttest" RenderFragmentTest Child content @ChildContent @code { [Parameter] public RenderFragment? ChildContent { get; set; } } 위 코드에서 볼수 있듯이 @ChildContent 영역에 표시되도록 처리가 된 상태입니다. 이를 아래처럼 사용하게되..

코딩/Blazor 2024. 3. 26. 22:22

C# Blazor CascadingParameter

C# Blazor CascadingParameter CascadingParameter 는 상위 컴포넌트 정의된 데이터를 하위 컴포넌트로 전달하는 방법을 제공합니다. 아래처럼 Program.cs 에서 아래처럼 AddCsacadingValue 로 정의하게 되면 builder.Services.AddCascadingValue(sp => new Test { Name = "kei" }); builder.Services.AddCascadingValue("AlphaGroup", sp => new Test { Name = "kei2" }); 아래처럼 모든 razor 페이지들이 해당 항목을 모두 받아서 사용할 수 있습니다. @code { [CascadingParameter] public Test? Test { get; s..

코딩/Blazor 2024. 3. 24. 23:37

C# Blazor ShouldRender - 불필요한 렌더링 방지

C# Blazor ShouldRender - 불필요한 렌더링 방지 Blazor 의 ShouldRender 는 화면에서 불필요한 렌터링을 방지하여 사용자에게 불필요하게 변경된 내용을 화면에 표시되지 않아도 될때 사용할 수 있습니다. 사용방법은 간단합니다. 아래처럼 return false; 를 해주게되면 화면이 렌더링되지 않습니다. protected override bool ShouldRender() { return false; } 기본으로 생성되는 Counter.razor 화면에서 버튼 클릭 시 숫자가 증가하게 되는데 위처럼 처리하게되면 화면의 숫자가 증가하지 않습니다. 아래처럼 특정 조건인 경우 ShouldRender 를 이용하여 렌더링되지 않도록 할 수있습니다. @page "/counter" Count..

코딩/Blazor 2024. 3. 24. 23:07

C# Blazor MVVM 패턴 사용하기

C# Blazor MVVM 패턴 사용하기 WPF 를 프로젝트를 하다보니 MVVM 패턴이 익숙해 졌습니다. Blazor 에서도 가능한지 확인해 보니 MVVM 처럼? 사용이 가능해서 방법을 알아봅니다. 그닥 추천하지는 않습니다. 여기에서는 기본으로 생성되는 counter 페이지를 사용했습니다. 1. ViewModel 을 정의합니다. public class CounterViewModel { public int Count { get; set; } public CounterViewModel() { } public void IncrementCount() { Count += 1; } } 2. 종속성 주입 Progrram.cs 파일에 아래 코드를 추가합니다. builder.Services.AddScoped(); 3. ..

코딩/Blazor 2024. 3. 24. 16:48

C# Blazor Radzen - Confirm Dialog (확인창) 사용하기

C# Blazor Radzem - Confirm Dialog (확인창) 사용하기 확인창을 이용하여 사용자 선택에 따른 처리를 하고자 할때 Radzen 의 DialogService 를 사용하는 방법입니다. 먼저 이전 포스팅에서 다루었던 Radzen 초기 설정이 되어 있어야합니다. 2024.03.11 - [코딩/C#] - C# Blazor Radzen Component 사용하기 Program.cs 에 아래 코드를 추가합니다. builder.Services.AddScoped(); MainLayout.razor 에 아래 코드를 추가합니다. 전체코드 @inherits LayoutComponentBase About @Body 화면에서는 아래처럼 사용합니다. @inject DialogService dialogServ..

코딩/Blazor 2024. 3. 24. 00:28

C# Blazor Prism EventAggregator 사용하기

C# Blazor Prism EventAggregator 사용하기 WPF 에서 화면 간 데이터 전달을 위해서 Prism 의 EventAggregator 를 사용하였습니다. Blazor 에서도 화면 간 데이터 전달을 위해 알아보니 동일하게 사용이 가능해서 사용하는 방법을 알아봅니다. 1. Nuget Package 에서 'Prism.Core' 를 설치합니다. 2. Program.cs 에서 EventAggregator 를 주입시킵니다. builder.Services.AddScoped(); 위와 같이 EventAggregator 를 주입시켜 사용 가능한 상태로 만듭니다. 3. Event 생성 TestEvent 라는 이벤트 클래스를 정의합니다. 여기에서는 단순히 문자열을 전달하기 위해 PubSubEvent 으로 ..

코딩/Blazor 2024. 3. 23. 18:04

KeiStory