• 

  [c# blazor] NavigationManager LocationChanged 이벤트란? LocationChanged이벤트는 페이지를 이동할때 자동으로 발생되는 이벤트입니다. 이 글을 읽기 전 선수 지식 포스팅 [c#] 이벤트란? | 델리게이트와 차이 [c#] EventHandler란? 사용할때는 NavigationManager클래스를 inject하여 사용하는데요. NavigationManager 클래스 원문 코드로 들어가보면 LocationChanged라는 EventHander가 포함되어있습니다. EventHandeler 원코드로 들어가보면, LocationChangedEventArgs를 두번째 인자로 받도록 세팅되어있습니다. 그렇다면 LocationChangedEventArgs는 어떤 녀석일까요? Location과 IsNavigationIntercepted(boolean 형태)라는 프러퍼.. c#/blazor 2022. 7. 27.

• 

  [c# blazor] NavigateTo를 이용한 특정 페이지 이동방법 일반적으로 버튼을 클릭하여 특정 url로 이동할때 href속성값을 이용합니다. 하지만 이번 포스팅에서는 href가 아닌 NavigateTo를 활용하여 특정 url로 이동하는 방법에 대해 알아보겠습니다. 먼저 아래와 같이 NavagationManager라는 클래스를 inject합니다. NavigationManagerReference는 해당 클래스를 사용하기위해 사용되는 이름이라 보시면 됩니다. 그렇기 때문에 아무렇게 이름을 적으셔도 상관없습니다. href를 지우고 onclick이벤트를 등록합니다. 해당 버튼을 누르면 GoToGoogle()이라는 함수가 실행되는 코드입니다. GoToGoogle()함수 바디에는 앞서 inject한 NavigationManagerRefrence 객체의 메소드인 NavigateT.. c#/blazor 2022. 7. 26.

• 

  [c# blazor] c# 코드 비하인드 파일 생성하는 방법 blazor에서 제공하는 razor component 파일에는 UI단과 c#코드를 작성하는 코드 스페이스로 구성되어 있습니다. 하지만 코드가 길어지다 보면 코드 스페이스에 모든 코드를 작성하기 부담스러울때가 있는데요. 이럴때 코드 비하인드 파일을 통해 따로 코드를 관리하는게 편리합니다. 이번 포스팅은 코드 비하인드 파일 생성에 관련된 내용입니다. 예제로 사용할 Test.razor파일을 먼저 생성합니다. //Test.razor 코드 스페이스단에 작성한 프러퍼티값을 UI단에 출력하는 아주 간단한 코드를 작성 해보았습니다. (바인딩을 모르시는 분은 해당 포스팅 참조) output: 우리가 해보고 싶은것은 코드 스페이스 구간에 작성했던 것을 코드 비하인드 파일로 옮겨 똑같이 작동하는지 확인해보고 싶습니다. 그러.. c#/blazor 2022. 7. 25.

• 

  [c# blazor] IJSRuntime이란? (자바스크립트 사용) 이번 포스팅에서는 블레이저에서 IJSRuntime을 통해 자바스크립트를 사용하는 방법에 대해 알아보겠습니다. 아래 예시처럼 버튼을 클릭하면 글자가 바뀌는 UI를 구성해볼건데요. 먼저 예제 코드를 작성할 Razor파일을 생성합니다. //JavascriptTest.razor 간단하게 UI를 구성해주고 버튼을 클릭하면 실행될 ChangeText()함수를 만들어 보았습니다. 빨간 사각형 부분이 자바스크립트와 연동시킬 함수를 넣는 부분인데요. 그에 앞서 c#코드에 자바스크립트 코드를 어떻게 작성할까요? //_Layout.cshtml _Layout.cshtml에 들어가서 문을 생성한 후 함수를 작성하면 됩니다. StartJS라는 이름의 함수로 작성을 해보았는데요, id값을 인자로 받고 있는 형태입니다. 즉 c#코드.. c#/blazor 2022. 7. 25.

• 

  [c# blazor] 바인딩이란 ? (양방향, 단방향) 이번 포스팅에서는 블레이저에서 양방향(two-way) 바인딩 과 단방향(one-way) 바인딩이 무엇인지 알아보도록 하겠습니다. 예제를 작성할 razor파일을 생성합니다. //Example.razor routing 주소를 설정해줍니다. 1) one-way(단방향) 바인딩 @code 단에 들어있는 프러퍼티 값을 UI단에 출력 해보겠습니다. 원하는곳에 @를 붙혀주면 위 그림과 같은 방향으로 값이 전달 됩니다. output: 하지만 input창에 우리가 직접 값을 입력한다고 해서, ExValue값이 변경되지는 않습니다. 왜냐하면 code단에서 UI단으로만 전달되는 단방향(one-way) 바인딩이 적용되어있기 때문입니다. 그렇다면 UI단에서도 코드단으로 데이터를 넘겨주려면 어떻게 할까요? 그때 사용하는 것이 양.. c#/blazor 2022. 7. 22.