Partial Rendering

Page 1 of 2 12 LastLast
  1. #1

    Partial Rendering

    I'm trying to figure out how to do Partial Page Rendering in Ext.NET 7, as per the example on the 5.3 examples site: https://mvc5.ext.net/#/Dynamic_Parti...rtial_Content/

    Can a Razor Page be used as the source for loading partial content? I have created a Razor Page with Ext.NET markup in the .cshtml file, and whose code-behind can handle GET requests. However, when this page is requested via a ComponentLoader, no script content is generated by the page. All that is returned is the following markup:

    <div id="App.ctl01_Container">
        
        
        
    </div>
    My Razor Page:

    BookingsByMonth.cshtml

    @page
    @model TMSWeb.ExtNETCore.Pages.Auth.Dashboard.Widgets.BookingsByMonthModel
    @{
    }
    <ext-cartesianChart>
        <store>
            <ext-store data="Model.ChartData">
                <fields>
                    <ext-datafield name="month" />
                    <ext-datafield name="bookings" />
                </fields>
            </ext-store>
        </store>
        <axes>
            <ext-numericAxis position="Left"
                             fields="bookings"
                             grid="true"
                             title="Bookings"
                             minimum="0" />
            <ext-categoryAxis position="Bottom"
                              fields="month"
                              title="Month" />
        </axes>
        <series>
            <ext-barSeries highlight="true"
                           xField="month"
                           yField="bookings" />
        </series>
    </ext-cartesianChart>
    BookingsByMonth.cshtml.cs

    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    using TMSWeb.Interfaces.NETCore.CQRS;
    using TMSWeb.Models.NETCore.Dashboard;
    using TMSWeb.Queries.NETCore.Dashboard;
    
    namespace TMSWeb.ExtNETCore.Pages.Auth.Dashboard.Widgets
    {
        public class BookingsByMonthModel : PageModel
        {
            private readonly IQueryHandler<GetBookingsByMonthQuery, List<BookingsByMonth>> _queryHandler;
    
            public BookingsByMonthModel(IQueryHandler<GetBookingsByMonthQuery, List<BookingsByMonth>> queryHandler)
            {
                _queryHandler = queryHandler;
            }
    
            public List<object> ChartData { get; set; }
    
            public async Task OnGetAsync()
            {
                ChartData = (await _queryHandler.HandleAsync(new GetBookingsByMonthQuery(2020)))
                                .Select(obj => new { Month = obj.MonthName, Bookings = obj.CountOfBookings })
                                .OfType<object>()
                                .ToList();
            }
        }
    }
    If not, how can I return an Ext.NET PartialViewResult from a controller action in Ext.NET 7.2? I can't find this type when browsing through Intellisense.

    Thanks

    Paul
  2. #2
    Hello Paul!

    I am afraid you are looking at the wrong place to base off an Ext.NET 7 partial page. While for most examples that would be the way to go, albeit the "partial" concept itself is the same between versions, the actual workflow has changed considerably and they are not really interchangeable.

    A good example on how partials are used in Ext.NET 7 is in the new project template itself, and we have a dedicated blog post about the templates and partial component at Ext.NET Blog: Ext.NET Classic 7.1 with new Partial and Section components. Please check it out and if you still have questions on how to use the ext-partial component, feel free to post a follow-up.

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

    Thanks for your reply. I read the blog post about Partial components that you linked to, however, I can't see how I can use them to achieve what I am trying to do.

    I'm trying to create a dashboard composed of different 'widgets', with each widget being a panel containing some combination of charts and data. Each widget will operate independently of others, and the user should be able to customise which widgets are displayed on their dashboard.

    Based on the blog post, it looks as if <ext-partial> components need to be added to the view and configured at design time. This won't work for me, as I don't know at design-time exactly which partial views will be displayed on a user's dashboard. This is why the Ext.NET 5.3 Dynamic Partial Rendering example (https://mvc5.ext.net/#/Dynamic_Parti...rtial_Content/) was of interest, as it would allow me to defer the decisions about what content to render until run-time. Ideally, I want to make use of ComponentLoader to load the content for each widget from a URL which can be set at run-time. The 5.3 example has a controller action called AutoLoadPartialView which returns an object of type PartialViewResult. As I mentioned in my previous post, I can't find the type PartialViewResult in the V7 framework.

    Is it possible to do Dynamic Partial Rendering with Ext.NET V7? If so, can you give me some advice on how to do this? I see that this Github issue says that 'Dynamic loading of partial views is under development...'. Is this something that you plan to release soon?

    Thanks

    Paul
    Last edited by plok77; May 19, 2021 at 1:18 PM.
  4. #4
    Hello @plok77!

    You can conditionally render parts of pages through several options, they may not necessarily translate into "dynamic partial rendering", but I believe the concept allows you to do what you want.

    I have explored some options in a post some time ago, and it may be just what you needed to know to implement what you need. Take a look at the post:
    - Post #6 in How to implement alternative to Html.RenderAction

    Quote Originally Posted by plok77
    As I mentioned in my previous post, I can't find the type PartialViewResult in the V7 framework.
    Yes, it is expected you won't find it. Unfortunately, Ext.NET 5 and 7, for a number of reasons, are not identical APIs, there's not much we can do as the technology change between the frameworks is considerable. We can't tell it will never be supported like it was in Ext.NET 5, but currently the ways to dynamically render parts of pages is different, using specific .NET Core features, like Tag Helpers.

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

    Thanks, I tried your approach using View Components and this works. One further question: can Ext.NET partial and section components be created in code-behind? Or can they only be added statically to a view using tag helpers?

    Regards

    Paul
  6. #6
    Hello again, Paul!

    I believe yes, you can do it by "code behind". But it all depends on what you want to achieve. As per your first post, what you want is to add a chart (defined in markup in a partial view) to a "main view", depending on some condition?

    Then, reserving a section in the main view is not desirable? How you intend to determine the location where the chart should be drawn? Even in the example you have been using as a base, there's ViewContainer1 to hold the contents of the dynamically added content. In case you are coming from Ext.NET 5 or older, can you point an example that uses partial views more-or-less the way you want it to?

    Maybe what you want could be achieved using Loaders; that is, if you don't really want to determine the partial view using markup, but just write the components in C#.

    Looking forward to your follow-up.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Fabrício

    The following two pages from the 5.3 Examples website were of interest:

    https://mvc5.ext.net/#/Viewport_Basic/Built_as_Class/
    https://mvc5.ext.net/#/Dynamic_Parti...rtial_Content/

    I had thought that I could use the 'Built as Class' approach to dynamically create the panels for the viewport, then use loaders to load their content.

    However, in the 'Partial Content' example, the controller actions have a return type of 'PartialViewResult'. Correct me if I'm wrong, but this type is no longer available in Ext.NET v7? If so, how can dynamic content be loaded into a panel from either an MVC view or Razor Page?

    Thanks

    Paul
  8. #8
    Hello again, Paul!

    Quote Originally Posted by plok77
    I had thought that I could use the 'Built as Class' approach to dynamically create the panels for the viewport, then use loaders to load their content.
    Well, not with the partial and section implementation in Ext.NET, no.

    Quote Originally Posted by plok77
    Correct me if I'm wrong, but this type is no longer available in Ext.NET v7?
    You are not wrong. This type is not available in Ext.NET v7. "No longer", though, is not really true, as Ext.NET 7 is a rewrite from scratch and not a "port" of Ext.NET 5 to .NET Core. That said, functionality not present in v7, that was available in previous versions, simply couldn't be implemented due to technology or time constraints. The GitHub issue #1819 is logged exactly to track and implement this feature.

    Quote Originally Posted by plok77
    If so, how can dynamic content be loaded into a panel from either an MVC view or Razor Page?
    Now comes the fun part.

    Let's start simple; if you want to just draw some component into a div, you can simply "render it to" that div. Take a look at this example where we render a grid panel to a reserved div in the page: Grid Panel > Array Grid > DirectEvent Creation.

    Okay, but that's just not enough, right? You want a viewport, and you can't simply renderTo content into it; you'd rather ViewPort.add(component). And here's what to it:

    view: t63140_loader.cshtml

    @page
    @model ExtNet7Playground.t63140_loaderModel
    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>
            Dynamic GridPanel added to viewport via DirectEvent - Ext.NET Examples
        </title>
        <script>
                // auxiliary script for the to-be-rendered grid, just for additional effects
                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 + "%");
                };
        </script>
    </head>
    <body>
        <h1>
            Dynamic GridPanel added to viewport via DirectEvent
        </h1>
    
        <ext-viewport layout="Border" id="Viewport1">
            <items>
                <ext-panel region="North">
                    <tbarItems>
                        <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="target" value="App.Viewport1" mode="Raw" />
                                    </extraParams>
                                </click>
                            </directEvents>
                        </ext-button>
                    </tbarItems>
                </ext-panel>
            </items>
        </ext-viewport>
    </body>
    </html>
    model: t63140_loader.cshtml.cs (to keep it short, I added references to unchanged code you should grab off the example above)
    using Ext.Net;
    using Ext.Net.Core;
    using System;
    using System.Collections.Generic;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    
    namespace ExtNet7WebPages_NuGet.Pages.Forums._6._3._0_2
    {
        public class t63140_loaderModel : PageModel
        {
            public void OnGet()
            {
    
            }
    
            public IActionResult OnPostButton1_Click(Button button, Container target)
            {
                var grid = this.BuildGridPanel();
    
                grid.Region = RegionType.Center;
    
                target.Add(new List<Component>() { grid });
    
                // Disable the Button
                button.Disabled = true;
    
                return this.Direct();
            }
    
            private GridPanel BuildGridPanel()
            {
                // please copy-paste it from the example linked above
            }
    
            private Store BuildStore()
            {
                // please copy-paste it from the example linked above
            }
    
            List<object> Data = new List<object>
            {
                // please copy-paste it from the example linked above
            };
        }
    }
    So, with this, you could add anything to the viewport the way you wanted!

    Well, except for one part we don't show in this example:

    Quote Originally Posted by plok77
    then use loaders to load their content
    That's just a matter of adjusting BuildStore() or BuildGridPanel() (say, if instead of a grid panel you wanted a loader to fill a panel) to implement loaders. I suggest you try this simpler approach first, and then develop into the loaders once you can make the page load the panels into the viewport dynamically as required. The right loader will depend of how and what you want to fill in the panels.

    - For store remote loading you want this example: Grid Panel > Paging and Sorting > Page
    - For panel content loaders: Add Loader to a panel created Dynamically (this is for v5, but assigning loader from the model in v7 shouldn't be very far from it)

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  9. #9
    Hello again, Paul!

    We have just added an example to the Examples Explorer project using Loaders. It explores the feature basically from markup, but that'd be a step closer for you to envise your case with panels with loaders written from code behind.

    The example is currently only available at the GitHub repository, but soon it will be live in Ext.NET 7 Examples Explorer.

    Here's the example: Loaders > Basic > Markup example in Examples Explorer 7 project.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  10. #10
    Thanks, I'll take a look at the examples you have mentioned
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] [#549] Rendering Partial View Error
    By LAEUser in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 01, 2014, 12:36 PM
  2. [CLOSED] Partial View not Rendering
    By RCM in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 01, 2013, 3:10 AM
  3. [CLOSED] DataGrid only rendering partial values ( version 2.2)
    By Pyropace in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 25, 2013, 3:03 PM
  4. ASP.NET MVC partial rendering
    By wdk in forum 1.x Help
    Replies: 16
    Last Post: Jul 20, 2012, 12:01 PM
  5. [CLOSED] Problem rendering partial view
    By T3rryChan in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 03, 2012, 9:22 PM

Posting Permissions