JS Directive를 사용하여 DotVVM에서 JavaScript 함수 호출

안녕! 반갑습니다. ASP.NET의 DotVVM에서 JavaScript 함수를 호출하는 방법과 그 반대의 경우를 알아보기 위해 이 자습서 기사에서는 웹 페이지에서 두 개의 숫자를 요청하고 JavaScript에서 작업을 수행하고 결과를 표시할 때 JS Directive를 사용하는 방법을 배웁니다. 그 페이지.

JS 디렉티브란?

JS 지시문은 DotVVM 컨트롤과 JavaScript 코드 간에 상호 작용하는 방법을 제공하는 기능 세트입니다. 예를 들어 JS Directive를 사용하면 DotVVM에서 JavaScript 함수를 호출하고 JavaScript에서 DotVVM으로 데이터를 보낼 수 있습니다.

참고: 이 기능은 DotVVM 3.0에 통합되었습니다.

따라야 할 단계

DotVVM과 JavaScript 간의 통신을 설정하려면 다음 단계를 따라야 합니다.

해당 기능이 있는 JavaScript 모듈을 선언합니다.

DotVVM 시작에서 해당 모듈을 등록합니다.

DotVVM 보기에서 선언된 모듈을 가져옵니다.

일하러 가자! DotVVM에서 JavaScript 함수를 호출하거나 데이터를 수신합니다.

예시

예제에서 JS Directive가 어떻게 작동하는지 확인하기 위해 위에서 언급한 단계에 따라 사용자에게 두 개의 숫자를 요청하고 해당 작업을 수행하는 JavaScript 함수를 호출하고 마지막으로 결과를 웹 페이지에 표시해 보겠습니다.

우리의 예는 다음과 같이 시각화됩니다.



가장 먼저 가져야 할 것은 해당 기능이 있는 JavaScript 모듈입니다. 이 경우 다음 정의와 함께 JavaScript.js 폴더에 wwwroot라는 파일이 있습니다.

export default (contextApp) => new App(contextApp);
var WEB;

class App {

    constructor(contextApp) {
        this.contextApp = contextApp;
        WEB = contextApp;
    }

    operation(a, b) {
        let result = a + b;
        WEB.namedCommands["ResultOperation"](result);
    }

}

여기서 operation 함수는 합계를 수행한 다음 그 결과를 DotVVVM으로 보기에 정의된 ResultOperation 섹션에 넣습니다.

이App 클래스와 정의된 컨텍스트를 사용하여 DotVVM에서 JavaScript로 또는 그 반대로 호출할 수 있도록 DotVVM에 등록할 수 있습니다. 이런 의미에서 우리는 DotVVM Startup 클래스로 이동해야 하며 ConfigureResources 메서드에서 문제의 JavaScript 파일을 참조하고 이 레코드의 이름을 지정해야 합니다(이 경우 이름은 module ).

private void ConfigureResources(DotvvmConfiguration config, string applicationPath)
{

    //JS Directive
    config.Resources.Register("module", new ScriptModuleResource(new UrlResourceLocation("~/JavaScript.js"))
    {
        //Dependencies = new[] { "external/other-js-file" }
    });
}

이 정의를 통해 이미 JS Directive를 사용할 수 있습니다. 두 숫자의 합계에 대해 ViewModel에서 세 가지 변수를 정의합니다(이 경우 DefaultViewModel.cs).

@viewModel JSDirective.ViewModels.DefaultViewModel, JSDirective
@masterPage Views/MasterPage.dotmaster
@js module

<dot:Content ContentPlaceHolderID="MainContent">
    <div class="content">
        <div class="content__text">
            <h1>JS Directive Demo</h1>
            <h3>Add two numbers</h3>

            <ul class="content-page">
                <li><b>Number1: </b></li>
                <li><dot:TextBox Text="{value: Number1}" Type="Number" /></li>
                <li><b>Number2: </b></li>
                <li><dot:TextBox Text="{value: Number2}" Type="Number" /></li>
            </ul>

            <dot:Button Text="Calculate"
                        Click="{staticCommand:_js.Invoke("operation", Number1, Number2);}" />

            <dot:NamedCommand Name="ResultOperation" Command="{staticCommand: (int id) => _root.Result = id}" />
            <h3>Result: <b>{{value: Result}}</b></h3>
        </div>
    </div>
</dot:Content>

보기에서 사용하려는 JavaScript 모듈을 참조해야 합니다. 이 경우 이전에 등록된 모듈의 이름과 함께 식별자js로 참조할 수 있습니다.

@js module

그런 다음 이 관점에서 우리는 세 가지 중요한 사항을 언급할 수 있습니다.

더할 두 숫자를 설정하기 위해 TextBox 유형의 두 DotVVM 컨트롤이 사용되었습니다.

JavaScript 함수를 호출하려면 Button 를 사용하여 함수 이름을 지정하고 해당 매개변수( Number1 및 Number2 )를 보낼 수 있습니다.

NamedCommand 컨트롤을 사용하면 JavaScript에서 명령을 호출할 수 있습니다. 이 경우 섹션은 ResultOperation이라는 이름으로 정의되어 JavaScript에서 작업 값을 전송하고 변수Result(에서 정의됨)에 저장합니다. DotVVM의 ViewModel).

이 프로세스를 통해 DotVVM에서 JavaScript 함수를 호출하고 JavaScript에서 DotVVM으로 값을 보낼 수 있었습니다.

전체 JS Directive 설명서는 DotVVM: JS directive overview 의 설명서에서 검토할 수 있습니다.

읽어 주셔서 감사합니다

읽어주셔서 대단히 감사합니다. 이 기사가 흥미롭고 앞으로 유용할 수 있기를 바랍니다.

이 예제의 소스 코드는 GitHub의 다음 리포지토리에서 찾을 수 있습니다. DotVVM JS Directive .

논의해야 할 질문이나 아이디어가 있으면 서로 협력하고 함께 지식을 교환할 수 있는 것이 즐거울 것입니다.

에서 만나요! :)