본문 바로가기

블레이저

[블레이저] 컴포넌트와 클래스

반응형

컴포넌트와 클래스

  • .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>
반응형