Asp.Net/HTML: HTML Button's Onclick Property Inside ASP.NET (.Cs)

ASP.NET/HTML: HTML button's onClick property inside ASP.NET (.cs)

You can do that on any server control and this button is made a server control by defining "runat=server". The problem is probably in your definition of the event:

<button ... runat="server" ... onServerClick="btnLogin_Click" />

You don't need "();" there...

Apart from that can you explain why you don't use the <asp:Button> here because I don't really see a problem with that...

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

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

How can I use the button tag with ASP.NET?

This is an old question, but for those of us unlucky enough still having to maintain ASP.NET Web Forms applications, I went through this myself while trying to include Bootstrap glyphs inside of built-in button controls.

As per Bootstrap documentation, the desired markup is as follows:

<button class="btn btn-default">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    Search
</button>

I needed this markup to be rendered by a server control, so I set out to find options.

Button

This would be the first logical step, but —as this question explains— Button renders an <input> element instead of <button>, so adding inner HTML is not possible.

LinkButton (credit to Tsvetomir Tsonev's answer)

Source

<asp:LinkButton runat="server" ID="uxSearch" CssClass="btn btn-default">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    Search
</asp:LinkButton>

Output

<a id="uxSearch" class="btn btn-default" href="javascript:__doPostBack('uxSearch','')">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    Search
</a>

Pros

• Looks OK
• Command event; CommandName and CommandArgument properties

Cons

• Renders <a> instead of <button>
• Renders and relies on obtrusive JavaScript

HtmlButton (credit to Philippe's answer)

Source

<button runat="server" id="uxSearch" class="btn btn-default">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    Search
</button>

Result

<button onclick="__doPostBack('uxSearch','')" id="uxSearch" class="btn btn-default">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    Search
</button>

Pros

• Looks OK
• Renders proper <button> element

Cons

• No Command event; no CommandName or CommandArgument properties
• Renders and relies on obtrusive JavaScript to handle its ServerClick event

---

At this point it is clear that none of the built-in controls seem suitable, so the next logical step is try and modify them to achieve the desired functionality.

Custom control (credit to Dan Herbert's answer)

NOTE: This is based on Dan's code, so all credit goes to him.

using System.Web.UI;
using System.Web.UI.WebControls;

namespace ModernControls
{
    [ParseChildren]
    public class ModernButton : Button
    {
        public new string Text
        {
            get { return (string)ViewState["NewText"] ?? ""; }
            set { ViewState["NewText"] = value; }
        }

        public string Value
        {
            get { return base.Text; }
            set { base.Text = value; }
        }

        protected override HtmlTextWriterTag TagKey
        {
            get { return HtmlTextWriterTag.Button; }
        }

        protected override void AddParsedSubObject(object obj)
        {
            var literal = obj as LiteralControl;
            if (literal == null) return;
            Text = literal.Text;
        }

        protected override void RenderContents(HtmlTextWriter writer)
        {
            writer.Write(Text);
        }
    }
}

I have stripped the class down to the bare minimum, and refactored it to achieve the same functionality with as little code as possible. I also added a couple of improvements. Namely:

• Remove PersistChildren attribute (seems unnecessary)
• Remove TagName override (seems unnecessary)
• Remove HTML decoding from Text (base class already handles this)
• Leave OnPreRender intact; override AddParsedSubObject instead (simpler)
• Simplify RenderContents override
• Add a Value property (see below)
• Add a namespace (to include a sample of @ Register directive)
• Add necessary using directives

The Value property simply accesses the old Text property. This is because the native Button control renders a value attribute anyway (with Text as its value). Since value is a valid attribute of the <button> element, I decided to include a property for it.

Source

<%@ Register TagPrefix="mc" Namespace="ModernControls" %>

<mc:ModernButton runat="server" ID="uxSearch" Value="Foo" CssClass="btn btn-default" >
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    Search
</mc:ModernButton>

Output

<button type="submit" name="uxSearch" value="Foo" id="uxSearch" class="btn btn-default">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    Search
</button>

Pros

• Looks OK
• Renders a proper <button> element
• Command event; CommandName and CommandArgument properties
• Does not render or rely on obtrusive JavaScript

Cons

• None (other than not being a built-in control)

asp.net Button OnClick event not firing

Have you copied this method from other page/application ? if yes then it will not work, So you need to delete the event and event name assigned to the button then go to design and go to button even properties go to onClick event double click next to it, it will generate event and it automatically assigns event name to the button.
this should work

html button on .cs page

You have to use onserverclick instead of the onclick method as this is a client side event of the HTML button control.

<button id="button1" runat="server" onserverclick="Submit_Click">  
Send  
</button>

How do I make a button event with innerhtml in ASP.NET

Just a little sidenote. A month after this post I didn't use innerhtml for showing my products but I used an asp:datalist. For the shopping basket I used asp:literal which worked way better than the innerhtml. This allowed me to use bootstrap 4 which I could use with the innerhtml control.

If you have anymore questions feel free to ask.

---

Related Topics