[Blazor] Cascading Parameter 와 TableTemplate

[색상 변경하기 예제]

 

 

Cascading Parameter 는 변수를 전달하는데 다른 페이지에

<Cascading Parameter 로 동일하게 선언되어 있는 변수가 있다면 그곳 까지 값이 전달된다

 

TableTemplate 은 C# 의 tempalte 같은 것인데 당연히 동일하지 않고 엇비슷하다

---

Cascading Parameter알아보기

만약 우리가 동일한 Parameter변수들을 넘겨주는 경우가 발생한다면 한번에 흘러내리는 것처럼

변수를 넘겨주게 하는 문법이다.

​

사용 방법은 매우 간단한데

<CascadingValue Name ="ThemeColor" Value="_selectedColor">

<ShowUser ...>

<ShowUser2 ...>

</CascadingValue>

태그를 사용하여 사용할 범위를 지정해 준다.

Name은 구분하기 위한 Key이며 Value는 범위내에 뿌릴 값이다.

​

이렇게 사용하게 되면 범위내에 있는 ShowUser, ShowUser2의 컴포넌트에 자동적으로 Value = "_selectedColor"

Parameter가 흘러내리듯이 정해지게 된다.

​

이를 ShowUser,Showuser2의 컴포넌트에서 사용하기 위해서는

[CascadingParameter(Name = "ThemeColor")]

string _color {get; set;}

위와 같이 사용하여 _color의 값에 Value="_selectedColor"가 Binding된것처럼 사용할 수 있게 된다.

​

[추가]

컴포넌트의 깊이에 상관없이 Parameter가 전달된다는 특징이 있다.

​

[Templated Component]알아보기

C#의 제너릭형식과 유사한 문법이다.

RenderFragment로 이루어진 Razor Component이다.

​

[넘어가는 이야기]

[c#에는 c++에 없는 partial class가 존재한다.

이는 a라는 파일에서 partial class a를 작성하고

추후에 b라는 파일에서 aprtial class a를 이어서 작성하게 되면 두 class를 하나로 합친 것처럼

작성하게 해주는 키워드이다. 현재 Blazor와는 상관없는 c#문법이므로 넘어가도 상관없다.] 딱히 이 부분은 크게 상관없는 부분이다.​

 

정리하자면 TableTemplate.razor를 생성한다.

1) 코드 부분에 [Parameter] public RenderFragment Header {get; set;}를 작성한다.

2) HTML 부분에 사용하기 위한 장소에 @Header를 선언해준다.

3) 다른 razor 컴포넌트에서 <TableTemplate></TableTemplate>를 선언해준다.

4) <TableTemplate></TableTemplate>의 범위안에 <Header></Header>를 서언하여

RenderFragment Header를 사용한다는 것을 알려준다.

5) <Hedaer></Header>의 범위안에 사용하고 싶은 HTML의 태그들을 지정해준다.

6) 이렇게 사용하게 되면 TableTemplate.razor의 @Header부분에 지정한 태그들이 들어가게 된다.

​

 

 

TableTemplate 예시

노란색 화살표가 해당 부분이 .razor 페이지로 들어가는 부분이 된다

이때 해당 부분을 대체하는데 쓰이는 역할로 RenderFragment 가 사용된다 : 태그를 그리는 느낌

TableTemplate 을 통해 보여지는 부분의 개수를 변경하거나 스타일을 다르게 하는 등이 가능해질 수 있다

 

 

ref : https://blog.naver.com/whro152/223039845752