전역 자바스크립트 함수 호출 하기 wwwRoot/js/global.js 에 특정 함수 호출 function exampleFunction() { alert("exampleFunction from global.js called"); } 위의 global.js 를 _Layout.cshtml 의 body 영역에서 script 태그를 통해 import 하였다. IJSRuntime 를 @inject 를 이용해 inject 한후 global.js 의 exampleFunction 을 호출 한다. Pages/CallGlobalJavascriptFunction.razor @page "/call/global-javascript-function" @inject IJSRuntime JS Call Global Javascript..

자바스크립트 모듈과 표준(??)자바스크립트 //a javascript module: export function exampleFunction() { alert("Hello World") } //A standard JavaScript: function exampleFunction() { alert("Hello World") } 전역으로 미리 javascript 로드하기 장점 구현하기 쉽다. 일부 특정 라이브러리에 적용할 수 있다. 단점 첫번째 렌더링을 느리게 만든다. 명명풀을 오염시켜서 javascript 충돌이 발생될 수 있다. 구현 global.js 파일을 wwwroot/js/ 에 넣습니다. Pages/_Layout.cshtml 에 다음과 같은 코드를 추가합니다. ... ... 요청시에 javascri..

Content Projection은 일반 UI에 관한 것이고, Generic Projection은 Content Projection을 더욱 확장하며, UI와 관련된 Generic UI 및 Generic 데이터에 관한 것입니다. RenderFragment 형태로 template 을 정의 하고 (T 는 IPerson 의 Concreate class 인 Teacher 와 Student) List 을 통해 InputData 의 data 들을 알맞은 Template 에 맞게 할당해서 처리 한다. Data/IPerson.cs public interface IPerson { public string Name { get; set; } } public class Student:IPerson { public string ..

공통 논리를 처리하고 특정 논리를 해당 Component 의 사용자에게 맡길 수 있습니다. 단일 슬롯 콘텐츠 프로젝션 RenderFragment? 형태로 정의된 Property 에 content (HTML or Razor element) 를 전달 할 수 있다. Parent 에서는 이 RenderFragment 에 element 를 전달하여 유연한 contents 를 구성할 수 있다. (vue 개발자가 있다면 slot 과 비슷한 개념으로 생각하면 된다.) Pages/Child.razor Child @ChildContent @code { [Parameter] public RenderFragment? ChildContent { get; set; } } Pages/Parent.razor @page "/inter..

하나의 data 를 모든 Component 가 사용할 때 선호되는 기술 TransferService 라는 state management class 를 따로 두고 해당 class 가 model class 를 관리하도록 하는 형태 Data/TransferService.cs using System.Collections.ObjectModel; namespace BlazorTutorial.Data; public class TransferService { private string _data = "TransferService"; public string Data { get => _data; set { _data = value; DataChanged?.Invoke(this, value); } } public even..

상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 방법 또한 url 을 통해 parameter 를 전달 하기도 한다. Pages/Parent.razor @page "/interaction/parameters" Parent @code { public string FirstData { get; set; } = "First data"; public string SecondData { get; set; } = "Second data"; } Pages/Child.razor Child @InputParameter @RequiredInputParameter @code { [Parameter] public string InputParameter { get; set; } = "Default Value"; [Edit..