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

멀티모달 생성 AI 인사이드 서평

멀티모달 생성 AI 인사이드 서평 이 책은 인공지능(AI)의 역사적 발전과 그 시대적 변화를 얘기하고 있다. 특히, 알파고와 이세돌의 대결을 예로 들며, 이 사건이 대중의 AI 인식에 미친 영향을 강조한다. 저자는 데이터 학습을 넘어서는 AI의 발을 설명하면서, OpenAI의 ChatGPT와 같은 생성형 API의 출현, 이미지 인식 및 처리 기능의 발달, 그리고 텍스트 입력을 통한 동영상 제작에 이르기까지 AI 기술의 최신 동향을 상세히 다룬다. 이러한 발전은 멀티모달 AI에 대한 관심을 촉발시켰다. 멀티모달 AI는 다양한 데이터 유형을 통합하는 기술로, 오토파일럿 시스템과 예술 창작 분야에서의 응용을 포함하여 그 사용 사례를 확장하고 있다. 또한, 이 책은 멀티모달 AI의 이해를 돕기 위해 역사적인 A..

LIFE/서평 2024. 3. 29. 21:04

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

[로또랩스] 로또당첨번호 조회 및 1113회 로또예상번호

[로또랩스] 로또당첨번호 조회 및 1113회 로또예상번호 이번주 로또 당첨번호 및 로또 예상번호입니다. 예상번호는 로또랩스만의 로직을 통해 생성됩니다. 1112 회 로또 당첨번호 이번주 로또 당첨 번호는 16,20,26,36,42,44 + 24 입니다. 이전에 예상 했던 번호 중에 1등 번호가 모두 포함되어있습니다.!!! 3, 11, 20, 24, 32, 41 4, 12, 21, 25, 33, 42 5, 13, 22, 26, 34, 43 6, 14, 23, 27, 35, 44 7, 15, 16, 28, 36, 45 또한 36을 포함 번호로 하였는데 당첨번호에 정말 포함이 되었네요!!!! 1113회 예상번호입니다. 로또랩스 앱에서 제공되는 로또 예상번호는 15,17,23,35,38,40/5,9,23,25,..

로또랩스 2024. 3. 23. 22:50

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

C# Balzor Page 에서 NavMenu 로 데이터 전달하기

C# Balzor Page 에서 NavMenu 로 데이터 전달하기 Page 에서 버튼 클릭시 NavMenu 의 다른 Page 메뉴로 이동하게끔 처리하는 방법입니다. 1. NavMenu 객체를 담을 PublicScopeService 를 정의하고 등록합니다. PublicScopeService.cs namespace Blazor.RadzenTest.Services { public class PublicScopeService : Dictionary { } } Program.cs builder.Services.AddScoped(); PublicScopeService 는 dictionary 로 정의하여 키, 값의 형태로 데이터를 관리합니다. 2. PublicScopeService 를 이용한 처리 Shared/Nav..

코딩/C# 2024. 3. 23. 15:43

C# Blazor Radzen - RadzenTree : 자식노드 없는 경우 확장 아이콘 숨기는 방법

C# Blazor Radzen - RadzenTree : 자식노드 없는 경우 확장 아이콘 숨기는 방법 이전 포스팅에서 RadzenTree 사용법에 대해서 알아봤습니다. https://keistory.tistory.com/1118 그런데 자식노드가 없는 경우에도 확장 아이콘이 표시되는 문제가 있어 자식노드가 없는 경우 확장 아이콘을 숨기는 방법을 알아봅니다. RadzenTree 에는 HasChildren 속성이 있는데 이 속성이 false 이면 확장 아이콘이 표시되지 않습니다. 그래서 아래처럼 자식 노드를 확인하여 null 인 경우에 false 로 처리되도록 하면됩니다. @page "/treeBinding" @using Blazor.RadzenTest.Data TreeBindingPage @code { I..

코딩/Blazor 2024. 3. 23. 15:19

C# Dynamic Linq 처리하기

C# Dynamic Linq 처리하기 https://dynamic-linq.net/ Dynamic LINQ Dynamic LINQ is FREE and always will be. However, last year alone, we spent over 3000 hours maintaining our free projects! We need resources to keep developing our open-source projects. We highly appreciate any contribution! dynamic-linq.net dynamic linq 는 동적 쿼리를 동적 문자열로 처리할 수 있도록 해줍니다. 아래처럼 Linq 식을 보통 사용하게 되지만 var result = context.Cust..

코딩/C# 2024. 3. 22. 00:05

C# Blazor RadzenPicker 에서 HEX 값 얻는 방법

C# RadzenPicker 에서 HEX 값 얻는 방법 RadzenPicker 를 사용중인데 선택한 색을 가져오게되면 rgb 형태로 반환됩니다. 이를 HEX 값으로 바꾸고 싶은 경우 아래처럼 rgb 형태의 값을 변환해서 사용하면됩니다. var hex = Radzen.Blazor.Rendering.RGB.Parse(value).ToHex();

코딩/Blazor 2024. 3. 20. 00:34

C# Blazor 에서 js 파일 추가하여 js 파일 내 함수 호출하는 방법

C# Blazor 에서 js 파일 추가하여 js 파일 내 함수 호출하는 방법 1. JavaScript 파일 추가 Blazor 프로젝트의 wwwroot 폴더 안에 JavaScript 파일을 추가합니다. 예를 들어, example.js라는 이름으로 JS 파일을 만듭니다. window.exampleFunctions = { showAlert: function (message) { alert(message); } }; 2. JavaScript 파일 참조 _Host.cshtml (Blazor Server) 또는 index.html (Blazor WebAssembly) 파일에서 생성한 JavaScript 파일을 참조합니다. 3. JavaScript 함수 호출 Blazor 컴포넌트 내에서 IJSRuntime 인터페이스..

코딩/Blazor 2024. 3. 20. 00:02

KeiStory