C# code behind for Button Click Event, ASP.NET

Question

I'm working with HTML provided by coworker in .aspx and I need to program in .aspx.cs(C#) the functionality of the button he created using HTML. The code I'm dealing with is as follows:

<div>
    <button style="padding: 10px; margin-bottom: 10px;" class="w3-round w3-blue">Ship</button>
    <button style="padding: 10px; margin-bottom: 10px;" class="w3-round w3-blue">Rate</button>
</div>

I'm new to HTML but in looking at solutions to similar questions I often see the HTML code for a functional button looking more like

<button type="submit" runat="server" id="btnLogin" class="button" onclick="btnLogin_Click();">

and sometimes with an

<asp:

at the beginning. I've tried simply adding the runat and onclick fields to the HTML that correspond with a C# method in the aspx.cs code behind but I haven't been able to make the button click actually trigger the method in the code behind. I've assumed that if I add the method with the name that follows onclick to the C# aspx.cs code then it would simply execute this upon the clicking of the button but I'm clearly mistaken.

Can I program the button's functionality in the code behind without changing the HTML provided to me? Or must I alter the HTML first and if so how?

Answer 1

You could probably get away with adding the runat="server" attribute to your buttons but I've never tried it and frankly, using proper web controls would be the best way to go.

Replacing them shouldn't change the look and feel of the page at all. Just add CssClass="xxx" to apply the css if there is any, otherwise they render to standard html elements anyway.

Your markup should look something like this:

<asp:Button runat="server" id="btnLogin" Text="Log In" OnClick="btnLogin_Click" />

The matching event handler in your code would look like this:

protected void btnLogin_Click(object sender, EventArgs e)
{
    // Here's where you do stuff.
}