Blazor에서 클라이언트 측 UI 이벤트를 수행하는 방법

asp.net-core blazor c#

문제

방금 Blazor로 시작 했으므로이 새로운 프레임 워크의 큰 잠재력을 이미 볼 수 있습니다.

그래도 입력 컨트롤에 초점을 맞추는 것과 같은 간단한 작업을 처리하는 방법은 궁금합니다. 예를 들어, 클릭 이벤트를 처리 한 후에는 포커스를 텍스트 입력 컨트롤로 설정하려고합니다. 그런 식으로 JQuery를 사용해야합니까, 아니면 Blazor에 그런 종류의 내장 메소드가 있습니까?

감사

업데이트 : 이것은 내가 Blazor에 대해 더 많이 알기 전까지는 지금 당장이 작업을 수행하는 방법입니다. (이 작업은 가능하지만 Blazor가 황금 시간대에 출전 할 때 더 좋은 방법이 될 것입니다.)

내 견해로는 다음과 같은 스크립트 섹션이 있습니다.

<script>
Blazor.registerFunction('FocusControl', (ctrl) => {
    document.getElementById(ctrl).focus();
    return true;
});
</script>

그런 다음 함수 섹션에이 함수가 있습니다.

<script>
Blazor.registerFunction('FocusControl', (ctrl) => {
    document.getElementById(ctrl).focus();
    return true;
});
</script>

그런 다음 Refresh 메서드에서 호출합니다. (TalkingDotNet에서 제공하는 샘플 코드는 http://www.talkingdotnet.com/create-a-crud-app-using-blazor-and-asp-net-core/ 에서 사용하고 있습니다)

<script>
Blazor.registerFunction('FocusControl', (ctrl) => {
    document.getElementById(ctrl).focus();
    return true;
});
</script>

수락 된 답변

Blazor는 javascript에 대한 대체품입니다 (더 정확하게 "가치 추가"). 이것은 클라이언트 측 솔루션입니다 (그러나 앞으로 ASP.Net에 쉽게 바인딩 될 수 있습니다).

여전히 HTML과 CSS를 기반으로합니다. C #은 웹 어셈블리를 사용하여 js 파트를 대체합니다. 그래서 아무것도 HTML 컨트롤을 액세스 / 수정하는 방법에 변경되었습니다.

현재 (0.1.0 버전) HTML DOM focus() 메소드를 사용하여 수행 할 작업을 수행해야합니다 (예 : javascript 를 지금 사용해야 함 :().

// Not tested code
// This is JavaScript. 
// Put this inside the index.html. Just below <script type="blazor-boot"></script>
<script>
    Blazor.registerFunction('Focus', (controlId) => {
      return document.getElementById(controlId).focus();
    });
</script>

//and then wrap it for calls from .NET:    
// This is C#

public static object Focus(string controlId)
{
    return RegisteredFunction.Invoke<object>("Focus", controlId);
    //object type is used since Invoke does not have a overload for void methods. Don't know why. 
    //this will return undifined according to js specs
}

자세한 내용은 아래를 참조하십시오.

js의 pakaging을 깔끔하게 개선하고 싶다면 . 너는 이렇게 할 수있다. https://stackoverflow.com/a/49521216/476609

// Not tested code
// This is JavaScript. 
// Put this inside the index.html. Just below <script type="blazor-boot"></script>
<script>
    Blazor.registerFunction('Focus', (controlId) => {
      return document.getElementById(controlId).focus();
    });
</script>

//and then wrap it for calls from .NET:    
// This is C#

public static object Focus(string controlId)
{
    return RegisteredFunction.Invoke<object>("Focus", controlId);
    //object type is used since Invoke does not have a overload for void methods. Don't know why. 
    //this will return undifined according to js specs
}

이 구성 요소를 루트에 추가하십시오. (App.cshtml)

// Not tested code
// This is JavaScript. 
// Put this inside the index.html. Just below <script type="blazor-boot"></script>
<script>
    Blazor.registerFunction('Focus', (controlId) => {
      return document.getElementById(controlId).focus();
    });
</script>

//and then wrap it for calls from .NET:    
// This is C#

public static object Focus(string controlId)
{
    return RegisteredFunction.Invoke<object>("Focus", controlId);
    //object type is used since Invoke does not have a overload for void methods. Don't know why. 
    //this will return undifined according to js specs
}

인기 답변

JavaScript 함수를 직접 호출 할 수는 없습니다. 당신은 먼저 당신의 기능을 등록해야합니다.

<script>
 Blazor.registerFunction('ShowControl', (item) => {       
     var txtInput = document.getElementById("txtValue");         
     txtInput.style.display = "";
     txtInput.value = item;
     txtInput.focus();          
});
return true;
</script>

그런 다음이 JavaScript 함수를 호출하는 C #의 메서드를 선언해야합니다. 처럼,

<script>
 Blazor.registerFunction('ShowControl', (item) => {       
     var txtInput = document.getElementById("txtValue");         
     txtInput.style.display = "";
     txtInput.value = item;
     txtInput.focus();          
});
return true;
</script>

클릭만으로이 C # 메서드를 호출 할 수 있습니다. 처럼,

<script>
 Blazor.registerFunction('ShowControl', (item) => {       
     var txtInput = document.getElementById("txtValue");         
     txtInput.style.display = "";
     txtInput.value = item;
     txtInput.focus();          
});
return true;
</script>

이 게시물 Blazor 및 ASP.NET Core를 사용하여 CRUD App 만들기 Blazor 에서 JavaScript를 호출하는 데모를 보여줍니다.




아래 라이선스: CC-BY-SA with attribution
와 제휴하지 않음 Stack Overflow
이 KB는 합법적입니까? 예, 이유를 알아보십시오.
아래 라이선스: CC-BY-SA with attribution
와 제휴하지 않음 Stack Overflow
이 KB는 합법적입니까? 예, 이유를 알아보십시오.