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?

Freya

The ones that are prefixed with asp: are Web Forms controls. You can read all about them in the documentation. – Standifer

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.
}

Klee

Answer 2

you need to replace the

onclick="btnLogin_Click();"

with

onclick="btnLogin_Click"

because the onClick property of asp.net buttons need to contain the name of the function it calls in the aspx.cs file and not the actual call.

Scup

Answer 3

<button type="submit" runat="server" id="btnLogin"  onserverClick="btnLogin_Click1">login </button> 

just replace the onClick with onserverClick

Icj

Answer 4

My suggestion would be to change the HTML control to <asp:Button /> and have the event handler wired up by ASP.NET. Syntax would look something like below

<asp:Button ID="Test" runat="server" Text="Button" OnClick="Test_Click" />

Lawlor

Answer 5

There are ways to reach asp.net code behind handler from html controls. You could try adding onserverclick handler or you could do a postback with arguments and add handler to the postback in contructor.

Few links to help you with it:

https://forums.asp.net/t/1650304.aspx?Calling+code+behind+function+from+a+html+button

calling server side event from html button control

Serviceman

Answer 6

If you are using a tool like Visual Studio/Express bring up the page in question (the aspx page).

From the controls toolbar drag a button over to the page.

If you double click the button in design view it will automatically create the event handler in code behind.

The button control has a couple of properties OnClick and OnClientClick. Use OnClientClick to trigger any JavaScript on the page.

Hope it helps

Clos