Difference between button and asp:button onclick

Question

I am new to developing in asp.net for making web sites.

What is the difference between an asp:Button and an input button?

Code 1
aspx code

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />

Codebehind

protected void Button1_Click(object sender, EventArgs e)
{
    //Do somthing
}

Code 2
aspx code

<input id="Submit1" type="submit" value="submit" onclick="return Submit1_onclick()" />  


<script language="javascript" type="text/javascript">
// <![CDATA[

function Submit1_onclick() {
    //Do somthing
}

// ]]>
</script>

Felipe Oriani · Accepted Answer · 2015-04-17T19:48:04.263

24

The first code it is a server side code. When you add a tag asp:button in your webform, the asp.net will render an input type="button" for you and when you click this button, it will submit a post to the same page (this is called postback) and will processing the life cycle and asp.net event associated with this button. The same is valid for every server control such as TextBoxes (render input type='text'), Panels (renders divs), Checkboxes (render input type='checkbox'), Labels (render spans) etc...

In the second code, you have the code that first one will render (an input type = 'button'), but associated with an event in the client-side javascript.

You can also associate a client-side event in a tag asp:button, take a look at the OnClientClick property.

edited Apr 17 '15 at 19:48

answered Jan 13 '13 at 18:30

Felipe Oriani

37,948
19
131
194

1

Your answer explained me a lot. Thank you.I have poor knowledge on this area.I would really appropriated if you could provide me good tutorial to study. – New Developer Jan 13 '13 at 18:42
1

You can search something about the asp.net life cyle http://msdn.microsoft.com/en-us/library/ms178472(v=vs.100).aspx and the server controls, how the postback works. You have to kkeep in mind that every web technology alwsys render the web standards because that is what the browsers understand. Now if you are starting in web development, I recommend you first study the web standards such as `html`, `css` and `javascript`. – Felipe Oriani Jan 13 '13 at 18:49

score 7 · Answer 2 · answered Jan 13 '13 at 18:41

7

asp:Button is an asp.net server control which fire an event on the server side.

<input id="Submit1" type="submit"

is a client side button of type submit, but it can act as a server side button as well by adding

runat="server" and onserverclick="eventname"

answered Jan 13 '13 at 18:41

Alex

5,971
11
42
80

after executing the `onclick` event at the server side, will it return the handle back to the page? – New Developer Jan 13 '13 at 18:49
about which button are you talking? – Alex Jan 13 '13 at 18:50
for the inout type submit without the onclick event is a client side event and not a server side – Alex Jan 13 '13 at 18:51
the onclick on the server side button will run at the server and will go through the page life cycle events that are in your page and outside the !IsPostBack, read a little about page life cycle here: http://msdn.microsoft.com/en-us/library/ms178472(v=vs.100).aspx – Alex Jan 13 '13 at 18:53
Thank you.Beg your pardon, if me questions are so foolish. – New Developer Jan 13 '13 at 18:55
a question that makes u learn any new thing is never foolish my friend :) don't worry – Alex Jan 13 '13 at 18:56

score 6 · Answer 3 · answered Jan 13 '13 at 18:29

6

The first is a server side control and the event handler is executed on the server in C#. Clicking the button will cause a postback and all information in the form will be posted to the server for processing, including a call to the click event handler.

The second is fully client side and the event handler is executed in the browser in JavaScript.

answered Jan 13 '13 at 18:29

Oded

489,969
99
883
1,009

That means according to the first sample code once user click on the button, from is submit to server.That means **action** page is the same page? – New Developer Jan 13 '13 at 18:38

score 4 · Answer 4 · answered Jan 13 '13 at 18:31

to my understanding you have to keep in mind that there is a cliend side code that will execute, for example javascript in your browser, and asp/c# code that will execute on the server.

So having this control:

 <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />

Button1_Click will execute on the server, in microsoft world it is IIS, on the other hand you have just a pure html control, where you hook up a javascript function for the click event

 <input id="Submit1" type="submit" value="submit" onclick="return Submit1_onclick()" />

So the server side has nothing to do with this part, this code will execute on your machine, in your browser.

according to first code, If I place `action` and `method` attributes for the form, will it work? — New Developer, Jan 13 '13 at 18:46

score 3 · Answer 5 · answered Apr 03 '13 at 09:56

A mí me funcionó así:

1.- En el botón:

 <input type="submit" id="btnAccept" value="Log In" runat="server" onserverclick="btnAccept_Click">

2.- En el codebehind:

Protected Sub btnAccept_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)

Difference between button and asp:button onclick

5 Answers5

Linked