여러 중첩된 구성 요소에 바인딩 Pages/Parent.razor @page "/multi-binding/parent" Parent Component Parent Message: @parentMessage Change from Parent @code { private string parentMessage = "Initial value set in Parent"; private void ChangeValue() { parentMessage = $"Set in Parent {DateTime.Now}"; } } Pages/Child.razor Child Component Child Message: @ChildMessage Change from Child @code { [Parameter] public stri..

구문 분석할 수 없는 값 사용자가 데이터 바인딩된 요소에 구문 분석할 수 없는 값을 제공하면 바인딩 이벤트가 트리거될 때 구문 분석할 수 없는 값이 자동으로 이전 값으로 되돌아간다. Pages/UnparsableValues.razor @page "/unparseable-values" inputValue: @inputValue @code { private int inputValue = 123; } 위 내용에서 다음과 같이 @bind:event="oninput" 으로 변경 하시면 input 에 아주 간단하게 int 를 제외하고는 입력할 수 없게 만들 수 있다. 변경된 아래에 예제를 보자 @page "/unparseable-values" // decimalValue.ToString("0.000", cultur..

Razor 구성 요소는 필드, 속성, Razor 식 값을 사용하여 @bind Razor 지시문 특성에 데이터 바인딩 기능을 제공합니다. Pages/Bind.razor 속성 및 Field 에 바인딩하는 예제. focus 가 input 에서 사라지면 ui 가 rendering 되며 속성 또는 필드가 update 된다. @page "/bind" inputValue: @inputValue InputValue: @InputValue @code { private string? inputValue; private string? InputValue { get; set; } } Pages/BindTheory.razor 다음은 Blazor @bind 가 실제 HTML 로 작성되는 방식을 보여준다. @page "/bind-..

.NET6의 Blazor에서는 Razor Component 의 동적 렌더링을 위한 'DynamicComponent'를 도입했다. 따라서 DynamicComponent를 사용하면 조건부 논리를 사용하지 않고도 다양한 유형의 Component 를 매우 쉽게 렌더링할 수 있다. 또한 동적으로 렌더링할 때 해당 Component 에 적절한 매개변수를 전달할 수 있다. 위 DynamicComponent 를 Test 하기 전에 기본적인 Blazor Server Project 를 생성 하자 https://yogingang.tistory.com/131 Blazor Server Create Project 1. VisualStudio 2022 새 프로젝트 만들기 선택 2. Blzor Server App 선택 Next 3...

Blazor 에서는 C# 에서 JavaScript 관련 Method 를 호출 할 수 있지만 반대로 JavaScript 에 C# 관련 Method 를 호출 할 수도 있다. **이전강좌를 통해 기본적인 Javascirpt Interop 에 대해 익혔다고 가정합니다. ** https://yogingang.tistory.com/183 https://yogingang.tistory.com/187 직접 호출 Data/CSharpObject.cs ... [JSInvokable] public static string StaticMethod() => "Static method called"; ... wwwroot/js/global.js ... async function callStaticLocalComponentMeth..

JavaScript 함수에 data 전달 IJSRuntime 의 InvokeAsync 및 InvokeVoidAsync 둘다 매개변수를 전달할 수 있다. 아래 파일을 생성 한다. wwwroot/js/callByModule.js export function callWithPrimtiveParameters(data1, data2, data3) { alert(`Received: data1 ${data1}, data2 ${data2}, data3 ${data3}`); } Pages/CallWithParameter.razor @page "/call/pass-parameter-javascript-function" @inject IJSRuntime JS @implements IAsyncDisposable pass pa..