CODEWITHSUNDEEP
c#asp.nethtml
Ben Hoffman
Ben Hoffman

Reputation: 8261

Turning HTML Div code into a Control

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?

Upvotes: 2

Views: 642

Answers (3)

David Robbins
David Robbins

Reputation: 10046

Another left field approach - create a user control but use jQuery to round the corners for you:

<div class="roundcorner">
    <h1>My Header Information</h1>
    <hr />
    <asp:Label runat="Server" id="label1" />
</div>

Issue the following in javascript:

$(document).ready(function(){
   $('div.roundedcorner').corner();
 });

This eliminates all your extra div's and you can still have a user control that you use at will on the server.

Upvotes: 1

John Rudy
John Rudy

Reputation: 37858

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.

Upvotes: 3

Chris Haas
Chris Haas

Reputation: 55457

(I know I'm going to get in trouble for this from someone)

If its just static content you can just put it in a separate file and INCLUDE it

<!--#INCLUDE VIRTUAL="/_includes/i_yourfile.htm" -->

(File name, extension and location are arbitrary)

Upvotes: 0

Related Questions