I have a button that executes a delete action to a row in a database. I wrote a javascript function that creates a custom dialog box that allows users to select if they do want to delete the data. However, when I try to execute the private void from code behind inside javascript, it does not run. I have searched through a lot of websites and tried many ways suggested but have not succeed yet. Please help me.
(javascript with asp.net)
<script language="javascript" type="text/javascript">
function OnDelete(msg, myYes, myNo) {
var deleteBox = $("#delete");
deleteBox.find(".message").text(msg);
deleteBox.find(".yes, .no").unbind().click(function () {
deleteBox.hide();
});
deleteBox.find(".yes").click(myYes);
deleteBox.find(".no").click(myNo);
deleteBox.show();
}
function RunDelete() {
var rvalue = '<%= rvalue.ClientID %>';
OnDelete("Delete?", function yes() {
document.getElementById(rvalue).value = "Yes";
},
function no() {
document.getElementById(rvalue).value = "No";
});
document.getElementById('<%=btn_del.ClientID %>').click();
}
</script>
<style>
#delete {
display: none;
background-color: #FFFFFF;
color: #000000;
border-radius: 12px;
border: 2px solid #000000;
position: fixed;
width: 225px;
height: 100px;
left: 45%;
top: 40%;
margin-left: -100px;
padding: 15px 25px 15px;
box-sizing: border-box;
text-align: center;
}
#delete button {
background-color: #FFFFFF;
display: inline-block;
border-radius: 12px;
border: 1px solid #000000;
padding: 5px;
text-align: center;
width: 60px;
cursor: pointer;
}
#delete .message {
text-align: left;
}
.auto-style58 {
width: 65px;
text-align: right;
}
.auto-style59 {
text-align: right;
}
.auto-style60 {
width: 103px;
text-align: center;
}
</style>
<div id="delete">
<div class="message"></div>
<br />
<button class="yes">Sure</button>
<button class="no">Not yet</button>
</div>
<asp:Button ID="btn_del" runat="server" Font-Bold="True" Text="DELETE" Width="130px" UseSubmitBehavior="false" OnClientClick="return RunDelete();" OnClick="btn_del_Click" />
Code behind (C#)
protected void btn_del_Click(object sender, EventArgs e)
{
DeleteData();
}
3
Answers
You have a lot of different errors in this code.
Modal dialog code does not look to me like it’s doing anything useful. Perhaps your
deleteBox.find(".yes").click(myYes);
is supposed to bedeleteBox.find(".yes").addEventListener('click', myYes);
. Here is MDN documentation for click and for click event.But even if you make your dialog works, it seems that in your current code you have circular calls.
btn_del
client-side click callsRunDelete()
, which in turn clicksbtn_del
again, which in turn callsRunDelete()
again.Instead of clicking the button again within the click handler, you have to execute postback, adding button ID as a parameter, so that ASP.NET WebForms code on the server knows which element executed postback:
So, full
RunDelete()
function should look like this:Why using asp elements if you use asp elements then directly call from there javascript function. You are calling a javascript function inside cs file. It does not allow you invoke.
Try this one
Try this one it will work.
You can use
jQuery.ajax()
to call a method in code behind of asp.net webforms.Step 1: Define
jQuery.ajax()
method then put it in your Yes JavaScript function.Step 2: Define your web method in the code behind you need to import
using System.Web.Services
name space and put[WebMethod]
on the methodCompleted code
I hope this approach helps you.