[CLOSED] Error on calling direct methods when load dynamic UserControl

[huannv]

I have tried dynamic load UserControl from code behind,
i have an error on load dynamic control from javascript: urlAppend:function(r,q){if(!Ext.isEmpty(q)){return r+(r.indexOf("?")===-1?"?":"&")+q}return r}
and Direct method functions is not work when i call from Listener.

Here is method to load usercontrol

public void addTab()
        {
            try
            {
                var tab = new Ext.Net.Panel
                {
                    ID = "xxxxx",
                    Title = "TeST",
                    Padding = 1,
                    Closable = true,
                    Loader = new ComponentLoader
                    {
                        Scripts = true,
                        Mode = LoadMode.Component,
                    }
                };

                var userControl = LoadControl("~/TestWindowUserControl.ascx");
                //var userControl = LoadControl("~/Test.ascx");
                //userControl.ID = "TestWindowUserControl";
                //userControl.ClientIDMode = System.Web.UI.ClientIDMode.Static;
                tab.ContentControls.Add(userControl);


                TabPanel1.Items.Add(tab);
                //tpMain.Render();
            }
            catch (Exception ex)
            {
                string test = ex.Message;
            }
        }
    }

I tried listener event from button in control

<ext:Button ID="Button2" runat="server" Text="button1">
    <Listeners>
        <Click Handler="#{DirectMethods}.showMessage();" />
    </Listeners>
</ext:Button>

<ext:Button ID="Button1" runat="server" Text="button2">
    <Listeners>
        <Click Handler="user1.showMessage1();" />
    </Listeners>
</ext:Button>

<ext:Button ID="Button3" runat="server" Text="button3">
    <Listeners>
        <Click Handler="user2.showMessage2();" />
    </Listeners>
</ext:Button>

<ext:Button ID="Button4" runat="server" Text="button4">
    <Listeners>
        <Click Handler="#{DirectMethods}.showMessage3();" />
    </Listeners>
</ext:Button>

<ext:Button ID="Button5" runat="server" Text="button5">
    <Listeners>
        <Click Handler="#{DirectMethods}.showMessage4();" />
    </Listeners>
</ext:Button>

<ext:Button ID="Button6" runat="server" Text="button6">
    <Listeners>
        <Click Handler="App.direct.alias1.showMessage();" />
    </Listeners>
</ext:Button>

and direct methods from controls

[DirectMethodProxyID(IDMode = DirectMethodProxyIDMode.Alias, Alias = "alias1")]
    public partial class TestWindowUserControl : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [Ext.Net.DirectMethod]
        public void showMessage()
        {
            X.Js.Alert("showMessage");
        }

        [Ext.Net.DirectMethod(Namespace="user1")]
        public void showMessage1()
        {
            X.Js.Alert("user1");
        }

        [Ext.Net.DirectMethod(Namespace = "user2", IDMode = DirectMethodProxyIDMode.None)]
        public void showMessage2()
        {
            X.Js.Alert("user2");
        }

        [Ext.Net.DirectMethod(IDMode= DirectMethodProxyIDMode.ID)]
        public void showMessage3()
        {
            X.Js.Alert("user3");
        }

        [Ext.Net.DirectMethod(IDMode = DirectMethodProxyIDMode.Default)]
        public void showMessage4()
        {
            X.Js.Alert("user4");
        }
    }

But it not work, please help me!

[Daniil]

Hi @huannv,

Welcome to the Ext.NET forums!

I have some guesses what might be wrong, but I need a runnable test case to investigate in details. Please provide. I would expect to see two standalone files - .aspx and .ascx.

I might try to ask some follow-up questions, but it might end up to a long discussion without a solution for you. An ideal way would be providing us with a full test case. It will really save your time.

A few tips:

1. You should not use a Panel's Loader and ContentControls at the same time. It is competing ways to fill up a Panel's content.

2. This example might be helpful.
https://examples2.ext.net/#/Events/D...s/UserControls

[huannv]

