[CLOSED] Razor MVC, codebehind and DirectEventParameter

  1. #1

    [CLOSED] Razor MVC, codebehind and DirectEventParameter

    I'm trying to understand the new way to handle direct events.
    I'm back from webforms and it is all brand new for me, so I'm sorry if I don't have the right approach to this system.
    I'm asking you if this one is the correct way to work on it.


    In order to read ExtraParams I created a Model class (IndexLoginPageModel) and I added it in the button click sub.


    Index.cshtml

    @page  "{handler?}"
    @model BBros.OggunWeb.Pages.IndexModel
    @{ Layout = null; }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ext.NET web application</title>
    </head>
    <body>
        <ext-container model="Model.Sample" />
    </body>
    </html>
    Index.cshtml.cs

    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    
    using Ext.Net;
    using Ext.Net.Core;
    using System;
    using Microsoft.AspNetCore.Mvc.ViewFeatures;
    using System.Diagnostics;
    using System.Text.Json;
    using Newtonsoft.Json.Linq;
    
    namespace BBros.OggunWeb.Pages
    {
        [DirectModel]
        public class IndexModel : PageModel
        {
            public Container Sample { get; set; }
            public void OnGet()
            {
                var vp = new Viewport()
                {
                    Layout = LayoutType.Border
                };
    
                var head = new Panel()
                {
                    Closable = false,
                    Region = RegionType.North,
                    Height = 130,
                    Border = false,
                    Header = false,
                    BodyStyle = "background-color: transparent",
                    Anchor = "100%"
                };
    
                head.Items.Add(new TextField
                {
                    Id = "UserNameTextbox",
                    FieldLabel = "Nome utente"
                });
    
                head.Items.Add(new TextField
                {
                    Id = "PasswordTextbox",
                    FieldLabel = "Password",
                    InputType = InputType.Password.ToString()
                });
    
                var btn = new Button() { Id = "LoginButton", Text = "Login" };            
                btn.DirectEvents.Click.Method = HttpMethod.POST;
                btn.DirectEvents.Click.ExtraParams.Add(new DirectEventParameter { Name = "m.username", Value = "App.UserNameTextbox.getValue()", Mode = ParameterMode.Raw });
                btn.DirectEvents.Click.ExtraParams.Add(new DirectEventParameter { Name = "m.password", Value = "App.PasswordTextbox.getValue()", Mode = ParameterMode.Raw });
                btn.DirectEvents.Click.Url = "LoginButtonClick";
    
                head.Items.Add(btn);
    
                vp.Items.Add(head);
    
                Sample = new Container()
                {
                    Items =
                    {
                        vp
                    }
                };
    
            }
    
            [Direct]
            public IActionResult OnPostLoginButtonClick(IndexLoginPageModel m)
            {
                
                this.X().Toast("Login Button Clicked 👍👍 <br />Username: " + m.Username + "<br />Password: " + m.Password);
                
                return this.Direct();
            }
        }
    
        public class IndexLoginPageModel
        {
            public string Username { get; set; }
            public string Password { get; set; }
        }
    }
    This code is working, but I would like not to create a model for any set of ExtraParams I need.
    I tried to replace the model data type to "Object", "JToken", "JObject" unsuccessfully.

    I would like to deserialize it to something I can handle like the ExtraParams in WebForms approach, using the string key of an array, or any other comfortable way.

    Which is the desinged way?

    Thank you!
  2. #2
    You can configure the two string values as arguments of the DirectEvent handler.

    Here's a simplified sample demonstrating the scenario.

    using Microsoft.AspNetCore.Mvc;using Microsoft.AspNetCore.Mvc.RazorPages;
    
    using Ext.Net.Core;
    
    namespace demo1.Pages
    {
        public class IndexModel : PageModel
        {
            public IActionResult OnPostLoginButtonClick(string username, string password)
            {
                this.X().Toast($"username: {username} -- password: {password}");
    
                return this.Direct();
            }
        }
    }
    @page  "{handler?}"
    
    @model demo1.Pages.IndexModel
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ext.NET web application</title>
    </head>
    <body>
    
        <ext-button text="Submit">
            <directEvents>
                <click pageHandler="LoginButtonClick">
                    <extraParams>
                        <ext-parameter name="username" value="frank" />
                        <ext-parameter name="password" value="password1" />
                    </extraParams>
                </click>
            </directEvents>
        </ext-button>
    
    </body>
    </html>
    Another option would be using Dictionary<string, string>.

    We're also looking into using JsObject, which theoretically should work, but is not. We are investigating why it's not working and will try to fix right away.

    Hope this helps.
  3. #3
    Thank you, Dictionary<string, string> is perfect for me!
  4. #4
    With the next release of Ext.NET.Classic 7.0.0, a couple more options will be available for handing the request arguments.

    Given the same DirectEvent config:

    <ext-button text="Submit">    <directEvents>
            <click pageHandler="LoginButtonClick">
                <extraParams>
                    <ext-parameter name="username" value="frank" />
                    <ext-parameter name="password" value="password1" />
                </extraParams>
            </click>
        </directEvents>
    </ext-button>
    You'll now be able to configure a JsObject, with a generic option for specifying the type.

    // Option 1 – Type specified
    public IActionResult OnPostLoginButtonClick(JsObject<string> jso)
    {
        this.X().Toast(jso["username"]);
    
    
        return this.Direct();
    }
    If no type is provided, the values are still accessible, but a little more work is involved to get and cast.

    // Option 2 – No type specified
    public IActionResult OnPostLoginButtonClick(JsObject jso)
    {
        this.X().Toast((string)jso["username"].Value);
    
    
        return this.Direct();
    }
    Hope this helps.
  5. #5
    A couple of new binding scenarios have been supported for JsObject type.

    Consider the following Direct Event handler:

    public IActionResult OnPostButtonClick(JsObject jso)
    {
        return this.Direct();
    }
    A client can bind a Json object, that would be converted to the corresponding JsObject instance:

    <ext-button text="Click Me">
        <directEvents>
            <click pageHandler="ButtonClick">
                <extraParams>
                    <ext-parameter name="jso" value="{ sVal: 'test', bVal: true, iVal: 3, inner: { ok: true }}" , mode="Raw" />
                </extraParams>
            </click>
        </directEvents>
    </ext-button>
    Also the Json object properties can be bound separately using dedicated ext-parameter tags:

    <ext-button text="Click Me">
        <directEvents>
            <click pageHandler="ButtonClick">
                <extraParams>
                    <ext-parameter name="jso.sVal" value="test" />
                    <ext-parameter name="jso.bVal" value="true", mode="Raw" />
                    <ext-parameter name="jso.iVal" value="3", mode="Raw" />
                    <ext-parameter name="jso.inner" value="{ ok: true }" , mode="Raw" />
                </extraParams>
            </click>
        </directEvents>
    </ext-button>
    Nested Json objects can be split too. In this case the nested parent object must be initialized with { } object. The object doesn't have to be empty.

    <ext-button text="Click Me">
        <directEvents>
            <click pageHandler="ButtonClick">
                <extraParams>
                    <ext-parameter name="jso.sVal" value="test" />
                    <ext-parameter name="jso.bVal" value="true" , mode="Raw" />
                    <ext-parameter name="jso.iVal" value="3" , mode="Raw" />
                    <ext-parameter name="jso.inner" value="{}" , mode="Raw" />
                    <ext-parameter name="jso.inner.ok" value="true" , mode="Raw" />
                    <ext-parameter name="jso.inner.fail" value="false" , mode="Raw" />
                </extraParams>
            </click>
        </directEvents>
    </ext-button>
    Primitive values can be bound to JsObject instance directly too.

    <ext-button text="Click Me">
        <directEvents>
            <click pageHandler="ButtonClick">
                <extraParams>
                    <ext-parameter name="jso" value="123" mode="Raw" />
                </extraParams>
            </click>
        </directEvents>
    </ext-button>
    When JsObject values are of the same primitive type, it's more convenient to use JsObject<TValue> type:

        <ext-button text="Click Me">
            <directEvents>
                <click pageHandler="ButtonClick">
                    <extraParams>
                        <ext-parameter name="jso.a" value="123" mode="Raw" />
                        <ext-parameter name="jso.b" value="456" mode="Raw" />
                        <ext-parameter name="jso.c" value="789" mode="Raw" />
                    </extraParams>
                </click>
            </directEvents>
        </ext-button>
    public IActionResult OnPostButtonClick(JsObject<int> jso)
    {
        return this.Direct();
    }
    When a method contains only one parameter (like in all examples above), the parameter name does not have to be specified explicitly, so the following example without jso. prefix will work too:

        <ext-button text="Click Me">
            <directEvents>
                <click pageHandler="ButtonClick">
                    <extraParams>
                        <ext-parameter name="a" value="123" mode="Raw" />
                        <ext-parameter name="b" value="456" mode="Raw" />
                        <ext-parameter name="c" value="789" mode="Raw" />
                    </extraParams>
                </click>
            </directEvents>
        </ext-button>
    Geoffrey McGill
    Founder

Similar Threads

  1. [CLOSED] [MVC] ContentFromAction in codeBehind
    By Tactem in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 19, 2013, 2:05 PM
  2. MVC 4 Razor Example
    By RaptorBlood in forum 2.x Help
    Replies: 1
    Last Post: Jan 28, 2013, 8:24 AM
  3. [CLOSED] [2.0] MVC 3 Razor Example
    By Timothy in forum 2.x Legacy Premium Help
    Replies: 10
    Last Post: Aug 08, 2012, 7:45 PM
  4. Help with MVC 3 Razor
    By fosteliss in forum 2.x Help
    Replies: 0
    Last Post: Jul 26, 2012, 7:24 PM
  5. Please help MVC 3 Razor
    By fosteliss in forum 2.x Help
    Replies: 7
    Last Post: Jul 26, 2012, 5:59 PM

Posting Permissions