ASP.NET asp:Button vs. a href - CSS Styling

Question

Excuse the 'noob' question, but can someone please explain the way ASP.NET's buttons work. I'm trying to style my buttons in ASP.NET which is driven by server side event handlers in C#. ie click on button, and write the values back to SQL Server. Obviously this doesn't work for a href?

<a href="#" class="myStyle">Submit</a>

<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="myStyle" />

Can a ASP.NET site look as good as a raw-coded HTML page, with loads of jQuery/js addons?

Answer 1

Yes, you can add jQuery & js to ASP.NET sites. If you're looking for the hyperlink style, but the ASP.NET functionality, try to use ASP.NET LinkButtons

<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>

Remember this - ASP.NET makes doing work on the SERVER easier. jQuery & js make doing work on the CLIENT easier.

Generally ASP.NET's buttons are easy drag and drop pieces that you can double click on during development and add code behind to do some processing.

In order for us to help you with your styling issues though, you'd have to show us the CSS you're using.

Answer 2

I was actually looking for a nice way of displaying "Windows Buttons". I found a nice solution... Here is the code:

.aspx code:

<asp:Button ID="btnInsert" runat="server" CssClass="btn_normal" Text="Add" OnClick="btnInsert_Click" />

.css code:

.btn_normal
{
    background-color: #f5f5f5;
    border: 1px solid #dedede;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #565656;
    height: 25px;
}
.btn_normal:hover
{
    font-family: Arial, sans-serif;
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
    font-size: 12px;
    height: 25px;
}
.btn_normal:active
{
    font-family: Arial, sans-serif;
    background-color: #529214;
    border: 1px solid #C6D880;
    color: #fff;
    font-size: 12px;
    height: 25px;
}

Result: