Inclusion of user control within custom control

R

RichB

I am trying to create a project using the ASP.NET AJAX accordion control. I
would like to dynamically add panes to the control with a form template added
when the pane is added. I have tried unsuccessfully in creating the whole
pane as a user control and have succeeded in adding the pane and then
dynamically adding the content which is a user control to the pane,
dynamically within the page.

However I would like to have a single pane control which I can add which
includes the header and content. I therefore was trying to find a way to
create a custom control derived from Pane which has the User control as the
content. I cannot however find a way to add the user control to the custom
control. Is this possible to do, or do I need to just create the content from
the standard controls rather than as a user control?

Thanks,
Richard
 
A

Allen Chen [MSFT]

Hi Richard,

From your description you want to create a sub class of AccordionPane and
add your usercontrol as the header&content, right? If so one important
thing is, the initialization of the usercontrol is a bit different. We have
to use Page.LoadControl to load the usercontrol, otherwise, the controls
defined in the aspx of the usercontrol will not be recognized.

I wrote a sample here that demonstrates how to do this in detail:

Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %>


<%@ Register src="ContentUserControl.ascx" tagname="ContentUserControl"
tagprefix="uc1" %>
<%@ Register src="HeaderUserControl.ascx" tagname="HeaderUserControl"
tagprefix="uc2" %>


<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<cc1:Accordion ID="Accordion1" runat="server">

</cc1:Accordion>
</div>



</form>
</body>
</html>


Default.aspx.cs:
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using AjaxControlToolkit;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Init(object sender, EventArgs e)
{

for (int i = 0; i < 5; i++)
{
ContentUserControl cuc =
Page.LoadControl("ContentUserControl.ascx") as ContentUserControl;
cuc.TestText = "ContentTest" + i.ToString();
HeaderUserControl huc =
Page.LoadControl("HeaderUserControl.ascx") as HeaderUserControl;
huc.TestHeader = "HeaderTest" + i.ToString();
this.Accordion1.Panes.Add(new MyPane(new MyContentTemplate() {
UserControl = cuc }, new MyHeaderTemplate(i) { UserControl = huc }));
}

}


}

public class MyPane : AccordionPane //In this simple scenario we can use
AccordionPane directly. I use MyPane to leave some room for further
customization.
{
public MyPane(MyContentTemplate c, MyHeaderTemplate h)
{
this.Header = h;
this.Content = c;
}
}

public class MyContentTemplate : ITemplate
{


public UserControl UserControl;
public void InstantiateIn(Control container)
{
if (UserControl != null)
{

container.Controls.Add(UserControl);
}

}

}

public class MyHeaderTemplate : ITemplate
{
//I just use Gray color to distinguish header from content. In a simple
scenario we can use the same Template.
public UserControl UserControl;
object _data;
public MyHeaderTemplate(object data) { _data = data; }
public void InstantiateIn(Control container)
{
Panel p = new Panel();
container.Controls.Add(p);
p.BackColor = System.Drawing.Color.Gray;
if (UserControl != null)
{ p.Controls.Add(UserControl); }


}

}

ContentUserControl.ascx:
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="ContentUserControl.ascx.cs" Inherits="ContentUserControl" %>
<asp:Button ID="Button1" runat="server" Text="Button" onload="Button1_Load"
/>

ContentUserControl.ascx.cs:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class ContentUserControl : System.Web.UI.UserControl
{
string _testtext;
public string TestText {
get
{
return _testtext;
}
set { _testtext = value; }
}

protected void Button1_Load(object sender, EventArgs e)
{
this.Button1.Text = _testtext;

}
}

HeaderUserControl.ascx:
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="HeaderUserControl.ascx.cs" Inherits="HeaderUserControl" %>
<asp:Label ID="Label1" runat="server" Text="Label"
onload="Label1_Load"></asp:Label>

HeaderUserControl.ascx.cs:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class HeaderUserControl : System.Web.UI.UserControl
{
string _testheader;
public string TestHeader
{
get
{
return _testheader;

}
set
{
_testheader = value;
}
}

protected void Label1_Load(object sender, EventArgs e)
{
this.Label1.Text = _testheader;
}
}


Please test my code to see if it's what you need and feel free to ask if
you have further questions.

Regards,
Allen Chen
Microsoft Online Community Support


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://support.microsoft.com/select/default.aspx?target=assistance&ln=en-us.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

--------------------
| Thread-Topic: Inclusion of user control within custom control
| thread-index: Ackkb+hIoSw9Bbo2QfiVKwNIfLYdyg==
| X-WBNR-Posting-Host: 65.55.21.8
| From: =?Utf-8?B?UmljaEI=?= <[email protected]>
| Subject: Inclusion of user control within custom control
| Date: Thu, 2 Oct 2008 02:19:01 -0700
| Lines: 16
| Message-ID: <[email protected]>
| MIME-Version: 1.0
| Content-Type: text/plain;
| charset="Utf-8"
| Content-Transfer-Encoding: 7bit
| X-Newsreader: Microsoft CDO for Windows 2000
| Content-Class: urn:content-classes:message
| Importance: normal
| Priority: normal
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.3790.3119
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| Path: TK2MSFTNGHUB02.phx.gbl
| Xref: TK2MSFTNGHUB02.phx.gbl
microsoft.public.dotnet.framework.aspnet:77116
| NNTP-Posting-Host: tk2msftibfm01.phx.gbl 10.40.244.149
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| I am trying to create a project using the ASP.NET AJAX accordion control.
I
| would like to dynamically add panes to the control with a form template
added
| when the pane is added. I have tried unsuccessfully in creating the whole
| pane as a user control and have succeeded in adding the pane and then
| dynamically adding the content which is a user control to the pane,
| dynamically within the page.
|
| However I would like to have a single pane control which I can add which
| includes the header and content. I therefore was trying to find a way to
| create a custom control derived from Pane which has the User control as
the
| content. I cannot however find a way to add the user control to the
custom
| control. Is this possible to do, or do I need to just create the content
from
| the standard controls rather than as a user control?
|
| Thanks,
| Richard
|
 
R

RichB

Thanks Allen,

you have understood my question correctly, although I was hoping that I
could load the user control in MyPane and encapsulate header and footer
totally within MyPane so that within the aspx I could just have
this.Accordion1.Panes.Add(new MyPane()); rather than the aspx having to
know what is needed to fill the pane.

I assume however if there was some equivalent LoadControl method for the
MyPane custom control that you would have described that as a solution. This
solution works fine, though is not quite as neat as I would have liked.

Richard
 
A

Allen Chen [MSFT]

Hi Richard,

This is also possible. Here's the updated version:

public partial class _Default : System.Web.UI.Page
{
protected void Page_Init(object sender, EventArgs e)
{

for (int i = 0; i < 5; i++)
{

this.Accordion1.Panes.Add(new MyPane());
}

}


}

public class MyPane : AccordionPane
{
static Random random=new Random();
public MyPane()
{
this.Init += new EventHandler(MyPane_Init);

}

void MyPane_Init(object sender, EventArgs e)
{
int test = random.Next(0, 100);
ContentUserControl cuc =
this.Page.LoadControl("ContentUserControl.ascx") as ContentUserControl;
cuc.TestText = "ContentTest_" + test;
HeaderUserControl huc =
this.Page.LoadControl("HeaderUserControl.ascx") as HeaderUserControl;
huc.TestHeader = "HeaderTest_" + test;
this.Header = new MyHeaderTemplate() { UserControl = huc };
this.Content = new MyContentTemplate() { UserControl = cuc };
}

}

The key point is to use the Control.Page property. Another note is, we
generally do this in the Init event handler. If we get the Page property in
the constructor method the property is null since no value has been
assigned to it. If we do this in a later event than the Init some page life
cycle puzzle would probably happen.

Please have a try and let me know if it works.

Regards,
Allen Chen
Microsoft Online Support

--------------------
| From: "RichB" <[email protected]>
| References: <[email protected]>
<[email protected]>
| Subject: Re: Inclusion of user control within custom control
| Date: Fri, 3 Oct 2008 14:17:55 +0100
| Lines: 317
| X-Priority: 3
| X-MSMail-Priority: Normal
| X-Newsreader: Microsoft Outlook Express 6.00.2900.5512
| X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.5579
| X-RFC2646: Format=Flowed; Original
| Message-ID: <#[email protected]>
| Newsgroups: microsoft.public.dotnet.framework.aspnet
| NNTP-Posting-Host: 93-96-97-68.zone4.bethere.co.uk 93.96.97.68
| Path: TK2MSFTNGHUB02.phx.gbl!TK2MSFTNGP01.phx.gbl!TK2MSFTNGP05.phx.gbl
| Xref: TK2MSFTNGHUB02.phx.gbl
microsoft.public.dotnet.framework.aspnet:77221
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
|
| Thanks Allen,
|
| you have understood my question correctly, although I was hoping that I
| could load the user control in MyPane and encapsulate header and footer
| totally within MyPane so that within the aspx I could just have
| this.Accordion1.Panes.Add(new MyPane()); rather than the aspx having to
| know what is needed to fill the pane.
|
| I assume however if there was some equivalent LoadControl method for the
| MyPane custom control that you would have described that as a solution.
This
| solution works fine, though is not quite as neat as I would have liked.
|
| Richard
|
| | > Hi Richard,
| >
| > From your description you want to create a sub class of AccordionPane
and
| > add your usercontrol as the header&content, right? If so one important
| > thing is, the initialization of the usercontrol is a bit different. We
| > have
| > to use Page.LoadControl to load the usercontrol, otherwise, the controls
| > defined in the aspx of the usercontrol will not be recognized.
| >
| > I wrote a sample here that demonstrates how to do this in detail:
| >
| > Default.aspx:
| > <%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs"
| > Inherits="_Default" %>
| >
| > <%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
| > TagPrefix="cc1" %>
| >
| >
| > <%@ Register src="ContentUserControl.ascx" tagname="ContentUserControl"
| > tagprefix="uc1" %>
| > <%@ Register src="HeaderUserControl.ascx" tagname="HeaderUserControl"
| > tagprefix="uc2" %>
| >
| >
| > <!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>Untitled Page</title>
| > </head>
| > <body>
| > <form id="form1" runat="server">
| > <div>
| > <asp:ScriptManager ID="ScriptManager1" runat="server">
| > </asp:ScriptManager>
| >
| > <cc1:Accordion ID="Accordion1" runat="server">
| >
| > </cc1:Accordion>
| > </div>
| >
| >
| >
| > </form>
| > </body>
| > </html>
| >
| >
| > Default.aspx.cs:
| > using System;
| > using System.Configuration;
| > using System.Data;
| > using System.Linq;
| > using System.Web;
| > using System.Web.Security;
| > using System.Web.UI;
| > using System.Web.UI.HtmlControls;
| > using System.Web.UI.WebControls;
| > using System.Web.UI.WebControls.WebParts;
| > using System.Xml.Linq;
| > using AjaxControlToolkit;
| >
| > public partial class _Default : System.Web.UI.Page
| > {
| > protected void Page_Init(object sender, EventArgs e)
| > {
| >
| > for (int i = 0; i < 5; i++)
| > {
| > ContentUserControl cuc =
| > Page.LoadControl("ContentUserControl.ascx") as ContentUserControl;
| > cuc.TestText = "ContentTest" + i.ToString();
| > HeaderUserControl huc =
| > Page.LoadControl("HeaderUserControl.ascx") as HeaderUserControl;
| > huc.TestHeader = "HeaderTest" + i.ToString();
| > this.Accordion1.Panes.Add(new MyPane(new MyContentTemplate()
{
| > UserControl = cuc }, new MyHeaderTemplate(i) { UserControl = huc }));
| > }
| >
| > }
| >
| >
| > }
| >
| > public class MyPane : AccordionPane //In this simple scenario we can
use
| > AccordionPane directly. I use MyPane to leave some room for further
| > customization.
| > {
| > public MyPane(MyContentTemplate c, MyHeaderTemplate h)
| > {
| > this.Header = h;
| > this.Content = c;
| > }
| > }
| >
| > public class MyContentTemplate : ITemplate
| > {
| >
| >
| > public UserControl UserControl;
| > public void InstantiateIn(Control container)
| > {
| > if (UserControl != null)
| > {
| >
| > container.Controls.Add(UserControl);
| > }
| >
| > }
| >
| > }
| >
| > public class MyHeaderTemplate : ITemplate
| > {
| > //I just use Gray color to distinguish header from content. In a
simple
| > scenario we can use the same Template.
| > public UserControl UserControl;
| > object _data;
| > public MyHeaderTemplate(object data) { _data = data; }
| > public void InstantiateIn(Control container)
| > {
| > Panel p = new Panel();
| > container.Controls.Add(p);
| > p.BackColor = System.Drawing.Color.Gray;
| > if (UserControl != null)
| > { p.Controls.Add(UserControl); }
| >
| >
| > }
| >
| > }
| >
| > ContentUserControl.ascx:
| > <%@ Control Language="C#" AutoEventWireup="true"
| > CodeFile="ContentUserControl.ascx.cs" Inherits="ContentUserControl" %>
| > <asp:Button ID="Button1" runat="server" Text="Button"
| > onload="Button1_Load"
| > />
| >
| > ContentUserControl.ascx.cs:
| > using System;
| > using System.Collections;
| > using System.Configuration;
| > using System.Data;
| > using System.Linq;
| > using System.Web;
| > using System.Web.Security;
| > using System.Web.UI;
| > using System.Web.UI.HtmlControls;
| > using System.Web.UI.WebControls;
| > using System.Web.UI.WebControls.WebParts;
| > using System.Xml.Linq;
| >
| > public partial class ContentUserControl : System.Web.UI.UserControl
| > {
| > string _testtext;
| > public string TestText {
| > get
| > {
| > return _testtext;
| > }
| > set { _testtext = value; }
| > }
| >
| > protected void Button1_Load(object sender, EventArgs e)
| > {
| > this.Button1.Text = _testtext;
| >
| > }
| > }
| >
| > HeaderUserControl.ascx:
| > <%@ Control Language="C#" AutoEventWireup="true"
| > CodeFile="HeaderUserControl.ascx.cs" Inherits="HeaderUserControl" %>
| > <asp:Label ID="Label1" runat="server" Text="Label"
| > onload="Label1_Load"></asp:Label>
| >
| > HeaderUserControl.ascx.cs:
| > using System;
| > using System.Collections;
| > using System.Configuration;
| > using System.Data;
| > using System.Linq;
| > using System.Web;
| > using System.Web.Security;
| > using System.Web.UI;
| > using System.Web.UI.HtmlControls;
| > using System.Web.UI.WebControls;
| > using System.Web.UI.WebControls.WebParts;
| > using System.Xml.Linq;
| >
| > public partial class HeaderUserControl : System.Web.UI.UserControl
| > {
| > string _testheader;
| > public string TestHeader
| > {
| > get
| > {
| > return _testheader;
| >
| > }
| > set
| > {
| > _testheader = value;
| > }
| > }
| >
| > protected void Label1_Load(object sender, EventArgs e)
| > {
| > this.Label1.Text = _testheader;
| > }
| > }
| >
| >
| > Please test my code to see if it's what you need and feel free to ask if
| > you have further questions.
| >
| > Regards,
| > Allen Chen
| > Microsoft Online Community Support
| >
| >
| > Delighting our customers is our #1 priority. We welcome your comments
and
| > suggestions about how we can improve the support we provide to you.
Please
| > feel free to let my manager know what you think of the level of service
| > provided. You can send feedback directly to my manager at:
| > (e-mail address removed).
| >
| > ==================================================
| > Get notification to my posts through email? Please refer to
| >
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.
| >
| > Note: The MSDN Managed Newsgroup support offering is for non-urgent
issues
| > where an initial response from the community or a Microsoft Support
| > Engineer within 1 business day is acceptable. Please note that each
follow
| > up response may take approximately 2 business days as the support
| > professional working with you may need further investigation to reach
the
| > most efficient resolution. The offering is not appropriate for
situations
| > that require urgent, real-time or phone-based interactions or complex
| > project analysis and dump analysis issues. Issues of this nature are
best
| > handled working with a dedicated Microsoft Support Engineer by
contacting
| > Microsoft Customer Support Services (CSS) at
| >
http://support.microsoft.com/select/default.aspx?target=assistance&ln=en-us.
| > ==================================================
| > This posting is provided "AS IS" with no warranties, and confers no
| > rights.
| >
| > --------------------
| > | Thread-Topic: Inclusion of user control within custom control
| > | thread-index: Ackkb+hIoSw9Bbo2QfiVKwNIfLYdyg==
| > | X-WBNR-Posting-Host: 65.55.21.8
| > | From: =?Utf-8?B?UmljaEI=?= <[email protected]>
| > | Subject: Inclusion of user control within custom control
| > | Date: Thu, 2 Oct 2008 02:19:01 -0700
| > | Lines: 16
| > | Message-ID: <[email protected]>
| > | MIME-Version: 1.0
| > | Content-Type: text/plain;
| > | charset="Utf-8"
| > | Content-Transfer-Encoding: 7bit
| > | X-Newsreader: Microsoft CDO for Windows 2000
| > | Content-Class: urn:content-classes:message
| > | Importance: normal
| > | Priority: normal
| > | X-MimeOLE: Produced By Microsoft MimeOLE V6.00.3790.3119
| > | Newsgroups: microsoft.public.dotnet.framework.aspnet
| > | Path: TK2MSFTNGHUB02.phx.gbl
| > | Xref: TK2MSFTNGHUB02.phx.gbl
| > microsoft.public.dotnet.framework.aspnet:77116
| > | NNTP-Posting-Host: tk2msftibfm01.phx.gbl 10.40.244.149
| > | X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
| > |
| > | I am trying to create a project using the ASP.NET AJAX accordion
| > control.
| > I
| > | would like to dynamically add panes to the control with a form
template
| > added
| > | when the pane is added. I have tried unsuccessfully in creating the
| > whole
| > | pane as a user control and have succeeded in adding the pane and then
| > | dynamically adding the content which is a user control to the pane,
| > | dynamically within the page.
| > |
| > | However I would like to have a single pane control which I can add
which
| > | includes the header and content. I therefore was trying to find a way
to
| > | create a custom control derived from Pane which has the User control
as
| > the
| > | content. I cannot however find a way to add the user control to the
| > custom
| > | control. Is this possible to do, or do I need to just create the
content
| > from
| > | the standard controls rather than as a user control?
| > |
| > | Thanks,
| > | Richard
| > |
| >
|
|
|
 
R

RichB

Thanks Allen, exactly what I wanted... I had tried using Page.LoadControl in
the constructor, but received the NullReferenceException so thought that
this was a dead end.

Think I need to investigate deeper exactly what happens in the page
lifecycle, and in hindsight I probably could have asked the question better.

Many thanks though.

Richard
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top