KeiStory

반응형

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

C# Blazor RadzenTree 사용하기

C# Blazor RadzenTree 사용하기 RadzenTree 컨트롤은 Tree 계층구조의 데이터를 표시하기 위한 컨트롤로 부모 자식의 관계를 표시할 때 사용됩니다. 아래 예시는 메뉴를 표시할때 처리 방법을 알아보려고 합니다. 먼저 RadzenTree 컨트롤에 사용될 Model 을 정의합니다. namespace Blazor.RadzenTest.Data { public partial class MenuItem { public int MenuID { get; set; } public ICollection? MenuItems { get; set; } public string? MenuName { get; set; } public string? MenuDescription { get; set; } publi..
코딩/Blazor 2024. 3. 12. 23:29

C# Blazor Radzen Component 사용하기

C# Blazor Radzen Component 사용하기 Razen Component 는 Balzor 에서 사용할 수 있는 Component 로 70개 이상의 다양한 컨트롤과 기능을 제공합니다. https://blazor.radzen.com/ Free Blazor Components | 70+ UI controls by RadzenAccelerated, smarter, and cost-effective Blazor development Radzen Blazor Studio provides tons of productivity gains for Blazor developers Quickly create Blazor pages with familiar WYSIWYG Blazor designer. Scaffo..
코딩/Blazor 2024. 3. 11. 23:24

C# Blazor 기초 - 데이터 바인딩

C# Blazor 기초 - 데이터 바인딩 화면에 데이터를 바인딩하여 처리하는 방법입니다. @bind 로 바인딩이 되면 데이터 변경이 되면 변경된 내용이 화면에 표시됩니다. 먼저 화면에 표시할 class 를 정의합니다. public class TodoItem { public string? Content { get; set; } public bool IsDone { get; set; } = false; } TodoItem 의 요소를 @bind 에 입력하여 표시합니다. Todo Add todo Todo List (@todos.Count(todo => !todo.IsDone)) @foreach (var todo in todos) { } @code { private List todos = new(); privat..
코딩/Blazor 2024. 3. 8. 21:28

C# Blazor 기초 - 메뉴 추가

C# Blazor 기초 - 메뉴 추가 Blazor 프로젝트에서 화면을 추가하고 메뉴구성에 추가하는 방법에 대해서 알아봅니다. 먼저 프로젝트에서 Razor 구성요소를 추가합니다. Page 이름을 저는 Test.razor 라고 명명했습니다. @page 부분은 url 주소가 됩니다. @page "/test" 라고 정의하면 'http://site.com/test' 주소로 접근이 가능합니다. @page "/test" TEST @code { } 이제 해당 페이지를 메뉴와 연결하려면 NavMenu.razor 페이지에 위 정의한 페이지를 호출할 수 있도록 NavLink 를 추가합니다. TEST herf 내용에 위에서 정의한 @page 내용이 들어가면됩니다.
코딩/Blazor 2024. 3. 8. 20:05

C# Blazor Page Parameter

C# Blazor Page Parameter Balzor Page 내부에 다른 Blazor Page 를 넣어 부모 자식관계인 경우 부모 Page 에서 자식 Page 로 값을 전달하려면 Parameter 로 정의된 Property 를 선언하면 됩니다. counter.razor 화면에 아래처럼 Parameter 를 정의합니다. Increment Property 을 정의했고 해당 값에 따라서 버튼클릭시 증가되는 값이 결정됩니다. @page "/counter" Counter Counter Click me (@currentCount) @code { [Parameter] public int Increment { get; set; } = 1; private int currentCount = 0; private voi..
코딩/Blazor 2024. 3. 8. 19:51

C# Blazor 이벤트 처리하기

C# Blazor 이벤트 처리하기 Blazor 화면에서 사용자 조작에 의한 이벤트 발생시 처리하는 방법을 알아봅니다. 기본적인 이벤트 처리방법입니다. 아래는 화면에서 버튼과 체크박스가 있는 경우 클릭과 체크박스 변화에 대한 이벤트를 처리합니다. @붙인 이벤트인자에 메서드를 연결하면 됩니다. Event Handler Event Handler Example @headingValue Update heading @checkedMessage @code { private string headingValue = "Initial heading"; private string checkedMessage = "Not changed yet"; private void UpdateHeading() { headingValue = ..
코딩/Blazor 2024. 2. 28. 23:31
◀ 1 2 3 ▶
반응형

티스토리툴바