Error: App.direct is undefined

[VADIM]

I followed CLI tutorial, created two template projects Ext.Net MVC and Ext.Net Razor Pages.
Both apps work fine.
However I cannot modify button in DirectEvent View to pass parameters to DirectEvent controller method.
There is no sample in Examples to pass parameter to controller method.
I tried App.direct but it creates an error "App.direct is undefined".

The code for Ext.Net Razor Pages:

@page  "{handler?}"
@model ExtDemo1.Pages.DirectEventsModel
@{
    ViewData["Title"] = "DirectEvent";
    var X = Html.X();
}
<ext-section target="Main">
    <ext-container region="Center" scrollable="true" paddingAsString="30 20 30 50">
        <content>
            <h1>DirectEvent</h1>
            <ext-button text="Click Direct" onDirectClick="ButtonClick" />
            <ext-button text="Click js alert" onClientClick="alert('client click');" />
            <ext-button text="Click Client" onClientClick="clientClick();" />
            <ext-label id="lbl" text="ext-label"></ext-label>
        </content>
    </ext-container>
</ext-section>

<script>
    function clientClick() {
        //error: App.direct is undefined
        App.direct.ButtonClick('client click');
    };
</script>

Controller:

using System;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Ext.Net;
using Ext.Net.Core;
using MojeeIO;

namespace ExtDemo1.Pages
{
    public class DirectEventsModel : PageModel
    {
        public void OnGet()
        {
        }
        public IActionResult OnPostButtonClick(string message = "default text")
        {
            Label lbl = this.GetCmp<Label>("lbl");
            lbl.Text = message;
            return this.Direct();
        }
    }
}

