[OPEN] [#1860] Parameters in ajax-proxy store

**ronaldo** · Jun 03, 2021, 7:33 PM

Hi,

I am migrating a project from Ext.Net v5.3 (.NET Framework 4.7.2) to Ext.Net v7.2 (.NET 5.0) and trying to load a store using ajax-proxy with parameters and got the error below when launching the razor page:

LayoutException: Unexpected element 'DirectEventParameterTagHelper' nested into 'ServerProxyExtraParamsPropertyTagHelper'.

Click image for larger version.

Name: error.jpg
Views: 169
Size: 102.4 KB
ID: 25532

GridPanel2.cshtml

@page  "{handler?}"
@model ExtSample.Pages.GridPanel2Model
@{
    Layout = null;
    ViewData["Title"] = "GridPanel";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewData["Title"] - ExtSample</title>

    <script type="text/javascript">
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
        };

        var load = function () {
            // ... other things
            App.grid2.getStore().load();
            // ... other things
        };
    </script>

    <ext-resourceManager />
</head>
<body>
    <ext-button text="Load" margin="20">
        <listeners>
            <click handler="load();" />
        </listeners>
    </ext-button>
    <ext-gridPanel id="grid2" title="GridPanel2" width="960" height="640" frame="true" margin="20">
        <store>
            <ext-store autoLoad="false">
                <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>
                <proxy>
                    <ext-ajaxProxy url="GridPanel2/Data">
                        <reader>
                            <ext-jsonReader x-rootProperty="result" />
                        </reader>
                        @*comment extraParams works fine*@
                        <extraParams>
                            <ext-add key="par1" value="1" mode="Value" />
                        </extraParams>
                    </ext-ajaxProxy>
                </proxy>
            </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>
    </ext-gridPanel>
</body>
</html>

GridPanel2.cshtml.cs

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

namespace ExtSample.Pages
{
    public class GridPanel2Model : PageModel
    {
        public void OnGet()
        {

        }

        public IActionResult OnGetData(int par1)
        {
            var now = DateTime.Now.ToString("yyyy-MM-dd hh:mm:tt");
         
            var data = 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 }
            };

            return this.Direct(data);
        }

    }
}

Result without extra params:

Click image for larger version.

Name: page.jpg
Views: 172
Size: 82.5 KB
ID: 25533

Am I forgetting something?

Thanks

Ronaldo

**fabricio.murta** · Jun 08, 2021, 10:42 PM

Hello Ronaldo, and welcome to Ext.NET Forums!

You don't seem to be forgetting anything. If anything, you shouldn't need the <ext-resourceManager /> in the <head /> block anymore. But that hardly has something to do with the issue.

That's indeed a problem with Ext.NET 7 tag helpers handling. We have logged it on github under issue #1860 and will post a follow-up as soon as we get the issue fixed!

In the meanwhile, you can just use custom config to craft the setting and use it.

<customConfig>
    <ext-add key="extraParams">
        <ext-add key="par1" value="80" mode="Value" />
    </ext-add>
</customConfig>

Hope this helps!

**ronaldo** · Jun 09, 2021, 7:11 PM

Thanks for reply @FabrÃ*cio

<ext-resourceManager /> removed.

<customConfig>
    <ext-add key="extraParams">
        <ext-add key="par1" value="80" mode="Value" />
    </ext-add>
</customConfig>

It's works for <mode="Value">. Tks.

I've expanded the example (sorry I didn't send it before) and par2 with mode="Raw" or mode="Auto" is never assigned.

GridPanel2.cshtml

@page  "{handler?}"
@model ExtSample.Pages.GridPanel2Model
@{
    Layout = null;
    ViewData["Title"] = "GridPanel";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewData["Title"] - ExtSample</title>

    <script type="text/javascript">
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
        };

        var load = function () {
            // ... other things
            App.grid2.getStore().load();
            // ... other things
        };
    </script>
</head>
<body>
    <ext-comboBox id="par2" margin="10" >
        <items>
            <ext-listItem text="text-1" value="1"/>
            <ext-listItem text="text-2" value="2"/>
        </items>
    </ext-comboBox>
    <ext-button text="Load" margin="10">
        <listeners>
            <click handler="load();" />
        </listeners>
    </ext-button>
    <ext-gridPanel id="grid2" title="GridPanel2" width="800" height="500" frame="true" margin="10">
        <store>
            <ext-store autoLoad="false">
                <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>
                <proxy>
                    <ext-ajaxProxy url="GridPanel2/Data">
                        <reader>
                            <ext-jsonReader x-rootProperty="result" />
                        </reader>
                        <customConfig>
                            <ext-add key="extraParams">
                                <ext-add key="par1" value="80" mode="Value" />
                                <ext-add key="par2" value="App.par2.getValue()" mode="Raw" />
                            </ext-add>
                        </customConfig>
                    </ext-ajaxProxy>
                </proxy>
            </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>
    </ext-gridPanel>
</body>
</html>

GridPanel2.cshtml.cs

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

namespace ExtSample.Pages
{
    public class GridPanel2Model : PageModel
    {
        public void OnGet()
        {
        }

