.Net Core MVC Direct Event example

[Fahd]

Hi I am trying to use below code with my .Net core MVC application. But, I am getting error. Also where can I get the documentation for all the list of Icons(iconCls="x-md md-icon-add-circle-outline")

<ext-button
            text="Add GridPanel"
            iconCls="x-md md-icon-add-circle-outline"
            onDirectClick="Button1_Click"
            marginAsString = "0 0 20 0">
            <directEvents>
                <click pageHandler="Button1_Click">
                    <extraParams>
                        <ext-add key="button" value="this" mode="Raw" />
                        <ext-add key="gridId" value="grid1" />
                    </extraParams>
                </click>
            </directEvents>
        </ext-button>

I have tried with Url as well

<ext-button
            text="Add GridPanel"
            iconCls="x-md md-icon-add-circle-outline"
            onDirectClick="Button1_Click"
            marginAsString = "0 0 20 0">
            <directEvents>
                <click Url="@Url.Action("Button1_Click")">
                    <extraParams>
                        <ext-add key="button" value="this" mode="Raw" />
                        <ext-add key="gridId" value="grid1" />
                    </extraParams>
                </click>
            </directEvents>
        </ext-button>

[fabricio.murta]

Hello, @Fahd!

Hi I am trying to use below code with my .Net core MVC application. But, I am getting error.

There's not much I can tell if we don't have a test case or at least which error you are getting. Can you provide a runnable test case You can base your test case off one of our online examples at https://examples.ext.net. The project for the examples website is at https://github.com/extnet/examples.ext.net.

Also where can I get the documentation for all the list of Icons(iconCls="x-md md-icon-add-circle-outline")

They are the Material Design icons, available for the Material theme, and the Spotless exclusive Ext.NET theme. Their official icon listing (and searching) website is: https://fonts.google.com/icons

And you can apply corresponding icon with Ext.NET's CSS path by prepending x-md md-icon- to the icon name.

Let us know if you still are having trouble finding (and using) the icons from the library. And please provide more information on your other question, perhaps we'd better split this thread in two for the different questions you have, if you need to delve more on the icons.

Hope this helps!

[Fahd]

@model EXTTestApp.Models.GridPanelModel
@{
    ViewData["Title"] = "GridPanel";
}
<ext-section target="Main">
    <ext-container region="Center" scrollable="true" paddingAsString="30 20 30 50">
        <items>
            <ext-gridPanel id="grid1"
                title="GridPanel"
                width="960"
                height="640"
                frame="true">
                <store>
                    <ext-store data="Model.GridData">
                        <fields>
                            <ext-dataField name="company" />
                            <ext-numberDataField name="price" />
                            <ext-numberDataField name="change" />
                            <ext-numberDataField name="pctChange" />
                            <ext-dateDataField name="lastChange" dateFormat="yyyy-MM-dd hh:mm:tt" />
                        </fields>
                    </ext-store>
                </store>
                <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" />
                    <ext-column text="Change %" dataIndex="pctChange" renderer="pctChange" />
                    <ext-dateColumn text="Last Updated" dataIndex="lastChange" width="150" format="yyyy-MM-dd" />
                </columns>
                <bbar>
                    <ext-toolbar>
                        <items>
                            <ext-Button ID="btnSave" Text="Save" >
                                <directEvents>
                                    <Click Url="@Url.Action("Save");" method=POST >
                                        <eventMask>
                                            <ext-eventMask showMask="true" msg="Saving..." />
                                        </eventMask>
                                        <extraParams>
                                            <ext-add key="button" value="this" mode="Raw" />
                                            <ext-add key="gridId" value="grid1" />
                                        </extraParams>
                                    </Click>
                                </directEvents>
                            </ext-Button>
                        </items>
                    </ext-toolbar>
                </bbar>
                
            </ext-gridPanel>
        </items>
    </ext-container>
</ext-section>

using Ext.Net;
using Ext.Net.Core;
using EXTTestApp.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;

namespace EXTTestApp.Controllers
{
    public class GridPanelController : Controller
    {
        public IActionResult Index()
        {
            return View(new GridPanelModel());
        }
        public IActionResult Save(Button button, string gridId)
        {
            return this.Direct();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace EXTTestApp.Models
{
    public class GridPanelModel
    {
        List<object> gridData = null;

        string now = DateTime.Now.ToString("yyyy-MM-dd hh:mm:tt");

        public List<object> GridData
        {
            get => this.gridData ??= new List<object>
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                new object[] { "McDonald's Corporation", 36.76, 0.86, 2.40, now },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
            };
        }
    }
}

[Fahd]

Any response on this would be appreciated as it is delaying our development.

[fabricio.murta]

Hello @Fahd, and sorry for the delay! We are checking your test case and will post a follow-up today!

[fabricio.murta]

Hello again, @Fahd!

In order to properly build the request to the action endpoint, you should use a simplified version of the DirectEvent set up.

All that seems to have been left in your test case was in line 36 of the cshtml file code.

So turn:

<Click Url="@Url.Action("Save");" method=POST >

into

<Click actionName="Save">

And your test case should work. Sorry again for the delay, and hope the solution above works for you!.. If not, there may be some settings in the project required for that to work. Just let us know if you still have issues with Direct Events, and we'll look into it!

Notice the solution above applies for the provided test case, which is using MVC and not the new Razor Pages concept with ASP.NET 6+.

[Fahd]

Is there a way to pass a controller name as well.

[fabricio.murta]

Hello, @Fahd!

Sorry once again for the delay replying your message.

Your question was very pertinent, as actionName= only allows for actions in the same controller. It seems, though, that there's no specific directive to specify the controller yet. This is indeed something that could be improved simply by allowing a controller name to be passed, and for that, we've logged #1878 in GitHub.

Fortunately, this allowed me to review the previous answer and it seems you were fine using @Url.Action("ActionName") after all. Thus, all you needed in line 36 of the cshtml code provided was to remove the method="POST", thus turning the line into:

<Click Url="@Url.Action("Save");">

And following this line of thought, naturally you can append the controller name to the parameter, and it should work just fine:

<Click Url="@Url.Action("Save", "MyOtherController");">

So the whole problem was just method="POST". In practice, what happens when you remove it, is that it becomes method="GET" which is required to access the MVC actions.

Hope this helps!