[CLOSED] componentLoader rendering [Archive]

dnakorea

Jan 06, 2021, 3:41 AM

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>

fabricio.murta

Jan 07, 2021, 7:13 AM

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.

dnakorea

Jan 08, 2021, 5:47 AM

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>

fabricio.murta

Jan 08, 2021, 4:55 PM

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!

dnakorea

Jan 10, 2021, 11:45 PM

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();
}
}

fabricio.murta

Jan 11, 2021, 3:03 PM

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?

dnakorea

Jan 12, 2021, 3:06 AM

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

My Dev / Testing environment is .NET5, Chrome.

25491

25492

fabricio.murta

Jan 12, 2021, 11:40 AM

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.

dnakorea

Jan 13, 2021, 3:35 AM

Thanks.
Good worked.

fabricio.murta

Jan 13, 2021, 1:48 PM

Thanks for the feedback, glad we could ultimately help you on the inquire!