[CLOSED] Adding UserControl dynamically in code-behind

[wagger]

Hey,
I read a few posts here and also on the net about ASP.NET in general, but cant figure out how to dynamically add UserControls in code-behind.

I want to add my custom UserControl "CoreComment" to a Panel I have.

This is what I tried:

UserControls.CoreComment cc = new UserControls.CoreComment();
cc._Comment = c;
PanelComments.Controls.Add(cc);

Here I see no controls rendered. I also tried to add "cc.RenderControl(...)" but I dont really know what or how to use/get a HtmlTextWriter or if that is the right way to go.

Any help is appreciated =)

[geoffrey.mcgill]

Hi,

You can add any Control to the .ContentControls Collection, or the <Content> inner property if configuring in markup.

Example

this.Panel1.ContentControls.Add(myUserControl);

Hope this helps.

[wagger]

Hey!

Hmm, i cant get it to work. Its not rendering anything at all.

So this is how I add the UserControl to a Panel (code-behind, in a Page):

foreach(CoreCommons.System.Comment c in cg.Reply_Comments)
{
    WebApplicationExtNetTest.Secure.UserControls.CoreComment cc = new UserControls.CoreComment();
    this.PanelComments.ContentControls.Add(cc);
}

And the Panel who should get the Controls:

<ext:LayoutColumn ColumnWidth="0.40">
    <ext:Panel ID="PanelComments" runat="server" Layout="FormLayout" Padding="3" Title="Kommentarer" IconCls="message">
        <Content>
        </Content>
    </ext:Panel>
</ext:LayoutColumn>

Nothing is rendered though, and no errors can be seen either.

The UserControl is a very simple one:

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

<ext:Panel runat="server" ID="CoreCommentOuterPanel" BodyStyle="background: #FFFDDE">
    <Items>
        <ext:ColumnLayout runat="server">
            <Columns>
                <ext:LayoutColumn ColumnWidth="0.8">
                    <ext:Image runat="server" ImageUrl="/Resources/bullet_triangle_green_16x16.png" Align="AbsMiddle"></ext:Image> 
                    <ext:Label runat="server" ID="lblCommentInfo" Text="test"></ext:Label>
                </ext:LayoutColumn>
                <ext:LayoutColumn ColumnWidth="0.2"><ext:Button runat="server" ID="btnDelete" Icon="Delete"></ext:Button></ext:LayoutColumn>
            </Columns>
        </ext:ColumnLayout>
        <ext:Label runat="server" ID="lblComment" Text="comment"></ext:Label>
    </Items>
</ext:Panel>

[Daniil]

This is not correct:

1. ColumnLayout is not a widget to use it like this.

<ext:Panel ...>
    <Items>
        <ext:ColumnLayout runat="server">
            ...
        </ext:ColumnLayout>
        <ext:Label ...>
    </Items>
</ext:Panel>

and

2. LayoutColumn expects a single widget.

<ext:LayoutColumn ColumnWidth="0.8">   <ext:Image ...>
    <ext:Label ...>
</ext:LayoutColumn>

I would suggest you to get it work without a user control for the beginning.

[wagger]

Ehm, are you saying that a <ext:ColumnLayout...> cannot be placed inside the <Items> of a Panel? But you can have ColumnLayout inside for example a ViewPort:

<ext:Viewport ID="ViewPort1" runat="server">
        <Items>
            <ext:ColumnLayout ID="ColumnLayout1" runat="server" Split="true" FitHeight="true">

[wagger]

Also, i dummed down my userControl even more, so it looks like this:

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

<ext:Panel runat="server" ID="CoreCommentOuterPanel" BodyStyle="background: #FFFDDE">
    <Items>
        
        <ext:Label runat="server" ID="lblComment" Text="comment"></ext:Label>
    </Items>
</ext:Panel>

And to dynamically add that Control doesnt work either. Im not really sure what Im doing wrong.

Is the code-behind code cirrect? I do not n eed to call some form of "render"? I have seen that in other places, a call to .Render(). But there is no such method here, just .RenderControl(HtmlTextWriter)...

[wagger]

Here is an example. Click the Button and the UserControl should be added? Not working here either.

First the Page that should dynimcally load the UserControl:

<%@ 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.Secure.UserControls.CoreComment cc = new WebApplicationExtNetTest.Secure.UserControls.CoreComment();
            this.PanelComments.ContentControls.Add(cc);
        }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Button 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">
                <Content>
                </Content>
            </ext:Panel>
    </form>
</body>
</html>

And here is the UserControl:

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

<ext:Panel runat="server" ID="CoreCommentOuterPanel" BodyStyle="background: #FFFDDE">
    <Items>
        
        <ext:Label runat="server" ID="lblComment" Text="comment"></ext:Label>
    </Items>
</ext:Panel>

The UserControl code-behind:

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

namespace WebApplicationExtNetTest.Secure.UserControls
{
    public partial class CoreComment : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
    }
}

[Daniil]

Ehm, are you saying that a <ext:ColumnLayout...> cannot be placed inside the <Items> of a Panel?

No, I meant <ext:Label> here:

<ext:Panel ...>
    <Items>
        <ext:ColumnLayout runat="server">
            ...
        </ext:ColumnLayout>
        <ext:Label ...>
    </Items>
</ext:Panel>

In other words, any layout control should be a single top level 'item', and it's not really an item, not in .items collection.

Regarding the sample you posted. During DirectEvent/DirectMethod you should also call .UpdateContent() for the container together with placing a control into the .ContentControls() collection.

[wagger]

Hey
I tried to add the UpdateContent like below, but that didnt work - nothing happens.

        [DirectMethod]
        public void asd()
        {
            WebApplicationExtNetTest.Secure.UserControls.CoreComment cc = new WebApplicationExtNetTest.Secure.UserControls.CoreComment();
            this.PanelComments.ContentControls.Add(cc);
            this.PanelComments.UpdateContent();
            
        }

[Daniil]

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

ebApplicationExtNetTest.Secure.UserControls.CoreComment cc = new WebApplicationExtNetTest.Secure.UserControls.CoreComment();
this.PanelComments.ContentControls.Add(cc);

Just I can't test it right now myself, I assume that there is wrong layout.

Layout="FormLayout" of the panelCommens doesn't make sense. Please wrap the user control's content in <ext:FormLayout> instead.

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