Develop Reference

c# razor, how to use html button to run a method?

I want to use the button to run a c# method how to do that? Now if i make a button with
<button type="button" onclick="#class.method()" >execute method</button>
it just executes that method on page load but doesnt do that on button click.

This can be done using standard form or ajax form.
Option 1 - Standard form:
add asp-page-handler attribute to the button and specify the relevant method name, and on the back end create the relevant method with OnPost prefix.
<form method="post">
<button type="button" asp-page-handler="RunMethod">execute method</button>
</form>
Backend method:
public IActionResult OnPostRunMethod()
{
//do whatever...
}
Option 2 - ajax form:
Use data-ajax-url="?handler=RunMethod" directly inside the form attributes or you can use a script to assign the relevant method handler to the form, with this approach you can use multiple buttons inside the same ajax form:
<form method="post" id="myForm"
data-ajax="true"
data-ajax-method="post"
data-ajax-loading="#loading"
data-ajax-failure="failed"
data-ajax-update="#updateMsg">
<button type="submit" id="RunMethod">execute method</button>
</form>
#section Scripts{
<partial name="_ValidationScriptsPartial" />
<script src="~/lib/jquery-ajax-unobtrusive/dist/jquery.unobtrusive-ajax.min.js"></script>
<script>
failed = function (xhr) {
alert('Status: {xhr.status}, Status text: {xhr.statusText}');
}
$("#RunMethod").on("click", function () {
$("#myForm").attr("data-ajax-url", "?handler=RunMethod");
});
});
</script>
}
Backend method:
public IActionResult OnPostRunMethod()
{
//do whatever...
}
see samples here

You need to create a handler method in the Razor page and use asp-page-handler attribute. See here for more information.

Bootstrap Modal fires but not ASP Button Click event

Basically just like the title says.
Layout:
Page w/ a DataGrid and a dynamic amount of buttons.
Intended functionality:
When one of the buttons is clicked, the modal will show, then the asp button click event will fire.
Functionality as of right now:
ASP Button is clicked, Modal shows, Event will not fire.
Anyone know if its possible to get both to fire?
Here is my modal:
div id="example" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Enter Comments Below:</h3>
</div>
<div class="modal-body">
<h4>Comments</h4>
</div>
<div class="modal-footer">
Call to action
Close
</div>
</div>
Here is the button:
<asp:Button ID="TestButton2" runat="server" Text="Comments"
OnClick="TestButton_Click"/>
Here is the buttons click event from the code Behind.
protected void TestButton_Click(object sender, EventArgs e)
{
// This does something
}
Here is the Jquery that shows the modal when the button is clicked:
<script type="text/javascript">
$('input[name$="TestButton2"]').on("click", function () {
$('#example').modal('toggle');
return false;
});
</script>
Anyone have any ideas? I've thought about a hidden field but don't know if that would really work. It may just not be possible with WebForms but thought I would ask.
Thanks in advance for your help.

call java script using ClientScriptManager on your button click
protected void TestButton_Click(object sender, EventArgs e)
{
// do something then call modal
ClientScript.RegisterStartupScript(GetType(), "Show", "<script> $('#example').modal('toggle');</script>");
}

Loading dynamic data in JQuery Dialog with ASP.NET postback issue

Im well aware of the fact that the problem im having has been asked and discussed on SO before, but i've read them all countless times and none of them actually helped me solve my problem.
I am working with Visual studio, ASP.NET and C#.
Here's what i want to do exactly:
I have a JQuery dialog with a Label inside of it. I also have a button.
When that button is pressed,i want to jump inside the button's click event and set a text for the label inside the JQuery Dialog. Then i want the dialog to open, displaying the label with the text that has just been set in my button's click handler.
Here's the content that should be in my JQuery dialog (note that i've simplified my code for this question):
<div id="dialog" title="Basic dialog">
<asp:Label ID="Label1" runat="server" ></asp:Label>
</div>
On my page i I have an ASP.NET button, with an onClick event. In the code behind, inside the click event for my button i set the text for Label1.
This is my button:
<asp:LinkButton ID="testButton" runat="server" onClick="button_Click" text="click me"/>
and here's the code behind click handler:
protected void button_Click(object sender, EventArgs e)
{
Label1.Text = "Hello";
}
This actually works, but not as i want it to.
My problem:
For some reason the label's text only gets set the SECOND time i press the button. So that means, the first time i click the button, the dialog opens, displays nothing, then the dialog dissapears and the page posts back. The second time i press the button, i see that the text has been set for the label, but then again the dialog instantly dissapears and the page posts back.
i've tried adding the following to my button: OnClientClick="return false;"
When i do this the postback issue is gone, but now my button's click event doesn't fire.
I've also tried to add the following to my script: event.preventDefault(); This causes the same problem as with the return false;, the page doesn't postback but simply does not jump into the button's click event.
here's my dialog script:
<script>
$(function () {
$('#dialog').parent().appendTo($("form:first"))
$("#dialog").dialog(
{
autoOpen: false,
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
}
);
$("#testButton")
.button()
.click(function openConfirmDialog() {
$("#dialog").dialog("open")
});
});
</script>
Basically all i want to do is click a button to set a label's text, open a dialog, and keep that dialog open until a user closes it.
I might be missing something, but it amazes me to see how hard it is to do something as simple as i want to do.
kind regards,
Jane

