What's the best way to "wrap up" HTML with a User Control?

Question

I currently have this block of code (or something similiar) on almost all my pages:

<div class="tasks">
   <ul>
       <li><a href="#">Do something</a></li>
       <li><a href="#">Do something else</a></li>
   </ul>
</div>

However, I need to turn this into a user control. I'd like something that looks like the following:

<foo:TaskList id="foo" runat="server">
    <Task><a href="#">Do something</a></Task>
    <Task><a href="#">Do something else</a></Task>
</foo:TaskList>

or even:

<foo:TaskList id="foo" runat="server">
   <Tasks>
       <ul>
           <li><a href="#">Do something</a></li>
           <li><a href="#">Do something else</a></li>
       </ul>
   </Tasks>
</foo:TaskList>

I realise that I'm using the "Template" concept there and I also realise that that's not how you're meant to use Template user controls. So.. how am I meant to wrap up a variable piece of HTML into a User Control?

PS. I don't want to use DataBinding or code-behind to populate this control. All the items must be visible in the ASPX file.

Answer 1

Look at below these class can give you the below markup in your .aspx pages. You can keep on going deeper. All you need to have is a property on the parent object. So it is pretty simple to achieve.

<Test:TestUserControl>
    <Tasks>
        <Test:Task Value="Some Value" Text="Some Text" />
        <Test:Task Value="Another Value" Text="More Text" />
    </Tasks>
</Test:TestUserControl>

namespace TestWebControls
{
    public class TestUserControl : WebControl
    {

        private List<Task> _Tasks;

        [NotifyParentProperty(true)]
        [PersistenceMode(PersistenceMode.InnerProperty)]
        [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
        public List<Task> Tasks
        {
            get
            {
                return _Tasks;
            }
            set
            {
                _Tasks = value;
            }
        }

        public TestUserControl()
        {

        }
    }

    public class Task : WebControl
    {
        public string Value { get; set; }
        public string Text { get; set; }
    }
}

Now there is more work to be done when it comes to rendering. So look up Server Controls in ASP.NET and you will be able to finish the rest. You would have to create a designer so the controls can be seen at design time. And then a way to render them.

Answer 2

When you say you have the same piece of HTML code on many pages, then you might also want to check out master pages.

A master page allows you to define a common "page frame" that can be reused by several (content-) pages.

(but maybe this suggestion is completely inappropriate, since you probably already know about masterpages).

Answer 3

You cannot pass parameters to UserControls inside the HTML source.

You need to set the parameters in the page's Page_Load event:

public class MyUserControl : UserControl
{
    public void SetTasks(Tasks[] tasks)
    {
        // code
    }
}

and in the page source code:

protected void Page_Load(object sender, EventArgs e)
{
    myUserControl.SetTasks(... tasks ...);
}