Xerratus - How to get ASP.NET 2.0 Button WebControl to render as input type="button"

Tuesday, November 21, 2006

How to get ASP.NET 2.0 Button WebControl to render as input type="button"

While working an ASP.NET 2.0 project today I ran across a problem with the OnClientClick event within the Button WebControl. The problem is that .NET renders this button:

<asp:Button ID="btnAddChoice" runat="server" Text="Add" OnClientClick="AddToListBox(lbxChoices, txtChoiceName);" />

<input type="submit" name="btnAddChoice" value="Add" onclick="AddToListBox(lbxChoices, txtChoiceName);"  />

So when I click on the button, my JavaScript fires correctly but the page then submits -not what I want it to do. Thinking fast, I added a snippet to return false after my client-script ran, like so:

<input type="submit" name="btnAddChoice" value="Add" onclick="AddToListBox(lbxChoices, txtChoiceName);return false;"  />

This however, does not work; the page still submits. After looking at the rendered HTML I can see the problem right away -the button type is submit. What I need is for it to be a type of button.

An input control of type button, will not automatically submit the form. But how do I get .NET to render one?

What I do not want to to is capture it just before it renders and change it there. And I also do not want to try to manipulate the type attribute after it's already been rendered. The solution I found; .NET has a added an attribute (boolean) to the Button WebControl called UseSubmitBehavior. By setting it to false in the WebControl, like so:

<asp:Button ID="btnAddChoice" runat="server" Text="Add" OnClientClick="AddToListBox(lbxChoices, txtChoiceName); return false;" UseSubmitBehavior="false" />

Renders the input control like I want it to, as a button:

<input type="button" name="btnAddChoice" value="Add" onclick="AddToListBox(lbxChoices, txtChoiceName); return false;__doPostBack('btnAddChoice','')"  />

Notice that I still need to stop the execution of the JavaScript by returning false because .NET added __doPostBack('btnAddChoice','') to the onclick event.

But the main difference is that by returning false the page DOES NOT submit. Now, I can go back to writing my client-script to manipulate the page and capture those changes when the real submit button is clicked and the server code takes over.

Tuesday, November 21, 2006 @ 06:06 PM (-08:00) Pacific Standard Time

Comments (7)

tags: Programming

admin: Edit | Remove

Thursday, November 23, 2006 11:06:04 AM (Pacific Standard Time, UTC-08:00)

I think there're 2 ways to go here.

1. If your functionality makes sense ONLY when JavaScript is enabled, then you should create that button on the client side, and yes, make it a button.

2. If you depend on that functionality (and I think this is your case here), you should not expect JavaScript. Make it work even when it's not enabled. So, the button here has to be a submit button. There will be no __doPostBack here, and your first try would almost be the way to go, except that, instead of returning false, which doesn't prevent the click event to propagate, you have to set the returnValue of the intrinsic event to false, something like:

event.returnValue = false; // IE
// and/or
event.preventDefault(); // FF

This means more work, every Add/Remove will be made server side without JS and client side with JS, and you have to code all of that, so, as always, it depends on your project.

Adi

Sunday, November 26, 2006 5:31:37 PM (Pacific Standard Time, UTC-08:00)

Actually, I DO NOT want the form to submit AT ALL when this button is clicked. The action I want the button to do it solely client-side (add the contents of a textbox to a listbox). There is another button below that submits the form to the server. I could have easily created an input control without .NET and wired up my JavaScript that way. But I wanted to use the .NET control to keep things consistent.

This is also part of a company intranet application so we can safely assume browser and JavaScript usage.

So doing this all server-side is actually not a route we'd like to go with this piece of the application because posting back too many times is slow and clunky.

John McGuinness

Tuesday, November 28, 2006 6:25:26 AM (Pacific Standard Time, UTC-08:00)

Nice hidden property, but is there any reason the button needs to exist server-side at all? I would have just used a standard html button there.

Wyatt Barnett

Tuesday, November 28, 2006 5:18:09 PM (Pacific Standard Time, UTC-08:00)

You're absolutely right Wyatt but for consistencies sake, I wanted to use a server control.

John McGuinness

Thursday, July 26, 2007 12:49:16 PM (Pacific Standard Time, UTC-08:00)

There is a "UseSubmitBehavour" property of asp:Button, just set it to false and it will render as <input type="button">

Andrey

Thursday, July 26, 2007 5:02:47 PM (Pacific Standard Time, UTC-08:00)

Andrey, not sure what to tell you but the post basically describes just that; how to use the "UseSubmitBehavior" to get the input type equal to button -you just have to read the entire thing first.

At first glance, it looks like I just switched and used the input tag but that was just a test to see why my Javascript wasn't working. Once I got that figured out, I searched and found the UseSubmitBehavior functionality.

John McGuinness

Friday, February 08, 2008 6:24:19 AM (Pacific Standard Time, UTC-08:00)

Ah...very nice. I am doing exactly what you are...and have been beating my head for a couple of days. return false; saved the day :)

As a side note: the reason why I want it a .NET button is I want to make it visible/hidden...which I control from the DLL.

Cheers.

Name
E-mail
Home page

	Remember Me
Comment (Some html is allowed: `a@href@title, b, blockquote@cite, em, i, strike, strong, sub, super, u`) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.
Enter the code shown (prevents robots):
Live Comment Preview