Skip to content
This repository has been archived by the owner on Aug 9, 2024. It is now read-only.

absent: DirectEvent support #1713

Closed
fabriciomurta opened this issue Mar 27, 2020 · 6 comments
Closed

absent: DirectEvent support #1713

fabriciomurta opened this issue Mar 27, 2020 · 6 comments

Comments

@fabriciomurta
Copy link
Contributor

In Ext.NET's Buttons > Basic > Overview example, second button, the direct event fires against the server-side method Button_Click(), using WebForms specific event mechanisms to identify the call.

From client-side, a direct request (in the above example) submits the following payload to the same page it loaded:

submitDirectEventConfig=%7B%22config%22%3A%7B%22__EVENTTARGET%22%3A%22ctl01%22%2C%22__EVENTARGUMENT%22%3A%22ctl03%7Cevent%7CClick%22%2C%22extraParams%22%3A%7B%22Item%22%3A%22One%22%7D%7D%7D

Which decodes into:

{"config":{"__EVENTTARGET":"ctl01","__EVENTARGUMENT":"ctl03|event|Click","extraParams":{"Item":"One"}}}

Currently, Ext.NET Core submits:

Item=One

(not encoded at all).

So currently there's no telling what should be run at server side in the ajax call and direct events does not work, at least as far as Razor Pages + Tag Helpers are concerned.

MVC RazorView probably also needs something implementing means to direct to a given Action.

@fabriciomurta fabriciomurta changed the title absent: directEvent support absent: DirectEvent support Mar 27, 2020
@geoffreymcgill
Copy link
Member

geoffreymcgill commented Apr 6, 2020

Some basic DirectEvent functionality is supported now. Here's a few basic scenarios:

.cshtml.cs

using Ext.Net;
using System;
using System.Threading;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace sandbox.Pages
{
    [BindProperties(SupportsGet = true)]
    public class HomeModel : PageModel
    {
        public Button MyButton { get; set; }

        public void OnGet()
        {
            MyButton.Id = "Button1";
            MyButton.Text = "Submit";
        }

        public IActionResult OnPostCustomHandler(Button btn)
        {
            btn.Text = $"Fresh at " + DateTime.Now.ToLongTimeString();

            // Option 1:
            //var width = btn.Width.As(
            //    d => d,
            //    s => double.TryParse(s, out var d) ? d : 0
            //);

            // Option 2:
            //var width = btn.Width.AsDouble();

            // Option 3:
            var width = btn.Width.AsDouble(out var suffix);

            btn.Width = width + 100;

            Thread.Sleep(5000);

            // Render a new button
            var btn4 = new Button { Id = "Button4", Text = "Dynamically Added Button", RenderTo = "App.Button4_Container" };
            this.Render(btn4);

            return this.DirectResult();
        }
    }
}

.cshtml

@page  "{handler?}"
@model HomeModel
@{
    Layout = null;
    var X = Html.X();
}
<!DOCTYPE html>
<html>

@Html.Raw("<head>\n</head>")

<body>
    @*<ext-resources />*@

    <h1>Ext.NET HOME component tests</h1>
    <div>

        <ext-button model="Model.MyButton" />

        <ext-button id="Button2" text="[TagHelper] Click me #2">
            <directevents>
                <click pageHandler="CustomHandler" method="POST" type="Load">
                    <eventmask showMask="true" msg="Custom Mask..." />
                    <confirmation confirmRequest="true" cancel="alert('confirmation is canceled');" />
                    <extraparams>
                        <parameter name="btn.id" value="App.Button2.id" mode="Raw" />
                        <parameter name="btn.text" value="App.Button2.getText()" mode="Raw" />
                        <parameter name="btn.width" value="App.Button2.getWidth()" mode="Raw" />
                    </extraparams>
                </click>
            </directevents>
        </ext-button>

        @(X
            .Button()
            .Id("Button3")
            .Text("[HtmlHelper] Click me #3")
            .DirectEvents(de =>
            {
                de.Click.Url = Url.Page("Home", "CustomHandler");
                de.Click.Method = HttpMethod.POST;
                de.Click.Type = DirectEventType.Load;

                de.Click.EventMask.ShowMask = true;
                de.Click.EventMask.Msg = "Custom Mask...";

                de.Click.Confirmation.ConfirmRequest = true;
                de.Click.Confirmation.Cancel = "alert('confirmation is canceled');";

                de.Click.ExtraParams.Add("btn.id", "App.Button3.id", ParameterMode.Raw);
                de.Click.ExtraParams.Add("btn.text", "App.Button3.getText()", ParameterMode.Raw);
                de.Click.ExtraParams.Add("btn.width", "App.Button3.getWidth()", ParameterMode.Raw);
            })
        )

        <div id="App.Button4_Container"></div>

    </div>