The recommendation from GitHub (absent: DirectEvent support #1713) worked after some adjustments:

<ext-button text="Click Params">
   <directevents>
      <click pageHandler="ButtonClick" method="POST" type="Load">
         <extraparams>
            <ext-add key="message" value="Button Click Params click" />
         </extraparams>
      </click>
   </directevents>
</ext-button>

But calling controller from JavaScript App.direct still does not work :(
And this solution only works for Razor Pages, not for MVC.

[fabricio.murta]

Hello @VADIM, and welcome to Ext.NET Forums!

The App.direct is only and only available when there are direct methods set up to the page. Basically the difference is:

- direct method is similar to a function that is wired between client and server-side. You call the direct method like a client-side JavaScript function, and it makes a server-side call. Thus, these functions return a handle like a "promise"; if you want to do anything with the returned value from a direct method, you should bind a callback to its call. The callback is triggered when the server returns the result, asynchronously, and then you can work with the result of the call. So a direct method is called via its Ext.direct.directMethodNameHere() client-side pointer.

- direct event is similar to an Ext JS listener, yet it is handled server-side. In addition to listeners, direct events can have a before, after and finally callbacks to add extra functionality to control its activation and handling the result from it. No App.direct is wired for direct events, they are bound via the components' events themselves and are not (meant to be) called directly.

We have a discussion about direct events' argument passing here: Get gridPanel columns at server side

Direct methods usage is highlighted in this example: Direct Events Duration messages. Key here is, the attributes usage (in [] brackets) before class and methods in the model C# code.

Hope this helps!

[VADIM]

Hi Fabricio,
I created a simple Calc Razor Page App.
Two text boxes. One for input value, another for Calc result.
Two buttons. One for Direct call, another for local JavaScript call.

Controller:

using System;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Ext.Net;
using Ext.Net.Core;

namespace ExtDemo1.Pages
{
    public class DirectEventsModel : PageModel
    {
        public void OnGet()
        {
        }
        public IActionResult OnPostGetSquare(string str)
        {
            if (int.TryParse(str, out int n))
            {
                this.GetCmp<TextField>("txtResult").SetRawValue((n * n).ToString());
            }
            else
            {
                this.GetCmp<TextField>("txtResult").SetRawValue("not a number");
            }
            return this.Direct();
        }
    }
}

Razor Page

@page  "{handler?}"
@model ExtDemo1.Pages.DirectEventsModel
@{
    ViewData["Title"] = "DirectEvent";
}

<ext-section target="Main">
    <ext-container region="Center" scrollable="true" paddingAsString="30 20 30 50">
        <content>
            <h1>Simple Calc</h1>
            <ext-label text="Enter a number"></ext-label>
            <ext-textField id="txtNumber"></ext-textField> // value to be sent to controller
            <ext-textField id="txtResult"></ext-textField> // value from comtroller
            <ext-button text="Get Square Direct">
                <directevents>
                    <click pageHandler="GetSquare" method="POST" type="Load">
                        <extraparams>
                            <ext-add key="str" value=2 />  
                        </extraparams>
                    </click>
                </directevents>
            </ext-button>
            <ext-button text="Get Square JS"></ext-button>
        </content>
    </ext-container>
</ext-section>

<script>
    function getSquareJs(str) {
        //need a call to controller method
    }
</script>

The questions are:
1. How to set extraparams value of <ext-button text="Get Square Direct"> to <ext-textField id="txtNumber"> text?
2. How to make JS function getSquareJs(str) to call OnPostGetSquare method of Controller?
3. How to call JS function getSquareJs(str) on click of <ext-button text="Get Square JS">?

[fabricio.murta]

Here, your example with four variant client-server interactions, all passing the current value within txtNumber, handling it and either updating the txtResult field or returning the result to be handled client-side.

view

@page
@model ExtDemo1.Pages.DirectEventsModel
@{
    ViewData["Title"] = "DirectEvent";
}

<ext-section target="Main">
    <ext-container region="Center" scrollable="true" paddingAsString="30 20 30 50">
        <content>
            <h1>Simple Calc</h1>
            <ext-label text="Enter a number" />
            <ext-textField id="txtNumber" /> // value to be sent to controller
            <ext-textField id="txtResult" /> // value from comtroller
            <ext-button text="Get Square Direct Event">
                <directevents>
                    <click pageHandler="GetSquareDirectEvent" method="POST" type="Load">
                        <extraparams>
                            <ext-add key="str"
                                     value="function() { return App.txtNumber.getValue(); }"
                                     mode="Raw" />
                        </extraparams>
                    </click>
                </directevents>
            </ext-button>
            <ext-button text="Get Square Direct Event (handle returned value)">
                <directevents>
                    <click pageHandler="GetSquareDirectEventRet" method="POST" type="Load" success="handleSquareDESuccess">
                        <extraparams>
                            <ext-add key="str"
                                     value="function() { return App.txtNumber.getValue(); }"
                                     mode="Raw" />
                        </extraparams>
                    </click>
                </directevents>
            </ext-button>
            <ext-button text="Get Square Direct Method" onClientClick="getSquareJs(App.txtNumber.getValue())" />
            <ext-button text="Get Square Direct Method (handle returned value)" onClientClick="getSquareJsClientHandler(App.txtNumber.getValue())" />
        </content>
    </ext-container>
</ext-section>

<script type="text/javascript">
    function handleSquareDESuccess(request, response) {
        App.txtResult.setValue(response.result);
    }

    function getSquareJs(number) {
        App.direct.GetSquareDirectMethod(number);
    }

    function getSquareJsClientHandler(number) {
        var directCallConfig = {
            success: function (result, options) {
                App.txtResult.setValue(result);
            }
        };
        App.direct.GetSquareDirectMethodRet(number, directCallConfig);
    }
</script>

model

using Ext.Net;
using Ext.Net.Core;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace ExtDemo1.Pages
{
    [DirectModel] // Only required if defining one or more direct methods
    public class DirectEventsModel : PageModel
    {
        public void OnGet()
        {
        }

        private string DoSquareMath(string val) =>  int.TryParse(val, out int n) ?  (n * n).ToString() : "not a number";

        private void SetResult(string val)
        {
            this.GetCmp<TextField>("txtResult").SetValue(val);
        }

        public IActionResult OnPostGetSquareDirectEvent(string str)
        {
            SetResult(DoSquareMath(str));

            return this.Direct();
        }

        public IActionResult OnPostGetSquareDirectEventRet(string str)
        {
            return this.Direct(DoSquareMath(str));
        }

        [Direct]
        public IActionResult OnPostGetSquareDirectMethod(string str)
        {
            SetResult(DoSquareMath(str));

            return this.Direct();
        }

        [Direct]
        public IActionResult OnPostGetSquareDirectMethodRet(string str)
        {
            return this.Direct(DoSquareMath(str));
        }
    }
}

Respectively, in the view:
- Use a Direct Event to call the server to do the math and:

1. fill the desired field.
2. return the result. Client-side, we will handle the returned value.

- Use a Direct Method to call the server to do the math and:

1. fill the desired field.
2. return the result. Client-side, we will handle the returned value.

Here you'll see we used the success callbacks for both the Direct Event and Method. Similarly, there is the failure callback to handle when the server response does not arrive in a reasonable amount of time. When it comes to a statement resembling the finally semantics you have in try-catch blocks (runs regardless of success or failure), you have complete on Direct Events and callback in direct Methods.

Hope this helps!

[VADIM]

Thanks Fabricio!

Works like charm.

[fabricio.murta]

Hello @VADIM!

Glad it helped, and thanks for the feedback!