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>

Answer 2

Create a webservice and exposed a webmethod

[WebMethod]
public string LoadUserControl(int num)
{
    using (Page page = new Page())
    {
        UserControl userControl = (UserControl)page.LoadControl(string.Format("Controls/UserControl{0}.ascx", num));

        page.Controls.Add(userControl);
        using (StringWriter writer = new StringWriter())
        {
            page.Controls.Add(userControl);
            HttpContext.Current.Server.Execute(page, writer, false);
            return writer.ToString();
        }
    }
}

After that call this web service method from javascript(jquery) as below

 $("#load").live("click", function () {
            $.ajax({
                type: "POST",
                url: "WebService/LoadUserControl",
                data: "{num:[VALUE]}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    $("#Content").append(r.d);
                }
            });
        });

Answer 3

For ExtJs, you can use below code.

Here is ashx implementation.

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

        new DirectResponse(this.createNew(url).ToScript(RenderMode.AddTo, context.Request["container"])).Return();

    }

    private Panel createNew(string url)
    {
        Ext.Net.Panel pnlBase = new Ext.Net.Panel()
        {
            Title = "MY TITLE",
            Closable = false,
            Layout = "Fit",
            Height = 500,
            ID = "pnlBase",

            Items = {
            new UserControlLoader{
            Path=url
            }
        }

       };

      return pnlBase;
    }

Here is the extjs code.

win = new Ext.Window({
        id: 'win',
        title: 'Add New',
        layout: 'fit',
        autoScroll: true,
        y: 120,
        width: 900,
        height: 700,
        modal: true,
        closeAction: 'hide',
        listeners: {
            activate: {
                fn: function () {
                    Ext.net.DirectEvent.request({
                        url: "MyHandler.ashx",
                        cleanRequest: true,
                        extraParams: {
                            container: this.id,
                            controlUrl: 'MyUserControl.ascx'
                        },
                        eventMask: {
                            showMask: true
                        }
                    });
                },
                single: true
            }
        }

    });

    win.show();