Hi Daniil, Thanks for reply
Here is my sample
1. TabPanel.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabPanel.aspx.cs" Inherits="WebApplication1.TabPanel" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<%@ Register Src="~/ElementChooser.ascx" TagPrefix="uc" TagName="Chooser" %>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title>Adding Tabs On The Fly - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />

        <ext:Window ID="Window1"
            runat="server"
            Title="Adding tab"
            Width="700"
            Height="500"
            Icon="Link"
            Layout="BorderLayout">
            <Items>
                <ext:TabPanel ID="TabPanel1" runat="server" Region="Center" >
                   <%-- <Items>
                        <ext:Panel ID="childPanel01" runat="server" Title="hello">
                            <Content>
                                    <uc:Chooser ID="Chooser2" runat="server" />
                            </Content>
                        </ext:Panel>
                    </Items>--%>
                </ext:TabPanel>
            </Items>
        </ext:Window>
    </form>
</body>
</html>

2. TabPanel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;

namespace WebApplication1
{
    public partial class TabPanel : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Ext.Net.Panel panel = new Ext.Net.Panel
                {
                    Title = "New Tab",
                    Closable = true,
                    Items = { 
                    new UserControlLoader{
                        Path="ElementChooser.ascx",
                        UserControlID="Chooser2",
                        UserControlClientIDMode = System.Web.UI.ClientIDMode.Inherit,
                    }
                }
                };
                TabPanel1.Add(panel);
                panel.Render();

                TabPanel1.SetLastTabAsActive();
            }
        }
    }
}

3. ElementChooser.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ElementChooser.ascx.cs" Inherits="WebApplication1.ElementChooser" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    
</script>

<ext:Button ID="button01" runat="server" Text="my Button">
    <Listeners>
        <Click Handler ="ShowMessageTest();"></Click>
    </Listeners>
</ext:Button>

<ext:DataView ID="DataView1" runat="server" 
    TrackOver="true"
    ItemSelector=".x-newtab-item"
    OverItemCls="x-newtab-over-item">
    <Tpl>
        <Html>
            <tpl for=".">
                <div class="x-newtab-item">
                    <h1>{name}</h1>
                </div>
            </tpl>
        </Html>        
    </Tpl>
    <Store>
        <ext:Store ID="Store1" runat="server">
            <Model>
                <ext:Model ID="Model1" runat="server">
                    <Fields>
                        <ext:ModelField Name="name" />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
    </Store>
</ext:DataView>

<script type="text/javascript" >
    function ShowMessageTest() {
        App.direct.Chooser2.showMessage1();
    }
</script>

4. ElementChooser.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;

namespace WebApplication1
{
    public partial class ElementChooser : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataView view = Ext.Net.Utilities.ControlUtils.FindControl<DataView>(this);
                view.Store.Primary.DataSource = new List<object> { 
                new {name = "1"},
                new {name = "2"},
                new {name = "3"},
                new {name = "4"},
                new {name = "5"},
                new {name = "6"}
            };
        }

        [DirectMethod]
        public void showMessage1()
        {
            X.Msg.Alert("Message box", "Hello message 1").Show();
        }

        protected void showMessage2(object sender, DirectEventArgs e) {
            X.Msg.Alert("Message box", "Hello message 2").Show();
        }
    }
}

5. It work fine If i used userControl in TabPanel.aspx, but does not work when create control from dynamic (in sample is page_load)
Thanks &Regards,

[Daniil]

Thank you for the test case. A small tip: markup and code behind might be put together:

<%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [Rest of the code behind]
</script>

<!DOCTYPE html>

<html>
    [Rest of the markup]
</html>

Regarding the problem. Due to if (!IsPostBack) the user control is not re-created during a DirectMethod request and Ext.NET cannot find an actual server side method (DirectMethod) to execute.

Also please don't use the Render method during an initial page request. It also looks that you don't need to call SetLastTabAsActive.

If you change the Page-Load handler to this, your example starts working.

protected void Page_Load(object sender, EventArgs e)
{
    Ext.Net.Panel panel = new Ext.Net.Panel
    {
        Title = "New Tab",
        Closable = true,
        Items = 
        { 
            new UserControlLoader
            {
                Path = "ElementChooser.ascx",
                UserControlID = "Chooser2"
            }
        }
    };
    TabPanel1.Add(panel);
}

[huannv]

Hi Daniil,

I changed follow recommend, and work fine!
Thanks, best week for you