Ext.NET - How to use DirectEvent?

What is 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

1
2
3
4
5
6
7
8
9
DirectEvent =
{
    Url = builder.UrlHelper.Action("Action", "Controller"),
    Method = HttpMethod.POST,
    ExtraParams =
    {
        new Parameter("key", "value", ParameterMode.Value)
    }
}

In Razor style

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
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

1
2
3
4
5
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

1
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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
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

How to 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 are 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

1
2
3
4
5
Html.X().Button().DirectEvents(de => {
    de.Click.ExtraParams.Add(
        Html.X().Parameter()
    );
});

and will be generated with item and e variables as below

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
    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,

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

1
2
3
4
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

1
2
3
4
5
fn: function(item, e){
    Ext.net.directRequest({
        extraParams: {"buttonName": item.name}
    });
}

DirectEvent in Grid Command

1
2
3
4
5
6
X.GridPanel()
    .ColumnModel(
        X.ImageCommandColumn()
            .Commands(X.ImageCommand().CommandName("Submit"))
            .DirectEvents(de => {...})
    );

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

1
2
3
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

Comments

comments powered by Disqus