calling server side event from html button control
Question
I am creating an application using ASP.Net, in which I have a HTML button on an aspx page.
<input type="submit" id="btnSubmit" runat="server"
style="background-image:url(App_Themes/default/Images/quiz_class/btn_submit.jpg);
width:80px; height:29px;" onserverclick="btnSubmit_ServerClick" />
But when I click on the button then it not calling the btnSubmit_ServerClick event on the aspx.cs page.
I don't want to use asp control button.
Please help..
7 answers
solution1
37 2012-09-18 09:27:35
If you are OK with converting the input button to a server side control by specifying runat="server" , and you are using asp.net , an option could be using the HtmlButton.OnServerClick property.
<input id="foo "runat="server" type="button" onserverclick="foo_OnClick" />
This should work and call foo_OnClick in your server side code. Also notice that based on Microsoft documentation linked above, you should also be able to use the HTML 4.0 tag.
solution2
5 2013-06-20 15:15:01
On your aspx page define the HTML Button element with the usual suspects: runat, class, title, etc.
If this element is part of a data bound control (ie: grid view, etc.) you may want to use CommandName and possibly CommandArgument as attributes. Add your button's content and closing tag.
<button id="cmdAction"
runat="server" onserverclick="cmdAction_Click()"
class="Button Styles"
title="Does something on the server"
<!-- for databound controls -->
CommandName="cmdname">
CommandArgument="args..."
>
<!-- content -->
<span class="ui-icon ..."></span>
<span class="push">Click Me</span>
</button>
On the code behind page the element would call the handler that would be defined as the element's ID_Click event function.
protected void cmdAction_Click(object sender, EventArgs e)
{
: do something.
}
There are other solutions as in using custom controls, etc. Also note that I am using this live on projects in VS2K8.
Hoping this helps. Enjoy!
solution3
2 2011-08-25 12:57:14
The easiest way to accomplish this is to override the RaisePostBackEvent method.
<input type="button" ID="btnRaisePostBack" runat="server" onclick="raisePostBack();" ... />
And in your JavaScript:
raisePostBack = function(){
__doPostBack("<%=btnRaisePostBack.ClientID%>", "");
}
And in your code:
protected override void RaisePostBackEvent(IPostBackEventHandler source, string eventArgument)
{
//call the RaisePostBack event
base.RaisePostBackEvent(source, eventArgument);
if (source == btnRaisePostBack)
{
//do some logic
}
}
solution4
0 2016-11-22 16:59:17
just use this at the end of your button click event
protected void btnAddButton_Click(object sender, EventArgs e)
{
... save data routin
Response.Redirect(Request.Url.AbsoluteUri);
}
solution5
0 2018-06-26 14:14:17
You may use event handler serverclick as below
//cmdAction is the id of HTML button as below
<body>
<form id="form1" runat="server">
<button type="submit" id="cmdAction" text="Button1" runat="server">
Button1
</button>
</form>
</body>
//cs code
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
cmdAction.ServerClick += new EventHandler(submit_click);
}
protected void submit_click(object sender, EventArgs e)
{
Response.Write("HTML Server Button Control");
}
}
solution6
0 2021-11-11 22:47:14
For people trying dealing with a checkbox, exactly none of these solutions work since you'd need it to be an HTML input (and not an HTML button).
SPArcheon's answer doesn't work as soon as you add type="checkbox" which is needed for the .checked operator to work in the code-behind. As soon as you add type="checkbox" , there is no OnServerClick , ServerClick , nor CheckedChanged for an HTML Input box. All you have is ServerChanged , which is useless because it requires a full page refresh.
I actually had to use CSS to make an HTML button resemble a checkbox using Bootstrap's btn-outline-secondary class as a starting point.
.btn-checkbox-unchecked {
padding: .35rem .35rem !important;
font-size: .875rem !important;
line-height: .5 !important;
border-radius: .15rem !important;
border-width: .20em !important;
}
.btn-checkbox-checked {
padding: .1rem .1rem !important;
font-size: .6rem !important;
line-height: .5 !important;
border-radius: .15rem !important;
border-width: .20em !important;
border-color: #0060df !important;
background-color: #0060df !important;
}
.btn-checkbox:hover {
border-color: #676774 !important;
background-color: #0250BB !important;
}
In the aspx:
<button class="btn btn-xs btn-outline-secondary btn-checkbox" id="btnFakeCheckbox" runat="server" clientidmode="static" autopostback="true" data-bs-toggle="button" autocomplete="off"></button>
Then in your code-behind, you can set attributes (classes) accordingly:
btnFakeCheckbox.Attributes.Add("class", "btn btn-xs btn-secondary btn-checkbox-checked active")
btnFakeCheckbox.Attributes("aria-pressed") = "true"
btnFakeCheckbox.InnerHtml = "<i class='fas fa-check'></i>"
(Note the font awesome check icon on the last line, you'll have to include that in your aspx)
If anyone has a solution for a Bootstrap 5 toggle switch, let me know.
solution7
0 2011-08-25 10:51:53
Please follow this tutorial: http://decoding.wordpress.com/2008/11/14/aspnet-how-to-call-a-server-side-method-from-client-side-javascript/
On a sidenote: ASP.NET generates a client side javascript function that you can call from your own functions to perform the postback you want.
-- More info on hijacking the postback event:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.