VO7E
A
익명님이 2022-07-06에 작성

Blazor에서 웹 페이지의 텍스트를 변경하는 아주 기초적인 방법

blazor,블레이저,ASP.NET,닷넷,.NET6,C#
자바 스크립트 또는 타입스트립트를 쓰는 다른 프레임워크와는 달리 ASP.NET core Blazor의 동작 방법은 조금 다릅니다.

자바스크립트를 연결하는 것과는 조금 다르면서 거의 비슷하게 C#의 문자열을 선언하고 그것을 앞에 골뱅이(엣 기호)를 붙이면 자동으로 HTML에 그 텍스트가 출력되게 됩니다. 상단의 페이지 라우팅과 하단의 코드 사이에 HTML를 작성해 주세요. 문장을 출력하는 P 태그와 버튼을 만들었습니다. <p>@p</p> <button @onclick="ChangeP"></button> 그런 다음 @code 안에 변수와 클릭하면 실행할 함수를 작성해 주시면 됩니다. private string p { get; set; } = "Blazor 입니다."; void ChangeP() { p = "바뀐 텍스트 입니다."; } 예시처럼 작성하였을 때, 작동 순서는 우선 이 페이지에서만 쓰는 게 가능한 private 로 문장을 하나 선언했습니다. HTML에 텍스트가 출력되는 곳에는 엣 기호를 붙여 이것은 C# 코드이다 라는 걸 확인시켜 주었습니다. 그런다음 버튼을 만들고 빈 함수 void 함수를 하나 만든 뒤 이것을 엣 기호가 붙은 onclick과 합쳐주면 이제 버튼을 누르면 P 값이 변경되고 자동으로 변경된 값이 HTML에 적용 됩니다. 이처럼 블레이저는 C#의 값을 바꾸면 자동으로 DOM이 렌더링 되는 게 굉장히 큰 장점입니다.

https://docs.microsoft.com/ko-kr/aspnet/core/blazor/components/data-binding?view=aspnetcore-6.0

블레이저에서 왜 변수를 선언할 때 이것저것 붙이는 지는 위 주소에서 확인해주세요.

blazor 기초중의 기초인 변수 출력과 함수 실행법
Total 3

좋은정보에요!

댓글
Drag and drop files here or click
A
익명
2022-07-06에 작성

함수에 public을 붙이지 않은 것은 외부에서 쓰지 않기 때문입니다.

익명님, 안녕하세요!

로그인 하시면 작성된 글을 수정할 수 있습니다.

VO7E Recent Post

작성된 최신글을 확인하세요!

사이트 TIP

This site made with Mudblazor!

An error has occurred. This application may no longer respond until reloaded. Reload 🗙