Question

I would like to make a custom button, that will display 3 data bound labels and some other text. I would like this button to act fully like a asp:button control. Currently The only idea I have is to surround the labels with a div, trigger the divs click event to use a javascript event which causes a postback. I do not want this, I would like to create a custom button that wires up the postback like a normal asp:button control does. Any ideas on how to do this would be great thank you very much.

    <div class="someClass">
        <div>
          <asp:Label ID="lblONE" runat="server" Text='ONE'></asp:Label>
        </div>
        <div>
          <asp:Label ID="lblTWO" runat="server" Text='TWO'></asp:Label>
        </div>
        <div>
          <asp:Label ID="lblTHREE" runat='server' Text='THREE'></asp:Label>
        </div>
   </div>

I have applied css to the elements and want the button to end up looking like this. Except where it says bob steve mark you can sub in ONE TWO THREE respectively

Button Layout

Answer 1

You can achieve custom layout by using LinkButton (as LinkButton implements IButtonControll by default)

<style type="text/css">
.button {
    border: solid thin black; text-decoration: none; display: block; height: 40px;
}
.one {
    color: green; text-transform: uppercase;
}
.two {
    color: red; text-transform: lowercase;
}
.three {
    color: blue; text-transform: capitalize;
}
</style>

    <asp:LinkButton runat="server" ID="LinkButton1" CssClass="button">
    <div class="one">ONE</div>
    <div class="two">TWO</div>
    <div class="three">THREE</div>
    </asp:LinkButton>

// as you need DataBinding, so

    <asp:LinkButton runat="server" ID="LinkButton1" CssClass="button">
    <div class="one"><%#Eval("ONE")%></div>
    <div class="two"><%#Eval("TWO")%></div>
    <div class="three"><%#Eval("THREE")%></div>
    </asp:LinkButton>