Add child controls to User Control in ASP.Net

Last Reply 4 months ago By WhatWhat

Posted 4 months ago

Hi!

Im trying to make an User Control that acts like a popup and that can be used in several pages.

But I cant figure out how to display the children controls inside the control tag. I want to add all controls to a placeholder. I can add the controls, but they dont render.

 

This is my control:

    [
    AspNetHostingPermission(SecurityAction.Demand,
        Level = AspNetHostingPermissionLevel.Minimal),
    AspNetHostingPermission(SecurityAction.InheritanceDemand,
        Level = AspNetHostingPermissionLevel.Minimal),
    DefaultProperty("Inner"),
    ParseChildren(true, "Inner"),
    ToolboxData(
        "<{0}:Popup runat=\"server\"> </{0}:Popup>")
    ]
    public partial class Popup : Lib.baseControl
    {
        private List<System.Web.UI.Control> _content;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack && !this.Loaded)
            {
                foreach(System.Web.UI.Control c in this.Inner) { PlaceHolderContent.Controls.Add(c); }
            }  
        }
        public void Show(CommandButton.Types type)
        {
            string header = string.Empty;

            switch (type)
            {
                case CommandButton.Types.CreateItem:
                    header = "Legg til ny vare";
                    break;

                case CommandButton.Types.CreateGroup:
                    header = "Legg til ny gruppe";
                    break;
            }

            LiteralHeader.Text = header;
            UpdatePanelHeader.Update();
            LinkButtonPopupDummy_ModalPopupExtender.Show();
        }

        private bool Loaded { get { return ViewState["PopupLoaded"] != null ? (bool)ViewState["PopupLoaded"] : false; } set { ViewState["PopupLoaded"] = value; } }

        [Category("Behavior"), DefaultValue(""), Description("Inner controls"), DesignerSerializationVisibility(DesignerSerializationVisibility.Content), PersistenceMode(PersistenceMode.InnerDefaultProperty)]
        public List<System.Web.UI.Control> Inner
        {
            get
            {
                if (_content == null) { _content = new List<System.Web.UI.Control>(); }

                return _content;
            }
        }
    }

 

and this is how I want to use it:

<uc1:Popup runat="server" id="PopupCreateItem">
        <asp:Image ID="test" runat="server" ImageUrl="https://lctools.lundbeckconsulting.no/Graphic/Public/Icon/dropdown_arrow_black_white.png" />
    </uc1:Popup>

 

Any suggestions?? :)

Posted 4 months ago

Hi WhatWhat,

can you please explain your requirement in more detail and also do the share the complete code.


Posted 4 months ago Modified on 4 months ago

Hi!

 

This is my ascx file (popup.ascx):

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Popup.ascx.cs" Inherits="LCTools.App.Web.CMS_2017.Secure.Control.Popup" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>

<asp:LinkButton ID="LinkButtonPopupDummy" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="LinkButtonPopupDummy_ModalPopupExtender" runat="server" BehaviorID="LinkButtonPopupDummy_ModalPopupExtender" TargetControlID="LinkButtonPopupDummy" PopupControlID="PanelMain" CancelControlID="LinkButtonClose" BackgroundCssClass="popup_background">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="PanelMain" runat="server">
    <div class="popup">
        <div>
            <div class="popup_header">
                <table style="width:100%;">
                    <tr>
                        <td style="text-align:center;">
                            <asp:UpdatePanel ID="UpdatePanelHeader" runat="server" UpdateMode="Conditional">
                                <ContentTemplate>
                                    <asp:Literal ID="LiteralHeader" runat="server" />
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </td>
                        <td style="width:8px;text-align:right;">
                            <asp:LinkButton ID="LinkButtonClose" runat="server" Text="[X]" />
                        </td>
                    </tr>
                </table>

            </div>
        </div>
        <div class="popup_content">
            <asp:UpdatePanel ID="UpdatePanelContent" runat="server">
                <ContentTemplate>
                    <asp:PlaceHolder ID="PlaceHolderContent" runat="server"></asp:PlaceHolder>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
</asp:Panel>

 

This is the code behind:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.ComponentModel;
using System.Security.Permissions;

namespace LCTools.App.Web.CMS_2017.Secure.Control
{
    [
    AspNetHostingPermission(SecurityAction.Demand,
        Level = AspNetHostingPermissionLevel.Minimal),
    AspNetHostingPermission(SecurityAction.InheritanceDemand,
        Level = AspNetHostingPermissionLevel.Minimal),
    DefaultProperty("Inner"),
    ParseChildren(true, "Inner"),
    ToolboxData(
        "<{0}:Popup runat=\"server\"> </{0}:Popup>")
    ]
    public partial class Popup : Lib.baseControl
    {
        private List<System.Web.UI.Control> _content;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack && !this.Loaded)
            {
                foreach(System.Web.UI.Control c in this.Inner) { PlaceHolderContent.Controls.Add(c); }
            }  
        }
        public void Show(CommandButton.Types type)
        {
            string header = string.Empty;

            switch (type)
            {
                case CommandButton.Types.CreateItem:
                    header = "Legg til ny vare";
                    break;

                case CommandButton.Types.CreateGroup:
                    header = "Legg til ny gruppe";
                    break;
            }

            LiteralHeader.Text = header;
            UpdatePanelHeader.Update();
            LinkButtonPopupDummy_ModalPopupExtender.Show();
        }

        private bool Loaded { get { return ViewState["PopupLoaded"] != null ? (bool)ViewState["PopupLoaded"] : false; } set { ViewState["PopupLoaded"] = value; } }

        [Category("Behavior"), DefaultValue(""), Description("Inner controls"), DesignerSerializationVisibility(DesignerSerializationVisibility.Content), PersistenceMode(PersistenceMode.InnerDefaultProperty)]
        public List<System.Web.UI.Control> Inner
        {
            get
            {
                if (_content == null) { _content = new List<System.Web.UI.Control>(); }

                return _content;
            }
        }
    }
}

 

What Im trying to do is to avoid writing the same code everytime I need a popup dialog. I use ModalPopupExtender from Ajax Control Toolkit.

And this is how I want to use the user control:

<uc1:Popup runat="server" ID="PopupExample"><asp:Image ID="ImageNoContent" runat="server" ImageURL="some_picture.jpg" /></uc1:Popup>

When I need the dialog I call Show, and the idea is to add all the controls between the start and end tag to a ContentPlaceHolder (ID: PlaceHolderContent).

Is this possible, or am I way off??

 

Thanks for replying!

 


Posted 4 months ago

Hi WhatWhat,

You cant add the controls in usercontrol's panel in aspx page directly you need to dynamically add the controls in panel of usercontrol on the button or linkbutton click on which you are showing the modalpopupextender.


Posted 4 months ago

Hurray! it worked!

I can make the content as user controls, and pass in Type and load it dynamically.

 

Thank you very much! :)


Posted 4 months ago

Will do! here goes :)

 

Popup.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Popup.ascx.cs" Inherits="LCTools.App.Web.CMS_2017.Secure.Control.Popup" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>

<asp:LinkButton ID="LinkButtonPopupDummy" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="LinkButtonPopupDummy_ModalPopupExtender" runat="server" BehaviorID="LinkButtonPopupDummy_ModalPopupExtender" TargetControlID="LinkButtonPopupDummy" PopupControlID="PanelMain" CancelControlID="LinkButtonClose" BackgroundCssClass="popup_background">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="PanelMain" runat="server">
    <div class="popup">
        <div>
            <div class="popup_header">
                <table style="width:100%;">
                    <tr>
                        <td style="text-align:center;">
                            <asp:UpdatePanel ID="UpdatePanelHeader" runat="server" UpdateMode="Conditional">
                                <ContentTemplate>
                                    <asp:Literal ID="LiteralHeader" runat="server" />
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </td>
                        <td style="width:8px;text-align:right;">
                            <asp:LinkButton ID="LinkButtonClose" runat="server" Text="[X]" />
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="popup_content">
            <asp:UpdatePanel ID="UpdatePanelContent" runat="server">
                <ContentTemplate>
                    <asp:Panel ID="PanelContent" runat="server"></asp:Panel>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
</asp:Panel>

 

Code behind:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.ComponentModel;

namespace LCTools.App.Web.CMS_2017.Secure.Control
{

    public partial class Popup : Lib.baseControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        public void Show(CommandButton.Types type)
        {
            string header = string.Empty;

            switch (type)
            {
                case CommandButton.Types.CreateItem:
                    header = "Legg til ny vare";
                    PanelContent.Controls.Add(Page.LoadControl("/Secure/Control/PopupModule/CreateItem.ascx"));
                    break;

                case CommandButton.Types.CreateGroup:
                    header = "Legg til ny gruppe";
                    break;
            }

            LiteralHeader.Text = header;
            UpdatePanelHeader.Update();
            LinkButtonPopupDummy_ModalPopupExtender.Show();
        }
    }
}

 

CreateItem.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CreateItem.ascx.cs" Inherits="LCTools.App.Web.CMS_2017.Secure.Control.PopupModule.Shop.CreateItem" %>

<asp:Literal ID="LiteralDemo" runat="server" Text="Just for show" />

 

In use:

<uc1:Popup runat="server" ID="PopupDemo" />

Code behind: (Button click event)

PopupDemo.Show(Secure.Control.CommandButton.Types.CreateItem);

 

thanks again

I agree, here is the link: http://e-iceblue.com/free-api