Hello @Fla,
Let me demonstrate several scenarios showing how component data can be accessed in a DirectEvent handler.
The sample below defines a simple GridPanel and 3 Buttons.
GridPanel.cshtml
<ext-gridPanel id="myGrid"
title="Array Grid"
frame="true">
<columns>
<ext-column text="Company" dataIndex="company" flex="1" />
<ext-column text="Price" dataIndex="price" renderer="Ext.util.Format.usMoney" />
<ext-column text="Change" dataIndex="change" renderer="change" />
</columns>
</ext-gridPanel>
<ext-button text="Update Title">
<directEvents>
<click pageHandler="UpdateTitleClick">
<extraParams>
<ext-add key="newTitle" value="Updated Grid Title" />
</extraParams>
</click>
</directEvents>
</ext-button>
<ext-button text="Get Title">
<directEvents>
<click pageHandler="GetTitleClick">
<extraParams>
<ext-add key="myGrid" value="App.myGrid" mode="Raw" />
</extraParams>
</click>
</directEvents>
</ext-button>
<ext-button text="Get Columns">
<directEvents>
<click pageHandler="GetColumnsClick">
<extraParams>
<ext-add key="columns" value="App.myGrid.columns" mode="Raw" />
</extraParams>
</click>
</directEvents>
</ext-button>
GridPanel.cshtml.cs
public IActionResult OnPostUpdateTitleClick()
{
var myGrid = this.GetCmp<GridPanel>("myGrid");
myGrid.Title = "Updated title";
return this.Direct();
}
public IActionResult OnPostGetTitleClick(GridPanel myGrid)
{
this.X().Toast($"Grid title: '{myGrid.Title}'");
return this.Direct();
}
public IActionResult OnPostGetColumnsClick(string columns)
{
var serializerOpts = new System.Text.Json.JsonSerializerOptions()
{
PropertyNameCaseInsensitive = true
};
var columnModels = System.Text.Json.JsonSerializer.Deserialize<Column[]>(
columns,
serializerOpts
);
var columnNames = columnModels.Select(x => "'" + x.Text + "'");
var columnNamesStr = string.Join(", ", columnNames);
this.X().Toast($"Grid columns: {columnNamesStr}");
return this.Direct();
}
1. The
UpdateTitleClick
shows how
this.GetCmp<>(id)
can be used. Indeed, it returns an empty object with only one identifier property set. This method is not able to return more data for a model without providing that information from client-side. Thus, the best scenario for
this.GetCmp
will be updating properties of a rendered component by the component ID. In the sample above the grid title gets updated.
2. The
OnPostGetTitleClick
demonstrates how it's possible to pass a model from client-side to a server, so it can access the model properties. By default, only primitive properties are serialized to avoid huge payload sent over the wire, but this behavior can be adjusted using
toJSON
attribute configured on the component or globally in the Ext.NET middleware options.
3. The
OnPostGetColumnsClick
handler shows how it's possible to access GridPanel column configuration sent from client-side to a server. Currently it can be done by receiving the configuration into a string and then deserializing the string into the array of
Column
objects. This sample doesn't look clean enough, so we'll look investigate the possibility to simplify it in the next Ext.NET Classic release.
Hope it helps.