반응형
컴포넌트와 클래스
- .razor 컴포넌트는 HTML과 C# 코드를 하나의 파일에 사용할 수 있음
- .razor 컴포넌트에는 HTML을 .cs 파일에는 C# 코드를 따로 분리하여 사용할 수 있음
Counter.razor
@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Counter 컴포넌트가 컴파일되면 @code { ... } 부분이 아래와 같은 클래스로 생성
public partial class Counter
{
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Counter.razor 컴포넌트와 Counter.razor.cs 파일 분리
Counter.razor 수정
@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
Counter.razor.cs 파일 생성 및 코드 입력

public partial class Counter
{
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
부모 클래스를 상속 받아서 사용
CounterBase.cs 파일 생성 및 코드 입력
- .razor 컴포넌트에서 CounterBase 클래스에 접근하려면 CounterBase 클래스는 ComponentBase를 상속 받아야함
using Microsoft.AspNetCore.Components;
namespace BlazorTutorial.Data
{
public class CounterBase : ComponentBase
{
protected int currentCount = 0;
protected void IncrementCount()
{
currentCount++;
}
}
}
_Imports.razor
@using BlazorTutorial.Data
Counter.razor
- @inherits CounterBase 이렇게 하면 public partial class Counter : CounterBase 이렇게 되지 싶음
@page "/counter"
@inherits CounterBase
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
반응형
'블레이저' 카테고리의 다른 글
[블레이저] 컴포넌트 (0) | 2022.03.11 |
---|---|
[블레이저] NavMenu 바꾸기(스크롤바 추가) (0) | 2022.03.10 |
[블레이저] Blazor Server 앱 프로젝트 구조 (0) | 2022.03.08 |
[블레이저] Blazor Server 인트로 (0) | 2022.03.08 |