[CLOSED] componentLoader rendering

  1. #1

    [CLOSED] componentLoader rendering

    How to implement ext-componentLoader in panel.

    below code not worked.

    <ext-panel id="pnlExample"
    title="Example"
    iconCls="fal fa-sort-numeric-up-alt"
    layout="Fit"
    bodyPaddingAsString="5"
    autoRenderAsString="true"
    rounded="false">
       <loader>
           <ext-componentLoader url="@Url.Action("BPage", "AController")" autoLoad="true">
               <loadMask>
                     <ext-loadMask isLoadMask="true" msg="Loading..." />
               </loadMask>
            </ext-componentLoader>
       </loader>
    </ext-panel>
    Last edited by fabricio.murta; Jan 13, 2021 at 1:49 PM. Reason: Resolved
  2. #2
    Hello @dnakorea!

    What exactly didn't work in the example you provided? To me all that seemed to be missing was showMask="true" in the ext-loadMask component definition for it to show the loading mask while the inner page was being loaded. All the rest seemed right.

    Also, there's no fal CSS class in Ext.NET 7 and no alt for fa-sort-numeric-up. So I take it you are using a custom icon set. Just in case, for it to display in Ext.NET 7 without external libraries, you could just change the iconCls reference to iconCls="x-fa fa-sort-numeric-up".

    Hope this helps! If not, please share bit more specifics on what's not working for you.
    Fabrício Murta
    Developer & Support Expert
  3. #3

    My Code is....

    Below is my test code.
    Still not render BPage.cshtml.


    [Index.cshtml]

    @{ 
        Layout = null;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <ext-resourceManager />
    </head>
    <body>
        <ext-viewport layout="Fit">
            <items>
                <ext-panel id="pnlExample"
                           title="Example"
                           frame="true"
                           layout="Fit"
                           bodyPaddingAsString="5">
                    <loader>
                        <ext-componentLoader url="@Url.Action("BPage", "Test")" autoLoad="true">
                        </ext-componentLoader>
                    </loader>
                </ext-panel>
            </items>
        </ext-viewport>
    </body>
    </html>
    --------------------------------------------------------

    [BPage.cshtml - TestController]

    @{ 
        Layout = null;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>This is B Page</title>
    
        <ext-resourceManager />
    
    </head>
    <body>
        <ext-viewport layout="Fit">
            <items>
                <ext-panel layout="Fit" title="This is B Page Panel Header">
                    <content>
                        This is B Page!
                    </content>
                </ext-panel>
            </items>
        </ext-viewport>
    </body>
    </html>
  4. #4
    Hello again, @dnakorea!

    My guess is you don't have the controller configured right. You'd need an Action fully set up to each page in the Test controller. In other words:

    Controllers/TestController.cs
    using ExtNet7MVC_NuGet.Models;
    using Microsoft.AspNetCore.Mvc;
    
    namespace MyProjectNameHere.Controllers
    {
        public class TestController : Controller
        {
            public IActionResult Index()
            {
                return View();
            }
    
            public IActionResult BPage()
            {
                System.Threading.Thread.Sleep(2000); // this just adds a delay so you can see the "loading" spin up
                return View();
            }
        }
    }
    You can check if /Test/BPage is accessible directly in your website to tell whether the view is loading or not before you can even hope it should load from the loader the way it is set up.

    The code bits you shared are right, what's probably wrong there is around what you didn't share. It also is not needed autoLoad="true" in the ext-componentLoader definition line (but this is not what's triggering the issue).

    Try as well to remove the ext-resourceManager from the top of the file. As far as this example is concerned, it shouldn't be necessary.

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

    Still not worked.

    please, check below my code.
    It's still not worked.
    Directly, succeeded BPage access.


    [Index.cshtml]

    
    @{ 
        Layout = null;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>This is Index Page</title>
        <ext-resourceManager />
    </head>
    <body>
        <ext-viewport layout="Fit">
            <items>
                <ext-panel id="pnlExample"
                           title="Example"
                           frame="true"
                           layout="Fit">
                    <loader>
                        <ext-componentLoader url="@Url.Action("BPage", "Test")">
                        </ext-componentLoader>
                    </loader>
                </ext-panel>
            </items>
        </ext-viewport>
    </body>
    </html>
    [BPage.cshtml]

    @{ 
        Layout = null;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>This is B Page</title>
    </head>
    <body>
        <ext-viewport layout="Fit">
            <items>
                <ext-panel layout="Fit" title="This is B Page Panel Header">
                    <content>
                        This is B Page!
                    </content>
                </ext-panel>
            </items>
        </ext-viewport>
    </body>
    </html>

    [TestController]

    public class TestController : Controller
        {
            public IActionResult Index()
            {
                return View();
            }
    
            public IActionResult BPage()
            {
                
                return View();
            }
        }
    Last edited by dnakorea; Jan 10, 2021 at 11:48 PM.
  6. #6
    Hello again, @dnakorea!

    Your code looks right, it should be working.

    Have you checked if /Test/BPage is accessible directly in your website to tell whether inner page view is loading alone?
    Fabrício Murta
    Developer & Support Expert
  7. #7

    Directly, BPage is render good.

    Directly, BPage is render good.
    Please, repro my test code and check attached file.

    My Dev / Testing environment is .NET5, Chrome.

    Click image for larger version. 

Name:	Test-Index.PNG 
Views:	31 
Size:	21.0 KB 
ID:	25491

    Click image for larger version. 

Name:	Test-BPage.PNG 
Views:	35 
Size:	24.3 KB 
ID:	25492
    Last edited by dnakorea; Jan 12, 2021 at 5:21 AM.
  8. #8
    Hello again, @dnakorea!

    I apologize for missing the main point here; at some point I removed the Ext.NET components from the inner page and that just worked as-is. Adding them back reproduced the issue you're facing.

    That happens because the default component loader mode is just about injecting the returned page's XML within the container. So simple HTML just works, script blocks (javascript) are not evaluated though.

    That said, to fix your scenario just add renderer="frame" to the ext-componentLoader definition.

    This will turn the insides of the panel into an iframe and will load the inner page with a full request life cycle.

    Hope this helps, and sorry for the inconvenience this may have caused.
  9. #9

    Good Worked!

    Thanks.
    Good worked.
  10. #10
    Thanks for the feedback, glad we could ultimately help you on the inquire!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. ComponentLoader Bug
    By zeus in forum 4.x Help
    Replies: 0
    Last Post: Jun 14, 2018, 2:12 PM
  2. [CLOSED] PropertyGrid and ComponentLoader
    By Edgar in forum 4.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 28, 2017, 8:44 PM
  3. ComponentLoader and Explicit Id
    By ETICS in forum 2.x Help
    Replies: 0
    Last Post: Jun 26, 2013, 4:21 PM
  4. [CLOSED] ComponentLoader issue
    By RCN in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 12, 2012, 9:28 PM
  5. [CLOSED] ComponentLoader - DirectEvents
    By PatrikG in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 15, 2012, 1:20 PM

Tags for this Thread

Posting Permissions