Blog

X 및 Y 마우스 좌표 표시

이미지 요소 위로 마우스를 가져가면 X 및 Y 마우스 좌표를 표시하려고 합니다.

• mousemove 이벤트가 처리됩니다. 
• Mouse_Move 는 이벤트 처리기 메서드입니다.
• 이벤트 핸들러는 Coordinates 속성 에 마우스 X 및 Y 좌표를 저장합니다 .
• Component View는 이 Coordinates 속성에 바인딩되어 X 및 Y 좌표를 표시합니다.

Component View

<img class="card-img-top" src="@Employee.PhotoPath" @onmousemove="@Mouse_Move" />

<h1>@Coordinates</h1>

구성 요소 클래스

protected string Coordinates { get; set; }

protected void Mouse_Move(MouseEventArgs e)
{
    Coordinates = $"X = {e.ClientX } Y = {e.ClientY}";
}

람다 식을 사용한 이벤트 처리 

구성 요소 클래스에서 별도의 명명된 메서드를 만든 다음 해당 메서드를 이벤트 처리기로 지정하는 대신 HTML에서 직접 이벤트 처리기로 람다 식을 사용할 수 있습니다. 아래에 예가 나와 있습니다.

<img class="card-img-top" src="@Employee.PhotoPath"
        @onmousemove="@(e => Coordinates = $"X = {e.ClientX} Y = {e.ClientY}")" />

직원 카드 바닥글 표시 및 숨기기

버튼을 클릭할 때 카드 바닥글을 표시하거나 숨기는 방법입니다.

Component View

• onclick 이벤트 처리 중
• Button_Click은 이벤트 핸들러 메서드입니다.
• 버튼의 텍스트는 구성 요소 클래스의 ButtonText 속성에 바인딩됩니다.
• card-footer <div> eletemt의 클래스 속성은 구성 요소 클래스의 CssClass 속성 에 바인딩됩니다.

<button class="btn btn-primary" @onclick="@Button_Click">@ButtonText</button>

<div class="card-footer text-center @CssClass">
    <a href="/" class="btn btn-primary">Back</a>
    <a href="#" class="btn btn-primary">Edit</a>
    <a href="#" class="btn btn-danger">Delete</a>
</div>

Component Class

ButtonText 및 CssClass 속성은 구성 요소 클래스에서 선언됩니다. Button_Click 이벤트 처리기에서 이 두 속성(예: ButtonText 및 CssClass)의 값은 현재 값에 따라 변경됩니다.

protected string ButtonText { get; set; } = "Hide Footer";
protected string CssClass { get; set; } = null;

protected void Button_Click()
{
    if (ButtonText == "Hide Footer")
    {
        ButtonText = "Show Footer";
        CssClass = "HideFooter";
    }
    else
    {
        CssClass = null;
        ButtonText = "Hide Footer";
    }
}

CSS 클래스

.HideFooter{
    display:none;
}