        public IActionResult OnGetData(int? par1, int? par2)
        {
            // par1 assigned to 80, it's ok
            // par2 never assigned, should be 1 or 2

            var now = DateTime.Now.ToString("yyyy-MM-dd hh:mm:tt");
         
            var data = 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[] { "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 }
            };

            return this.Direct(data);
        }
    }
}

Any help is appreciated. Thank you again!

**fabricio.murta** · Jun 10, 2021, 3:12 AM

Hello again Ronaldo!

In this case you need to go a different path, according to this old forum thread: AjaxProxy ExtraParams doesn't work.

But it may not look as straightforward coming from an Ext.NET 2 answer into Ext.NET 7. In fact, again there's no store parameters block in the store and we need to go with a custom config.

The good news though is that you can still have simple extra parameters as they are and go advanced with store parameters, interchangeably.

What I mean is that it is possible to just keep that extraParams config within the proxy:

<customConfig>
    <ext-add key="extraParams">
        <ext-add key="par1" value="80" mode="Value" />
    </ext-add>
</customConfig>

(notice this is within the ext-ajaxProxy tag)

And then add just the "advanced one" in the store parameters with:

<customConfig>
    <ext-add key="readParameters" value="storeReadParameters" mode="Raw" />
</customConfig>

(this time, the block must be enclosed by the ext-store tag)

And just to make things a bit more readable, I decided to use that storeReadParameters function that will just be:

var storeReadParameters = function (operation) {
    return {
        apply: {
            "par2": App.par2.getValue()
        }
    }
}

And may be in any <script /> block in the page. You can still just "inline it".

And speaking of readability, it really looks like the best choice would just to determine all parameters in these readParameters, just so that it's easier to tell where the server call parameters are coming from, right?

Hope this helps!

By the way, thanks for providing the full test cases, they really help us understand what the problem is and the best course of action that should be taken to effectively deal with the issue presented. And as you may have noticed, the feedback provided can't be better than the test case (as you needed to go a little more advanced), but it sure makes it easier even to expand on the idea when it comes down to this.

**ronaldo** · Jun 10, 2021, 4:38 PM

Hello @FabrÃ*cio!

It's working. I understand and agree with all comments. Ext.NET with .NET Core is a powerful combination.

Thank you very much!

Updated example:

GridPanel2.cshtml

@page  "{handler?}"
@model ExtSample.Pages.GridPanel2Model
@{
    Layout = null;
    ViewData["Title"] = "GridPanel";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewData["Title"] - ExtSample</title>

    <script type="text/javascript">
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
        };

        var load = function () {
            App.grid2.getStore().load();
        };

        var storeReadParameters = function (operation) {
            return {
                apply: {
                    "par1": 80,
                    "par2": App.par2.getValue()
                }
            }
        };
    </script>
</head>
<body>
    <ext-comboBox id="par2" margin="10">
        <items>
            <ext-listItem text="text-1" value="1" />
            <ext-listItem text="text-2" value="2" />
        </items>
    </ext-comboBox>

    <ext-button text="Load" margin="10">
        <listeners>
            <click handler="load();" />
        </listeners>
    </ext-button>

    <ext-gridPanel id="grid2" title="GridPanel2" width="800" height="500" frame="true" margin="10">
        <store>
            <ext-store autoLoad="false">
                <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>
                <proxy>
                    <ext-ajaxProxy url="GridPanel2/Data">
                        <reader>
                            <ext-jsonReader x-rootProperty="result" />
                        </reader>
                    </ext-ajaxProxy>
                </proxy>
                <customConfig>
                    <ext-add key="readParameters" value="storeReadParameters" mode="Raw" />
                </customConfig>
            </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>
    </ext-gridPanel>
</body>
</html>

GridPanel2.cshtml.cs

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

namespace ExtSample.Pages
{
    public class GridPanel2Model : PageModel
    {
        public void OnGet()
        {
        }

        public IActionResult OnGetData(int? par1, int? par2)
        {
            var now = DateTime.Now.ToString("yyyy-MM-dd hh:mm:tt");
         
            var data = 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[] { "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[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
            };

            return this.Direct(data);
        }
    }
}

**fabricio.murta** · Jun 10, 2021, 7:05 PM

Hello again, Ronaldo, and thanks for the feedback! You got it perfectly right!

Z · Apr 11, 2022, 5:31 AM

Hi

any update to this thread?

/Z

Thread: [OPEN] [#1860] Parameters in ajax-proxy store

Thread Tools

Search Thread

Display

[OPEN] [#1860] Parameters in ajax-proxy store

Similar Threads

[CLOSED] Store : Loading mask when store load with AJAX proxy

[CLOSED] StoreParameter, Store.Parameters, Store.Proxy.ExtraParams

[CLOSED] disable the loading mask on ajax proxy store load

[CLOSED] pass json data in the Ajax store proxy

[CLOSED] Async Store with AJAX Proxy (ASHX) does not update store on client side after successful request

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [OPEN] [#1860] Parameters in ajax-proxy store

[OPEN] [#1860] Parameters in ajax-proxy store

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us