</body>
</html>

@fabriciomurta
Copy link
Contributor Author

I couldn't work this out in this attempt to port the Colorpicker > Basic > Overview WebForms example:

PageModel: colorpicker/basic/overview/index.cshtml.cs#L21-L26

Page markup: colorpicker/basic/overview/index.cshtml#L23-L33

The approaches I tried all resulted in 400 (bad request) page error on request.

@fabriciomurta
Copy link
Contributor Author

Feedback from Aiken at How does Ext.Net 7 support Asp.Net Core MVC development model Ext.NET forums thread.

  1. We are missing means to return arbitrary script code after Direct (events/methods) calls. Something similar to what X.AddScript() does in Ext.NET 5 and back.
  2. We are missing means to get general components to interact with (even without passing them, by issuing GetCmp with an ID, we could interact back with it client-side, provided the ID matches an existing component of that type). In Ext.NET 5-, we have the this.GetCmp<type>() for that end.

WebForms examples matching \.AddScript\(

  1. ColorPicker > Basic > Custom_Colors
  2. Form > MultiSelect > Overview
  3. GridPanel > Selection_Models > Submitting_Values
  4. MessageBox > Basic > Overview
  5. Miscellaneous > ProgressBar > Server_Side_Update
  6. TaskManager > Basic > Poll_Server

MVC examples matching \.GetCmp<.+>\(

(notice all these will match within controller code)

  1. Buttons > Basic > Variations
  2. ColorPicker > Basic > Custom_Colors
  3. ColorPicker > Basic > Overview
  4. DataView > Basic > Overview
  5. Desktop > ASPX
  6. Desktop > Overview
  7. Draw > Basic > Actions
  8. Draw > Basic > Animation
  9. Dynamic > Partial_Rendering > Add_Tab
  10. Editor > Basic > Overview
  11. Element > Basic > Layer
  12. Element > Basic > Overview
  13. Events > DirectMethod
  14. Form > ComboBox > Linked_Combos_In_Grid
  15. Form > FileUploadField > Basic
  16. Form > Groups > Basic
  17. GridPanel > ColumnModel > Ajax_Configuration
  18. GridPanel > ColumnModel > HyperlinkColumn
  19. GridPanel > ComponentColumn > Overview
  20. GridPanel > Editable > Editor_with_DirectMethod
  21. GridPanel > Miscellaneous > FilterQuery
  22. GridPanel > Paging_and_Sorting > Local
  23. GridPanel > Plugins > GridFilters_Local
  24. GridPanel > Selection_Models > Checkbox_Selection
  25. GridPanel > Spreadsheet > Submit
  26. GridPanel > Update > Batch
  27. Kitchen > Sink_GridPanels > Property
  28. Layout > CardLayout > Basic
  29. MessageBox > Basic > ButtonsConfig
  30. MessageBox > Basic > Overview
  31. MessageBus > Basic > Simple
  32. Miscellaneous > Store > ClientStore
  33. Models > Model_State
  34. Panel > Basic > Loader
  35. PropertyGrid > Basic > Overview
  36. TreePanel > Advanced > Image_Organizer
  37. Window > Basic > Hello_World
  38. Window > Basic > Show
  39. XRender > Basic > Add_Items

@AndreyChechel
Copy link

The second instance of ColorPicker has been fixed. The Postback scenario is not really applicable to ASP.NET Core MVC / Razor pages.

The first issue was Razor handler methods must be public. Another issue preventing Ajax requests to come through was CSRF token validation. It was switched off globally for now:

services.AddRazorPages(opts =>
    opts.Conventions.ConfigureFilter(new IgnoreAntiforgeryTokenAttribute())
);

@zgcgwin
Copy link

zgcgwin commented May 12, 2020

How is the progress of XRender feature , the ability to dynamically create a new control during a DirectEvent.

@geoffreymcgill
Copy link
Member

Much more DirectEvent support has been added to the 7.0.0-preview3 release.

We still need to add support for .AddTo during a Direct request, or handle the scenario differently. This feature will be tracked in a different issue.

Any issues with [Direct] can now be created as individual issues.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants