[CLOSED] Adding UserControl dynamically in code-behind

**wagger** · May 15, 2011, 12:47 PM

Originally Posted by Daniil

Can you see the user control's content if you apply these actions in Page-Load?

No, that doesnt work. Same thing as before - nothing happens.

Originally Posted by Daniil

By the way, here is the working sample with .UpdateContent().
https://examples1.ext.net/#/XRender/...UpdateContent/

In that example use use this.LoadControl. If I use LoadControl I get an error saying something like "Only one Control can be added to Collection"...

Do I need to use LoadControl or is it enough with the code posted above?

**Daniil** · May 15, 2011, 1:16 PM

Originally Posted by wagger

No, that doesnt work. Same thing as before - nothing happens.

Well, there is wrong layout. Do you apply my recommendation about FormLayout?

Just try to set fixed .Height and .Width for all container.

Originally Posted by wagger

In that example use use this.LoadControl. If I use LoadControl I get an error saying something like "Only one Control can be added to Collection"...

Do I need to use LoadControl or is it enough with the code posted above?

No, there is no need to use .LoadControl(). Creating a control through its constructor is fine.

**geoffrey.mcgill** · May 15, 2011, 4:52 PM

The following sample demonstrates loading a UserControl during a [DirectMethod] call.

In this sample, .LoadControl is used to instantiate the UserControl, but a constructor could be used as well.

Example (.aspx)

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

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

<script runat="server">
    [DirectMethod]
    public void MyControl()
    {
        Control control = this.LoadControl("Child.ascx");

        this.Panel1.ContentControls.Add(control);

        this.Panel1.UpdateContent();
    }
</script>
      
<!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>Ext.NET Examples</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
             
        <ext:Button runat="server" Text="Submit" OnClientClick="Ext.net.DirectMethods.MyControl();" />
 
        <ext:Panel ID="Panel1" runat="server" Title="Example" />
    </form>
</body>
</html>

Example (.ascx)

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<ext:Panel runat="server" ID="ChildPanel1" BodyStyle="background: #FFFDDE">
    <Items>
        <ext:Label runat="server" Text="My Label" />
    </Items>
</ext:Panel>

In future threads, please ensure you post a full (but simplified) .aspx sample in the first post.

**wagger** · May 15, 2011, 7:19 PM

Well, I can get Geoffreys example to work (once, that is one control added), but if I use a constructor in my own example it does not work.
If I use the LoadControl it does work.

The sample below does not work. If you replace the line:

WebApplicationExtNetTest.Test.Comment cc = new WebApplicationExtNetTest.Test.Comment();

with

Control cc = this.LoadControl("Comment.ascx");

it will work (at least once).

Also, if I take Geoffreys example and use a contructor instead of LoadControl, it does not work. Can you try it to confirm?

<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
  
<!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 id="Head1" runat="server">
    <title>ToolTips - Ext.NET Examples</title>
 
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
        }
 
        [DirectMethod]
        public void asd()
        {
            WebApplicationExtNetTest.Test.Comment cc = new WebApplicationExtNetTest.Test.Comment();
            this.PanelComments.ContentControls.Add(cc);
            this.PanelComments.UpdateContent();
        }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
             
            <ext:Button ID="Button1" runat="server" Text="ok">
                <Listeners>
                    <Click Handler="Ext.net.DirectMethods.asd();" />
                </Listeners>
            </ext:Button>
 
            <ext:Panel ID="PanelComments" runat="server" Layout="FormLayout" Padding="3" Title="Comments" IconCls="message" Height="200">
            </ext:Panel>
    </form>
</body>
</html>

Comment.ascx

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

<ext:Panel runat="server" ID="ChildPanel1" BodyStyle="background: #FFFDDE">
    <Items>
        <ext:Label runat="server" Text="My Label" />
    </Items>
</ext:Panel>

**geoffrey.mcgill** · May 15, 2011, 9:30 PM

There is no difference between using .LoadControl or directly instantiating an instance of the UserControl class. Both return an instance of a Control type and can be added to the .ContentControl Collection.

Example (.aspx)

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

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

<script runat="server">
    [DirectMethod]
    public void AddControl()
    {
        MyUserControl control = new MyUserControl();

        this.Panel1.ContentControls.Add(control);

        this.Panel1.UpdateContent();
    }
</script>
      
<!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>Ext.NET Examples</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
             
        <ext:Button runat="server" Text="Submit" OnClientClick="Ext.net.DirectMethods.AddControl();" />
 
        <ext:Panel ID="Panel1" runat="server" Title="Example" />
    </form>
</body>
</html>

Example (.ascx)

<%@ Control Language="C#" ClassName="MyUserControl" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<ext:Panel runat="server" ID="ChildPanel1" BodyStyle="background: #FFFDDE">
    <Items>
        <ext:Label runat="server" Text="<%# DateTime.Now.ToLongTimeString() %>" AutoDataBind="true" />
    </Items>
</ext:Panel>

**wagger** · May 16, 2011, 6:07 AM

Geoffrey,

have you tried to make the change I specified in your own example? Because making that change stops it from working. I have tried it. Can you try it?

Also, the example you posted in your last post here does not work here. I have attached a recording of my screen so you can see it yourself.
(but as I said before, it works with LoadControl)

The video linked below (10MB) shows me trying to run your example; pressing the button but nothing happens. Also no javascript errors or anything like that.

http://www.wagger.org/20110516_0804_01.avi

**Daniil** · May 16, 2011, 12:20 PM

Thanks for the video, I saw the issue.

I can confirm that your examples and Geoffrey's ones works fine on my side either with .LoadContol() and instancing by the constructors.

Lets consider the last Geoffrey's sample.
http://forums.ext.net/showthread.php...ll=1#post56815

Is the issue reproducible under the supported browsers, for example, IE, FF, Chrome?

Could you post the response (use, for example, Fiddler in IE or FireBug in FF).

Here is the response I 'm getting (FF FireBug):

{script:"Ext.net.replaceContent(Panel1,\"Panel1_Content\",[\"<div id=\\\"Panel1_Content\\\" class=\\\"x-hidden\\\"><div id=\\\"ctl07_ChildPanel1_Container\\\">\",\"</div></div>\"].join(''));new Ext.Panel({\r\n  id: \"ctl07_ChildPanel1\",\r\n  renderTo: \"ctl07_ChildPanel1_Container\",\r\n  items: {\r\n  xtype: \"label\",\r\n  text: \"16:15:43\"\r\n},\r\n  layout: \"auto\",\r\n  bodyStyle: \"background: #FFFDDE;\"\r\n});"}

**Vladimir** · May 16, 2011, 12:43 PM

Hi,

It is very strange that you try to instantiate user control via constructor. Only LoadControl method must be used to load user control

The reason is, using the new assignment all you are doing is creating a new instance of the class, not instantiating the full control. The difference, using new creates the class without the design surface of the .ascx file. To correctly add a control to a page programatically you need to use the LoadControl method of the page such as:
ControlClass myControl = (ControlClass)Page.LoadControl(pathtomyascxfile);

Why do you instantiate via constructor?

**wagger** · May 16, 2011, 12:50 PM

Hey!

This is what I get in FireFox 4.0.1 (not working):

{script:"Ext.net.replaceContent(Panel1,\"Panel1_Content\",[\"<div id=\\\"Panel1_Content\\\" class=\\\"x-hidden\\\"></div>\"].join(''));"}

This is what I get in Chrome 11.0.696.65 (not working):

{script:"Ext.net.replaceContent(Panel1,\"Panel1_Content\",[\"<div id=\\\"Panel1_Content\\\" class=\\\"x-hidden\\\"></div>\"].join(''));"}

This is what I get in Internet Explorer 9.0.8112.16421 (not working):

{script:"Ext.net.replaceContent(Panel1,\"Panel1_Content\",[\"<div id=\\\"Panel1_Content\\\" class=\\\"x-hidden\\\"></div>\"].join(''));"}

They all look exactly the same...

**wagger** · May 16, 2011, 12:56 PM

Originally Posted by Vladimir

Why do you instantiate via constructor?

Hi Vladimir!

Well, pretty much because I was told so by Daniil and Geoffrey (see previous posts) ;-) And that I have seen that the Constructor-approach has been used in many examples here on the forum as well as on your examples page...

Thread: [CLOSED] Adding UserControl dynamically in code-behind

Thread Tools

Search Thread

Display

Similar Threads

Dynamically created UserControl with Store/PageProxy

[CLOSED] Managing events from a dynamically loaded UserControl

How can we add tabs which contains a usercontrol dynamically in the Tab Panel

How to create DesktopWindow containing UserControl dynamically?

[CLOSED] Error adding headerrow to GridPanel in dynamically loaded usercontrol.

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources