﻿<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Programming By A Tool &#187; UserControl</title>
	<atom:link href="http://byatool.com/tag/usercontrol/feed/" rel="self" type="application/rss+xml" />
	<link>http://byatool.com</link>
	<description>Voted best site in existence by a top fictious rating site!</description>
	<lastBuildDate>Tue, 07 Sep 2010 14:23:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Add Controls to Control in ASP.Net (With Less Pulp)</title>
		<link>http://byatool.com/ui/add-controls-to-control-webcontrol-or-usercontrol-whatever-the-kids-say/</link>
		<comments>http://byatool.com/ui/add-controls-to-control-webcontrol-or-usercontrol-whatever-the-kids-say/#comments</comments>
		<pubDate>Wed, 17 Dec 2008 22:24:32 +0000</pubDate>
		<dc:creator>Sean</dc:creator>
				<category><![CDATA[UI]]></category>
		<category><![CDATA[ASP.Net]]></category>
		<category><![CDATA[UserControl]]></category>
		<category><![CDATA[WebControl]]></category>

		<guid isPermaLink="false">http://byatool.com/?p=283</guid>
		<description><![CDATA[So this should be a fairly easy showing and you&#8217;ll be on your way quickly. Hell most likely you won&#8217;t finish this sentence before going somewhere else. BUT for those who brave this post, you will be rewarded&#8230; I hope. So here&#8217;s the problem, you have a UserControl/WebControl/ExtenderControl/ScriptControl/&#8230; (Seriously?) that you want to be able [...]]]></description>
			<content:encoded><![CDATA[<p>So this should be a fairly easy showing and you&#8217;ll be on your way quickly.   Hell most likely you won&#8217;t finish this sentence before going somewhere else.  BUT for those who brave this post, you will be rewarded&#8230; I hope.</p>
<p>So here&#8217;s the problem, you have a UserControl/WebControl/ExtenderControl/ScriptControl/&#8230; (Seriously?) that you want to be able to add controls to in the markup like thus:</p>
<pre><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">SomeControl</span><span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ControlList</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">asp</span><span style="color: #0000ff;">:</span><span style="color: #800000;">Label</span> <span style="color: #0000ff;">/&gt;</span>
    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">asp</span><span style="color: #0000ff;">:</span><span style="color: #800000;">Label</span> /<span style="color: #0000ff;">&gt;</span>
  <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ControlList</span><span style="color: #0000ff;">&gt;</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">SomeControl</span><span style="color: #0000ff;">&gt;</span></pre>
<p>As you see here, the idea is that SomeControl actually can dynamically house controls based on the markup. Seems like this should be hard, but in reality it&#8217;s pretty simple. First start with creating a user control, which I hope you know how to do. (I&#8217;m calling it ParentControl) Second open up the class file and let&#8217;s add some stuff.</p>
<pre>    [<span style="color: #008080;">ParseChildren</span>(<span style="color: #0000ff;">true</span>)]
    [<span style="color: #008080;">PersistChildren</span>(<span style="color: #0000ff;">false</span>)]
<span style="color: #0000ff;">    public</span> <span style="color: #0000ff;">partial</span> <span style="color: #0000ff;">class</span> <span style="color: #008080;">ParentControl</span> : <span style="color: #008080;">UserControl
</span>    {
        <span style="color: #0000ff;">public</span> <span style="color: #333333;">ParentControl</span>()
        {
            addedControls = <span style="color: #0000ff;">new</span> <span style="color: #008080;">List</span>&lt;<span style="color: #008080;">WebControl</span>&gt;();
        }

        <span style="color: #0000ff;">private</span> <span style="color: #008080;">List</span>&lt;<span style="color: #008080;">WebControl</span>&gt; addedControls;

        <span style="color: #0000ff;">public</span> <span style="color: #008080;">List</span>&lt;<span style="color: #008080;">WebControl</span>&gt; AddedControls
        {
            <span style="color: #0000ff;">get</span>
            {
                <span style="color: #0000ff;">return</span> addedControls;
            }
        }
    }</pre>
<p>And honestly, that&#8217;s the code needed but I&#8217;ll give a literary once over to make sure things are clear.</p>
<p>So first off you have to add a list of controls to the eh&#8230; control and create a property that is used to access it and this can actually be done verbosely:</p>
<pre>        <span style="color: #008000;">//Field
</span>        <span style="color: #0000ff;">private</span> <span style="color: #008080;">List</span>&lt;<span style="color: #008080;">WebControl</span>&gt; addedControls;

        <span style="color: #008000;">//Instantiation on constructor</span>
        <span style="color: #0000ff;">public</span> ParentControl()
        {
            addedControls = <span style="color: #0000ff;">new</span> <span style="color: #008080;">List&lt;WebControl&gt;</span>();
        }

        <span style="color: #008000;">//Property to access</span>
        <span style="color: #0000ff;">public</span> <span style="color: #008080;">List</span>&lt;<span style="color: #008080;">WebControl</span>&gt; AddedControls
        {
            <span style="color: #0000ff;">get</span>
            {
                <span style="color: #0000ff;">return</span> addedControls;
            }
        }</pre>
<p>OR the easy way (Which is not what the original example showed:</p>
<pre>        <span style="color: #0000ff;">public</span> <span style="color: #008080;">List</span>&lt;<span style="color: #008080;">WebControl</span>&gt;AddedControls { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span>; }</pre>
<p>As you can see, the 2.0 auto property syntax will actually work for this. So if you like that, you can save yourself some typing.</p>
<p>Ok so now we have a property, and field if you choose, to handle this. Sounds way too easy right? Well the magic is in the attributes:</p>
<pre>    [<span style="color: #008080;">ParseChildren</span>(<span style="color: #0000ff;">true</span>)]
    [<span style="color: #008080;">PersistChildren</span>(<span style="color: #0000ff;">false</span>)]
    <span style="color: #0000ff;">public</span> <span style="color: #0000ff;">partial</span> <span style="color: #0000ff;">class</span> <span style="color: #008080;">ParentControl</span> : <span style="color: #008080;">UserControl</span></pre>
<p>And you&#8217;re all set. Now the markup:</p>
<pre>    <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">userControl</span>:<span style="color: #800000;">ParentControl</span> <span style="color: #ff0000;">ID</span><span style="color: #0000ff;">="ParentControl1"</span> <span style="color: #ff0000;">runat</span><span style="color: #0000ff;">="server"</span> <span style="color: #0000ff;">&gt;</span>
        <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">AddedControls</span>&gt;
            <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">asp</span>:<span style="color: #800000;">Label</span> <span style="color: #ff0000;">ID</span><span style="color: #0000ff;">="labelHi"</span> <span style="color: #ff0000;">runat</span><span style="color: #0000ff;">="server"</span> <span style="color: #0000ff;">/&gt;</span>
        <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">AddedControls</span><span style="color: #0000ff;">&gt;</span>
    <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">userControl</span>:<span style="color: #800000;">ParentControl</span><span style="color: #0000ff;">&gt;</span></pre>
<p>Still waiting for this to get complicated? Well you&#8217;re going to waiting for a long time because that&#8217;s it. When page load comes around will now have a list with the label in it. Pretty nice huh?</p>
<div  class="related_post_title">Related Posts</div><ul class="related_post"><li><a href="http://byatool.com/ui/dynamic-markup-property-collection-for-a-webcontrol/" title="Dynamic Markup Property Collection for a WebControl">Dynamic Markup Property Collection for a WebControl</a></li><li><a href="http://byatool.com/utilities/asp-net-mvc-create-a-link-method-ie-just-give-me-the-stupid-url/" title="ASP.Net MVC: Create a link method&#8230; ie JUST GIVE ME THE STUPID URL">ASP.Net MVC: Create a link method&#8230; ie JUST GIVE ME THE STUPID URL</a></li><li><a href="http://byatool.com/utilities/paging-and-the-entity-framework-skip-and-take-part-4/" title="Paging and the Entity Framework, Skip, and Take Part 4">Paging and the Entity Framework, Skip, and Take Part 4</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://byatool.com/ui/add-controls-to-control-webcontrol-or-usercontrol-whatever-the-kids-say/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
