Question

I have bunch of HTML code I am using to make rounded edge boxes on my controls. Is there a way to take this code and turn it into some kind of control or something so I do not have to keep pasting 10 lines of HTML code around everything I do?

<div id="BottomBody">
    <div class="box1024" >
        <div class="content1024">
            <div class="top1024"></div>
            <h1>My Header Information</h1>
            <hr />
            <p>Some text for everyone!</p>
        </div>
        <div class="bottom1024">
            <div></div>
        </div>
    </div>
</div>

One additional thing to note, the number HTML tags used inside the inner most DIV will change depending on where I use it in my site. So in some cases I will only have 1 tag and 1

tag but in other cases I could have 1 tag, 1

tag, 3 tags, and a HTML table. How can I make that work?

Answer 1

Yes, you’re thinking of a UserControl. Extract the relevant HTML out, paste it into a UserControl .ascx template.

Now in your case, you’ll probably want the text to be customizable, am I right? So you’ll need to replace the <h1> through </p> bit with an ASP.NET label. The resulting .ascx HTML (not counting the @Control directive) will look something like:

<div id="BottomBody">
    <div class="box1024" >
        <div class="content1024">
            <div class="top1024"></div>
            <asp:Label runat="Server" id="label1" />
        </div>
        <div class="bottom1024">
            <div></div>
        </div>
    </div>
</div>

Alternatively, you could do two labels — one for the header, one for the main text. Or even just have the header be runat="Server" itself.

Next, you’ll write a little bit of code in the .ascx code-behind file to expose the label’s (or labels’, as the case may be) Text property. This would probably look something like:

public string Text
{
    get { return label1.Text; }
    set { label1.Text = value; }
}

If you’re in an ASP.NET MVC world, use your Model data instead of a label, and pass in the desired display text string as the model data.

Edit

Addressing the update to the question:

One additional thing to note, the
number HTML tags used inside the inner
most DIV will change depending on
where I use it in my site. So in some
cases I will only have 1 tag and 1

tag but in other cases I could have 1
tag, 1

tag, 3 tags, and a HTML table. How can
I make that work?

The exact same technique, assuming that the content you’re referring to is what’s within <div class="content1024">. The Text property of a label can contain any desired arbitrary HTML, and of course you can pass any arbitrary amount of HTML as a string to the Model if you’re using MVC.