Load usercontrol from client side

Question

I am loading my user control like below.How I can achive that from client side.

same code but client side request what I need

private void LoadUserControlTab(string num, string title = "")
{

    Ext.Net.Panel pn = new Ext.Net.Panel();
    pn.Title = title;
    pn.ID = num;
    string pnid = num;
    pn.Closable = true;
    pn.Flex = 1;
    pn.Height = 500;
    currentUC = (UserControl)this.LoadControl(string.Format("Controls/UserControl{0}.ascx", num));
    currentUC.ID = "UC" + num;
    pn.ContentControls.Add(currentUC);
    pn.AddTo(this.anaTabPnl);
    this.anaTabPnl.SetActiveTab(pnid);
    this.Controls.Add(pn);
        //  this.Panel1.ContentControls.Add(currentUC);
        //  this.anaTabPnl.ContentControls.Add(currentUC);
}

here is the client side I used to when I loading external page

<ext:XScript ID="XScript1" runat="server">
    <script>
        var addTab = function (tabPanel, id, url, menuItem,mytitle) {
            var tab = tabPanel.getComponent(id);

            if (!tab) {
                tab = tabPanel.add({
                    id       : id,
                    title    : mytitle,
                    closable : true,
                    flex:"1",
                    menuItem : menuItem,
                    loader   : {
                        url      : url,
                        renderer : "frame",
                        loadMask : {
                            showMask : true,
                            msg      : "Yükleniyor"
                        }
                    }
                });

                tab.on("activate", function (tab) {
                    #{MenuPanel1}.setSelection(tab.menuItem);
                });
            }

            tabPanel.setActiveTab(tab);
        }
    </script>
</ext:XScript>

only should I point url to ,ascx ??

Answer 1

here is the ashx implementation;

myHanndler.ashx

public void ProcessRequest(HttpContext context)
    {
        string mainTabPnl = context.Request["container"];
        string url = context.Request["url"];
        string id = context.Request["id"];

        Ext.Net.Panel pn = new Ext.Net.Panel()
        {
            Title = "MY TITLE",
            Closable = true,
            Layout = "Fit",
            Height = 500,
            ID = id,

            Items = {
                new UserControlLoader{
                Path=url
                }
            }
        };

        pn.AddTo(mainTabPnl);

        new DirectResponse().Return();
    } 

and client side

<ext:XScript ID="XScript1" runat="server">

    <script>

        var onClickMeLoadComponent = function (tabPanel, id, url, menuItem) {

            var tab = #{mainTabPnl}.getComponent(id);

            if (!tab) {

                Ext.net.DirectMethod.request({
                    url: "MyHandler.ashx",
                    cleanRequest: true,
                    params: {
                        container: tabPanel,
                        url: url,
                        id:id
                    }, complete: function () {
                        var tab = #{mainTabPnl}.getComponent(id);
                       #{mainTabPnl}.setActiveTab(tab);
                    }
                });

                //tab.on("activate", function (tab) {
                //   #{mainTabPnl}.setSelection(tab.menuItem);
                //});
            }
           #{mainTabPnl}.setActiveTab(tab);
        };
            </script>
    </ext:XScript>