Example for porting components added in code-behind to Classic?

  1. #1

    Example for porting components added in code-behind to Classic?

    Hello all,

    Referring to this very helpful blog post : https://ext.net/v7-0-preview-for-asp-net-core/

    Can we please have an example how porting would work in cases where we create components entirely in C# and then add them to an existing Panel (for instance) via the .AddTo or .InsertTo methods?
    Any significant syntax changes required to accommodate Classic?

    Regards.
    Last edited by AnFil; Apr 09, 2020 at 11:22 AM. Reason: typo
  2. #2
    Hello @AnFil!

    If you are moving from an MVC, the code behind in controller and view should be significantly similar. In the other hand, if you are coming from WebForms, you'll need to say goodbye to Page_Load and other webforms-specific handlers and say hello to the new approaches taken in (if that's your choice) Razor Pages.

    While WebForms is gone, TagHelpers is there, but code behind will become significantly different. It will be more like Ext.NET MVC controllers and actions than page events.

    While you can find a handful of alternatives on "code behind" alternatives in our current Ext.NET 5 Examples Explorer (that should not change too much between versions, as the model and actions concept is maintained), you will only find examples for RazorPages in Microsoft documentation by now. At this very moment we are drawing and tinkering ways to make the components from code behind easier and more intuitive.

    One way you can do is via ASP.NET Core's View Components. This is somewhat similar to custom ascx controls from WebForms. It will make the component you drawn available to wherever in the code you use-namespace the added component.

    A more pragmatic approach would be just to define the component from code behind and bind it via its Model handle.

    For instance in your page's .cs file, say index.html.cs, define a public container and add a button within it:

    using Ext.Net;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    
    namespace MyProject.Pages.forums._6._28.c62883_index
    {
        public class IndexModel : PageModel
        {
            public Container Sample { get; set; }
    
            public void OnGet()
            {
                Sample = new Container()
                {
                    Items =
                    {
                        new Button() { Text = "MyButton" }
                    }
                };
            }
        }
    }
    Then in the .cshtml file, index.cshtml following the convention above, have this:

    @page
    
    @using ExtNetCore7_20200325.Pages.forums._6._28.c62883_index;
    
    @model IndexModel
    
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Component form code behind - Ext.NET Core Examples</title>
    </head>
    <body>
        <ext-container model="Model.Sample" />
    </body>
    </html>
    There may be, and probably are many other ways to draw components from code behind, including the approaches historically working in Ext.NET MVC give or take. If you find anything that should work, this is the right time for suggestions. We are still improving how code behind interacts with the page as I write this answer.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3

    Looking for a way to work with Direct methods

    Hello Fabricio,

    thank you very much for your reply.

    Let me offer some insight on how the code is structured: I just use Web Forms because I have to use something. The solution does not rely on any specific Web Forms (or would-be MVC feature). No need for web form events, view state or ex.net direct events. In the same manner, no need for controller actions, models per se, or any other plumbing.

    The solution uses one .aspx page with a apsx.cs code behind. A viewport containing a tab panel is loaded via the markup and 99% of the functionality is implemented via Direct Method calls invoked from js events. Each Direct method add dynamically created elements to an existing panel via AddTo or Insert To. Simple, elegant, very manageable and very fast with a small memory footprint.

    I am looking to recreate this behaviour with Razor pages which seem simpler and closer to the Web Forms paradigm that MVC. This will determine if Ext.Net 7.0 is fit for purpose for porting the solution. In other words, I just need to load a page with a basic Ext.NET Viewport and a couple of panels using the initial page markup. Then rely on the .js file to fire js handlers after a user interaction, which in turn will call Direct Methods with the latter instantiating new components and adding them to the existing panels. This is what I personally refer to as 'The Ext.Net Architecture' . I don't have any particular need for any Web Forms, MVC or Razor Pages specific features or any testing capability requirements.

    Do you think that such an architecture would be feasible in Ext.Net 7 with the use of Razor pages?
    One good candidate for an example would be to demonstrate if one could add Tabs to a Tab Panel from code behind using Direct Methods (not Direct events) such as the already existing Tab Panel example for Web Forms.


    Thank you for your help.
    Regards,
    Last edited by AnFil; Apr 13, 2020 at 2:45 PM. Reason: grammar
  4. #4
    Hello @AnFil!

    Thanks for the detailed description on your usage scenario.

    Direct methods are an essential feature from Ext.NET and I don't see how they couldn't be implemented. They are just not implemented in -preview1, but sooner than later, they will be there and the scenario you described should have no issues being handled at all. And if they do, we will probably be looking for ways to make it smooth until final release. It will help, of course, the community feedback as we release further iterations of Ext.NET 7.

    Quote Originally Posted by AnFil
    The solution uses one .aspx page with a apsx.cs code behind.
    For what it is worth, the file extension will have to change from aspx to cshtml (.aspx and .aspx.cs). I believe this is not an issue, right?

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello Fabricio,

    this is great news. Looking forward to seeing how Direct Methods will be implemented in razor pages.

    You are correct, there is no issue in renaming the file. Theoretically swapping Page_Load with OnGet() should take care of some basic code that loads a couple of stores from SQL Server. Its all Direct Methods after that.
    And I am also assuming that one could just include the .js files with all the client code using a <link/> tag in a similar fashion to Web Forms.

    Best regards.
  6. #6
    We are working on DirectMethod support right now and expect to include with 7.0.0-preview2 release.
    Geoffrey McGill
    Founder
  7. #7
    I tried to create a View with PageModel in the same way Fabricio did, but I always get a NullReferenceException for Model.
    I don't have the IndexModel instance; can anyone help me?

    Maybe this is off-topic, I'm new with MVC and Razor, I'm sorry.
    I also tried to remove the @Page directive, but this won't solve my problem.

    Thanks, any suggestion is appreciated.
  8. #8
    Hello @bbros! Thanks for giving Ext.NET a try!

    You trying to "port" the sample from the "RazorPages" model as I provided to the classic Razor MVC model? In other words, trying the same page with a Razor View page at (assuming your view is called Index) Views/Index.cshtml folder and a corresponding controller at Controllers/IndexController.cs?

    It would be interesting to see how you have tried it. What you think about creating a new topic, so we can focus the same example in MVC concept? Then you can start by showing the resulting view and controller (and maybe model?) you tried.

    The code layout won't be the same, although the "core code", the "business logic", should be the same in C# (server-side) and JS (client-side).
    Fabrício Murta
    Developer & Support Expert
  9. #9
    Hello Fabricio, thanks for your reply.
    I created a new thread just for Razor and code behind explaining my approach (probably wrong, it's not working).

    I also posted how I setup the project using the preview 2, which is different from the 1 in methods and namespaces.
    I have not found an official guide, so if I forgot something you can give me the right directions.

    Any idea is greatly appreciated, since I have finished my.

Similar Threads

  1. Replies: 0
    Last Post: Apr 08, 2018, 7:03 AM
  2. [Razor] Porting the Bar Chart Sample
    By Stijn in forum 2.x Help
    Replies: 1
    Last Post: Nov 26, 2012, 11:48 AM
  3. [CLOSED] BeforeRender is not working when added from code behind
    By Aparna_B in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 18, 2012, 4:08 PM
  4. Replies: 4
    Last Post: Jul 01, 2010, 1:49 AM
  5. FieldSet porting problem...
    By Vinturi in forum 1.x Help
    Replies: 1
    Last Post: Feb 10, 2009, 9:26 AM

Posting Permissions