Ext.NET 이벤트

Ext.Net은 DirectEvents를 통해 서버에서 비동기적으로 이벤트 처리를 수행합니다.우리는 Ext. Net 용법 개관 이 편에서 이미 간단하게 Direct Events를 소개했는데, 오늘 우리는 상세하게 Direct Events를 소개할 것이다.

DirectEvents 비동기식 서버 측 이벤트 실행

먼저 Ext. Net Direct Events의 가장 간단한 사용법을 살펴보겠습니다. 단추를 누르면 서버 측의 이벤트 처리 방법을 터치하고 프론트에서 알림 상자를 팝업합니다.

<ext:Window runat="server" ID="win1"
    Title="Ext.Net DirectEvents"
    Width="300" Height="200">
    <Buttons>
        <ext:Button runat="server" ID="btnOK"
            Text=" " Icon="Accept"
            OnDirectClick="btnOK_DirectClick">
        </ext:Button>
    </Buttons>
</ext:Window>

여기에는 다음과 같은 간략한 방법으로 OnDirectEvents 이벤트가 추가되었습니다.

<ext:Button runat="server" ID="btnOK"
    Text=" " Icon="Accept">
 <DirectEvents> <Click OnEvent="btnOK_DirectClick"></Click> </DirectEvents>
</ext:Button>

이벤트 처리 방법은 다음과 같습니다.

protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e)
{
    X.MessageBox.Alert(" ", " ").Show();
}

코드를 컴파일하고 페이지를 새로 고치고 단추를 누르면 다음과 같은 효과를 볼 수 있습니다.

마스크 레이어 표시

위의 코드는 Direct Events를 사용하여 서버 측의 이벤트를 실행하는 방법을 보여 주었습니다. Direct Events는 비동기적인 방식으로 서버 측 코드를 실행합니다. 그러면 우리는 실행할 때 클라이언트가 커버층을 표시하여 사용자가 다른 작업을 하지 못하게 하기를 원합니다. 이 점은 Ext.Net이 이미 우리에게 생각해 주었습니다.

<ext:Button runat="server" ID="btnOK"
    Text=" " Icon="Accept">
    <DirectEvents>
        <Click OnEvent="btnOK_DirectClick">
            <EventMask ShowMask="true" Msg=" ..."></EventMask>
        </Click>
    </DirectEvents>
</ext:Button>

그리고 우리는 서버 측 이벤트 처리 방법에서 프로그램을 좀 쉬게 합니다.

protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e)
{
    System.Threading.Thread.Sleep(3000);

    X.MessageBox.Alert(" ", " ").Show();
}

이렇게 하면 우리가 버튼을 다시 눌렀을 때 다음과 같은 효과를 볼 수 있다.

이벤트에 사용자 정의 매개 변수 추가

Ext.Net DirectEvents에서는 이벤트에 사용자 정의 매개변수를 추가할 수도 있습니다.

<ext:Button runat="server" ID="btnOK"
    Text=" " Icon="Accept">
    <DirectEvents>
        <Click OnEvent="btnOK_DirectClick">
            <EventMask ShowMask="true" Msg=" ..."></EventMask>
 <ExtraParams> <ext:Parameter Name="name" Value="btnOK"></ext:Parameter> </ExtraParams>
        </Click>
    </DirectEvents>
</ext:Button>

여기서, 우리는 처리 방법에 이름이name인 매개 변수를 보내서 서버 측의 처리를 볼 것입니다.

protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e)
{
    System.Threading.Thread.Sleep(3000);

    string btnName = e.ExtraParams["name"];
    X.MessageBox.Alert(" ", btnName + " ").Show();
}

서버에서, 우리는 e.ExtraParams를 통해 이 매개 변수에 접근합니다.

서버가 반환하는 데이터 처리

Ext. Net DirectEvents는 서버가 반환하는 데이터를 처리하기 위해 클라이언트 콜백 방법을 추가할 수 있습니다.

<ext:Button runat="server" ID="btnOK"
    Text=" " Icon="Accept">
    <DirectEvents>
        <Click OnEvent="btnOK_DirectClick" Success="fnSuccess">
            <EventMask ShowMask="true" Msg=" ..."></EventMask>
            <ExtraParams>
                <ext:Parameter Name="name" Value="btnOK"></ext:Parameter>
            </ExtraParams>
        </Click>
    </DirectEvents>
</ext:Button>

설정에 success 설정을 추가하면 실행에 성공한 후에 fnSuccess 방법을 호출하는 것을 나타냅니다. fnSuccess 방법의 정의는 다음과 같습니다.

function fnSuccess(response, result) {
    alert(result.extraParamsResponse.data);
}

다음은 서버에서 데이터를 반환하는 방법입니다.

protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e)
{
    //System.Threading.Thread.Sleep(3000);

    //string btnName = e.ExtraParams["name"];
    //X.MessageBox.Alert(" ", btnName + " ").Show();

    e.ExtraParamsResponse.Add(new Ext.Net.Parameter("data", "abc"));
}

이러한 처리를 통해 우리는 서버에서 데이터를 되돌려주고 클라이언트에서 js 코드를 통해 처리할 수 있다.

confirmation 구성

confirmation 설정은 이벤트를 터치하기 전에 알림을 표시하는 데 사용되며, 사용자가 서버에 제출하여 처리할지 여부를 결정합니다.
그것의 용법은 매우 간단하지만 매우 실용적이다.

<ext:Button runat="server" ID="btnOK"
    Text=" " Icon="Accept">
    <DirectEvents>
        <Click OnEvent="btnOK_DirectClick" Success="fnSuccess">
            <EventMask ShowMask="true" Msg=" ..."></EventMask>
            <ExtraParams>
                <ext:Parameter Name="name" Value="btnOK"></ext:Parameter>
            </ExtraParams>
            <Confirmation ConfirmRequest="true"
                Title=" " Message=" ？">
            </Confirmation>
        </Click>
    </DirectEvents>
</ext:Button>

여분의 코드 처리를 할 필요가 없다. 이 두 줄의 설정만 하면 출발 시간 전에 알림을 할 수 있다.
오늘은 이만큼 소개하고 내일은 더욱 실용적인 기능을 계속 공부하겠습니다.