When page is posted back by clicking on button control, dialog is refreshed and closed. You need to implement a way to show dialog box when page is posted back with data within in.
i: In first step create a variable at code behind. e.g
protected string PostBackOption ="";
ii: Add check to set dialog option text when page is post back in page load or page pre render event. e.g
if (Page.IsPostBack)
{
PostBackOption = "$(\"#dialog\").dialog(\"open\");";
}
iii: Now call this variable within javascript as shown below.
<script>
$(function () {
$('#dialog').parent().appendTo($("form:first"))
$("#dialog").dialog(
{
autoOpen: false,
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
}
);
$("#<%= testButton.ClientID %>")
.button()
.click(function openConfirmDialog() {
$("#dialog").dialog("open")
});
<%=PostBackOption %>
});
Now when you click on click me button, page will postback, after post back dialog will not dis appear and label will be populated with text "hello" properly.

I created a simple example decides whether or not to autoOpen based on your Label containing a value. The dialog goes away due to the page refreshing. You could use UpdatePanels if you wanted to eliminate the whole page posting back, or you could do something like this:
HTML and jQuery:
<!DOCTYPE html>
<html>
<head runat="server">
<meta charset="utf-8" />
<title>jQuery Dialog Demo</title>
<link rel="stylesheet" type="text/css" href="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/cupertino/jquery-ui.css" />
</head>
<body>
<form runat="server">
<div id="dialog" title="Basic dialog" style="display: none;">
<asp:Label ID="Label1" runat="server"></asp:Label>
</div>
<asp:LinkButton ID="testButton" runat="server" onClick="button_Click" text="click me"/>
</form>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
var $labelText = $("#Label1").html().trim(),
$dialog = $("#dialog").dialog({
autoOpen: $labelText.length,
buttons: { "Ok": function () { $(this).dialog("close"); } }
});
$("#testButton").button().click(function() {
if ($labelText.length) $dialog.dialog("open");
});
</script>
</body>
</html>
C# CodeBehind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class test6 : System.Web.UI.Page
{
protected void button_Click(object sender, EventArgs e)
{
Label1.Text = "Current time in ticks: " + DateTime.Now.Ticks.ToString();
}
}
Output:

Your label is already added to the form, no need for adding the dialog to the form. ASP.Net only accepts controls that are put into the <form runat="server"> tag.

How to display Jquery dialogbox on asp:Button click

I am new to JQuery and trying to display a Yes/No confirmation dialog box when the user clicks on an aspx button. When the dialog box gets displayed to the user he can click the Yes or No button and depending upon the user action i want to execute different code present in code behind file i.e. in aspx.cs
I have tried with the following code but not succeded in my objective.
Code present in aspx page:
<link href="jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
jQuery("#myButton").click(showDialog);
//variable to reference window
$myWindow = jQuery('#myDiv');
//instantiate the dialog
$myWindow.dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: {
"Yes": function() {
},
"No": function() {
$(this).dialog("close");
}
}
});
}
);
//function to show dialog
var showDialog = function() {
//if the contents have been hidden with css, you need this
$myWindow.show();
//open the dialog
$myWindow.dialog("open");
}
//function to close dialog, probably called by a button in the dialog
var closeDialog = function() {
$myWindow.dialog("close");
}
</script>
<form id="testconfirmJQ" name="testconfirmJQ" runat="server">
<fieldset>
<legend>jQuery UI Modal Submit</legend>
<p><label for="email">E-mail:</label><br />
<input id="emailJQ" type="text" name="emailJQ" value="" /></p>
<p>
<asp:Button ID="myButton" runat="server" Text="Button" onclick="myButton_Click" />
</fieldset>
</form>
<div id="myDiv" title="Verify Form jQuery UI Style"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> You entered your e-mail address as:</p><p id="dialog-email"></p><p>
If this is correct, click Submit Form.</p><p>To edit, click Cancel.<p></div>
</form>
In code behind the event handler is empty for now. Any suggestions will be appreciated!

Take out the onclick attribute of asp:button. There should be no need for it -- you are not doing server side actions.
You could also change it to an <input> of type button.

Since jQuery is client side and you want to execute server side code in your .aspx.cs file, you could try saving a value indicating what the user responded to the prompt and they doing a postback so the server side can execute the appropriate code.
You might look into using the Button.OnClientClick Property which can execute client side code before the postback. Still use the jQuery dialog box.

Disabled asp button

i have asp button like this:
<asp:Button ID="ImportToDB" runat="server" OnClick="ImportToDB_Click" />
And i need to call a javascript function when mouseover on this button. So i have in page_load():
ImportToDB.Attributes.Add("onmouseover","javascript:OnButtonMove(" + ImportToDB.ClientID + ")");
javascript function:
<script language="JavaScript" type="text/javascript">
function OnButtonMove(id) {
//something
}
</script>
Everithing work fine only if button is enabled. but when i disable button, this javascript function will never fire.
what i am trying to do: I have button and when is something wrong i just disable it. And when user mouseover this(disable) button, I show him DIV with a message.
Can someone tell me why i cannot call this JS function while button is disabled?

If the event is never fired when the button is disabled, you could put the button in a <div> and add the event handler to this instead. Then check if the button is disabled inside your javascript function.

When this button is disabled it can't be accessed from client side javascript only by server side code (post back), a work around to achieve this by client-side way is to use a div control above this button as Graham Clark says like this
<div onmouseover="javascript:OnButtonMove(this.children[0].id)">
<asp:Button ID="ImportToDB" runat="server" Text="test" Enabled="false" />
</div>