[CLOSED] [#80] UserControlLoader

[softmachine2011]

Hi,

In my application I must load an ascx inside a content of a panel, and this ascx contains <script> tags.
When the page is rendered I see in network requests that all scripts of this ascx are requested a twice.

Is there something way to load controls like in v2 of Ext.NET with UserControlLoader?
Or could I add this control in my v1 project easily?

Thanks

[Daniil]

Hi @softmachine2011,

There is no analog of UserControlLoader in Ext.NET v1.

When the page is rendered I see in network requests that all scripts of this ascx are requested a twice.

Please provide a sample to reproduce.

[softmachine2011]

Hi,

Here you are a test case that reproduces the problem.

MAIN PAGE

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/BaseMasterPage.Master" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">
    Sample Project - Details
</asp:Content>
<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
    <ext:Viewport runat="server" Layout="VBoxLayout">
        <Content>
            <script type="text/javascript">
                Ext.ns("Framework");

                top.Framework = {
                    resolveUrl: function ResolveUrl(url) {
                        var appPath = '<%= Request.ApplicationPath %>';
                        if (appPath == "/")
                            return url;
                        else
                            return '<%= Request.ApplicationPath %>' + url;
                    },
                   openTab: function (url) {
                        if (Ext.isEmpty(url, false)) {
                            return;
                        }

                        var tp = Ext.getCmp("sampleTabPanel");
                        var tabId = url;
                        var tab = tp.getComponent(tabId);

                        if (!tab) {
                            tab = tp.add({
                                id: tabId,
                                iconCls: 'icon-colorwheel',
                                title: 'My Tab',
                                closable: true,
                                closeAction: 'close',
                                autoLoad: {
                                    url: url,
                                    mode: 'iframe',
                                    noCache: true,
                                    maskMsg: 'Loading...'
                                }
                            });

                            tp.setActiveTab(tab);

                            tab.addListener('activate', tab.syncSize);

                        } else {
                            tp.setActiveTab(tab);
                            tab.fireEvent('activate');
                            Ext.get(tab.tabEl).frame();
                        }
                    }
                };
            </script>
        </Content>
        <Items>
            <ext:Button runat="server" Text="Open Tab">
                <Listeners>
                    <Click Handler="top.Framework.openTab('/Sample/Sample/PageWithScript');" />
                </Listeners>
            </ext:Button>
            <ext:TabPanel ID="sampleTabPanel" runat="server" Width="500" Height="500" />
        </Items>
    </ext:Viewport>
</asp:Content>

TAB PAGE

<asp:Content ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript" src="/resources/js/script1.js"></script>
</asp:Content>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <ext:Viewport runat="server" Border="false" Layout="FitLayout">
        <Content>
            <my:uc runat="server" />
        </Content>
        <Items>
            <ext:Panel runat="server" Title="Panel with script1" Height="500" Layout="FitLayout" />
        </Items>
    </ext:Viewport>
</asp:Content>

USER CONTROL INSIDE TAB PAGE

<ext:Window ID="MyWindow" runat="server" Title="UserControl Title With script 2"
    Width="300" Height="400" MinHeight="400" MinWidth="300" Hidden="false" Border="false" Constrain="false"
    Modal="false" Maximizable="true">
    <Content>
        <script type="text/javascript" src="/resources/js/script2.js"></script>
    </Content>
    <Items>
        <ext:Label runat="server" Text="MY WINDOW" />
    </Items>
</ext:Window>

MASTER PAGE

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>
        <asp:ContentPlaceHolder ID="TitleContent" runat="server" />
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="/resources/css/ui.css" />
    <ext:ResourcePlaceHolder runat="server" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
<body>
    <ext:ResourceManager ID="resManager" runat="server" IDMode="Explicit"
        ViewStateMode="Disabled" GZip="true" InitScriptMode="Inline" />

    <div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    </div>
</body>
</html>

CONTROLLER

        public ActionResult PageWithScript()
        {
            return View();
        }

If you need anything else, tell me

[Daniil]

Thank you.

I am unable to reproduce the problem.

The "script2.js" file is requested just once.

Please clarify where do you see that the resource is requested twice?

[softmachine2011]

Using Developer Tools in IE9 with F12, in network tab and starting network capture you can see that script2 tries to load twice.
But in v2 loading user control with a UserControlLoader, network request are correct, only one time script2.

I show you in a image:


I know that the second is not requested to server because is cached, but is incorrect to request it twice.

[Daniil]

I reproduced with IE. And, really, it is specific to IE. The script is requested once in FireFox and Chrome.

It appears that IE re-requests a resource on moving a DOM element.

As a workaround we can suggest to set up the following listener for the Window

<BeforeRender Handler="Ext.net.ResourceMgr.load({ url: '/resources/js/script2.js' });" />

instead of

<Content>
     <script type="text/javascript" src="/resources/js/script2.js"></script>
</Content>

The file should be request just once.