Ext.NET - What to get it WRONG? - PART 3 - DirectEvent

DirectEvents

DirectEvent is an event will trigger a DirectEvent ajax request to the server. It could be triggered by grid-column-command event, button-click event or from MessageBusDirectEvent

DirectEvent often goes with 3 common properties Url, Method, and ExtraParams

DirectEvent =
{
    Url = builder.UrlHelper.Action("Action", "Controller"),
    Method = HttpMethod.POST,
    ExtraParams =
    {
        new Parameter("key", "value", ParameterMode.Value)
    }
}

In Razor style

Html.X().Button().DirectEvents(de =>
{
    de.Click.Url = Url.Action("Action", "Controller");
    de.Click.Method = HttpMethod.POST;
    de.Click.ExtraParams.Add(
        Html.X().Parameter()
            .Name("key")
            .Value("value")
            .Mode(ParameterMode.Value)
    );
})

Ext.NET will generate to javascript

Ext.net.directRequest({
    url: "/Controller/Action",
    method: "POST",
    extraParams: {"key":"value"}
}

DirectEvent Properties

I will try to list all common properties of DirectEvent that I have worked with

Url

Url = builder.UrlHelper.Action("Action", "Controller")

Url is the url of the ajax request, it’s a string combined from controller name and action method

It’s recommended to use UrlHelper.Action to combine the Url

Method

Method = HttpMethod.POST

Method is HTTP method of the ajax request. It could be HttpMethod.POST, HttpMethod.GET, HttpMethod.DELETE…

ExtraParams

ExtraParams =
{
    new Parameter("key", "value", ParameterMode.Value)
}

// or
Html.X().Parameter()
    .Name("key")
    .Value("value")
    .Mode(ParameterMode.Value)

ExtraParams contains all the extra parameters that will be sent in the ajax request. Each extra parameter is a pair of key name and value, and

The parameter mode will define value is a hard or dynamic value.

If the mode is ParameterMode.Value, Ext.NET will generate the value as hard value

extraParams: {key: "value"} // value in double quote will be a hard-string value

and when the mode is ParameterMode.Raw, the value will be a dynamic value

extraParams: {key: value} // value is a JS variable is available in run-time
                          // otherwise, "value is not defined" exception will throw

Use dynamic value in DirectEvent

The biggest problem when working with DirectEvent is we often need to use a dynamic extra parameter. It means we use ParameterMode.Raw mode and need to know

What variables available in run-time?

In the generation to JS part, DirectEvent always comes in a handler function that call Ext.net.directRequest('...') in the body.

For example, DirectEvent of button click

Html.X().Button().DirectEvents(de => {
    de.Click.ExtraParams.Add(
        Html.X().Parameter()
    );
});

and will be generated with item and e variables as below

{
    buttons: [{
        directEvents: {
            click: {
                fn: function(item, e) {
                    Ext.net.directRequest({ extraParams: {} });
                }
            }
        }
    }]
}

So base on every single type of the component DirectEvent is binding, it will be bounded with the difference variables.

DirectEvent in Button

Continue to the previous sample

• item is the ExtJS button component
• e is an onclick object event.

In this case, we can get name of button in item by using item.name in extra params like this

Html.X().Parameter()
    .Name("buttonName") // define "buttonName" as key
    .Value("item.name")
    .Mode(ParameterMode.Raw) // use raw mode to pass dynamic value

and it generates to

fn: function(item, e){
    Ext.net.directRequest({
        extraParams: {"buttonName": item.name}
    });
}

DirectEvent in Grid Command

X.GridPanel()
    .ColumnModel(
        X.ImageCommandColumn()
            .Commands(X.ImageCommand().CommandName("Submit"))
            .DirectEvents(de => {...})
    );

It’s just the same with Button but the difference variables

fn: function (item, command, record, recordIndex, cellIndex) {
    Ext.net.directRequest({...});
}

• item is the command component, here is the ImageCommand named “Submit”.
• command is name of command calling, “Submit” is the command in this case.
• record is the store record which maps to the referenced cell. We can access to data using record.data.
• recordIndex is the index of store record which maps to the referenced cell.
• cellIndex is the index of referenced cell.