Creating a JavaScript and C# popup for deleting records in asp.net

I'm struggling a bit with understanding how server-side deletion works. I know how to use MessageBox, but it's not the best approach. I've been advised to use a popup on the server side.

What I'm trying to achieve is that when you click the button, a popup should appear asking if you are sure you want to delete something. If yes, then delete based on C# events. If no, cancel the deletion. How do I work with both JavaScript and C#?

I encountered a problem where clicking the button triggers the popup, and when I click yes, it deletes successfully. However, when I click no, it still deletes. How do I handle yes and no in C# or Javascript? I have no idea how to go about this.

Your sample code would be greatly appreciated for me to understand better. Thank you!

Javascript

<script type='text/javascript'>
 var result = confirm("Do you Want to Delete?");
if (result) 
{
    //do ajax call and delete from database
    return true;
} 
else 
{
    return false;
}

ASP.NET

 <asp:Button runat="server" OnClick="btnDelete_Click" OnClientClick = " return confirm();" />

C#

protected void btnDelete_Click(object sender, EventArgs e)
{
    //Delete operation

}

Answer №1

Sample HTML code:

<button onclick="myFunction()">
Click me
</button>

<p id="demo"></p>

Javascript function:

<script type='text/javascript'>
function myFunction(){ 
var text = "Hello, World!";
document.getElementById("demo").innerHTML = text;
}
</script>

Answer №2

When dealing with a server button that has both client and server events, you have the ability to control whether the server side should be executed based on logic implemented on the client side. For instance:

Simply add a CSS class to your button.

$('.CssClassOfYourButton').click(function (evt) {
            if (condition)
                return false;
                // The Post Back will not occur
            }
            if (confirm('Are you sure? \nBy doing this, ...... .')) {
                return true;
               // If the user confirms, the Post Back will happen and the server side delete event will be executed.

            }

        });

Answer №3

function userConfirmation() {
        var confirmationInput = document.createElement("INPUT");
        confirmationInput.type = "hidden";
        confirmationInput.name = "confirmation_input";
  if (confirm("Are you sure you want to proceed?")) {
            confirmationInput.value = "Yes";
        } else {
            confirmationInput.value = "No";
            return false;
        }
 document.forms[0].appendChild(confirmationInput);
    }

Handling the confirmation on server side:

protected void handleUserAction(object sender, EventArgs e)
{
           string confirmInput = Request.Form["confirmation_input"];
         if (confirmInput == "Yes")
     {
     } 
    else
    {
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Saving the initial state value in a variable in Vue.js is a crucial step in managing and

My dilemma involves an object in the Vuex store containing data that I need to utilize within a component. I have successfully accessed the data using a getter in the component. However, I am facing a challenge in preserving the initial value of this objec ...

The getHours function seems to be malfunctioning when calculating the difference between dates

[code][1] Hello, I am currently working on calculating the difference between two dates and I want the result to be displayed in the format 00:00:00. Currently, my "current" time is set as 00:00:00 but I need it to dynamically update based on the hours, m ...

Implement a dispatcher in raw JavaScript using React combined with the Redux Toolkit package

In my React app, I have been using Redux and Redux Toolkit within React components by utilizing the useDispatch and useSelector hooks. However, I now need to update the Redux store from a pure JavaScript module that interacts with IndexedDB to save user da ...

Retrieve the complete HTML content of a webpage, including the values of all input fields

I'm attempting to save the entire webpage as an HTML file, including all previously entered values in input fields. I have already tried this method: $("#content").html(); However, it does not retain the values entered into input fields. $("#conten ...

Setting the button value to a textbox and refreshing the status information (Codeigniter)

How do I pass the value of my "ACTIVE" status attribute to my textbox? I want to update the user's status by clicking the ACTIVE button. The user's status is currently pending. While I can easily pass the userID, I'm facing an issu ...

Django and its compatibility with modal windows

I have developed a Django website that includes multiple items in a "for" loop. I need to delete a specific item by opening a modal window and passing the post ID (referred to as "get_post_id") to the modal window. However, I want the modal window to exist ...

Angular: Radio button groups are not responding correctly when populated within a loop using ng-repeat

My goal is to populate multiple sets of radio buttons in a loop by combining the group name and index to ensure each set is uniquely grouped. However, I am facing an issue where only the last group in the loop has a checked radio button, while all other gr ...

Highlight all the written content within the text box

I'm struggling with a piece of code that is supposed to select all the text inside an input field: <input id="userName" class="form-control" type="text" name="enteredUserName" data-ng-show="vm.userNameDisplayed()" data-ng-model="vm.enteredUs ...

The d3.select function is failing to update the chart on the website

I am facing a challenge in updating data in a d3 chart with the click on an HTML object #id. After successfully coding it in jsfiddle, I encountered issues when implementing it on a web page. The scenario involves a simple leaflet map where the chart is d ...

Troubleshooting an issue with importing a Component in ReactJS using material-ui

Using the material-ui library, I attempted to create a Table following the code provided in the Custom Table Pagination Action example. However, I encountered the following error: Error Encountered: Warning: React.createElement: type is invalid -- expect ...

Verify image loading using jQuery

<img src="newimage.jpg" alt="thumbnail" /> I am dynamically updating the src attribute of this image. Is there a way to verify if the image has been successfully loaded and take action once it is? Appreciate any guidance on this matter. ...

Showing the sum of the query result at the bottom of the DataGrid footer

Whenever the search button is clicked, I have a query that runs. Currently, the total is displayed in a label just below the data grid on the page. However, I want to relocate the total display to the right-hand side of the footer. ASP.NET: <asp:Table ...

Issue with SVG animation causing unnecessary duplication of circle shapes when utilizing animateMotion

I have implemented animateMotion to create an animation along a path. Below is the code snippet that demonstrates this: <!DOCTYPE html> <html> <head> <title>Example Of Many Things!</title> </head> <body> ...

Load ajax content dynamically based on the updated URL

Exploring ajax for the first time and having some issues. Currently, I am retrieving text from files based on the URL. This is how it's set up: var home_url = "blahblah/index.html#home"; var test_url = "blahblah/index.html#test"; $(document).on("c ...

Is there a way to verify the href attribute and potentially append the complete URL address if necessary?

Is there a way to verify the href attribute and replace it with a full URL if it doesn't contain the full path? I tried using JavaScript for this, but it doesn't seem to work on IE 8. This is my JavaScript code: fullUrl = $(this).filter('[ ...

What causes images to be omitted from a PDF file when using mywindow.print()?

Here is the scenario I am dealing with: On a particular webpage, there is a print button. The page contains various information, including receipts. When the user clicks on "print", I want only the receipts to be printed: https://i.sstatic.net/WobKK.png ...

Formatting Strings in JavaScript when saving as a .txt file with proper indentation

Utilizing Angular and TypeScript/JavaScript for testing purposes. Each row has been formatted with a newline at the end of the code. formattedStr += car.Name + ' | ' + car.Color + ' | ' + car.Brand + '\r\n' The da ...

Is there a way to customize CKEditor to prevent it from continuously adding <p></p> tags within the textarea automatically?

As I was going through the CKEditor tutorial, I implemented the following: $( '#editor' ).ckeditor(function(){}); //it's working great!! However, after submitting the form, I noticed that by default, the textarea displays <p></p ...

Utilize tags as properties in Vue.js by selecting them

I am attempting to retrieve a value from a select tag and use it in an object property. Below is the HTML code: <div id="app"> <h3>{{title}}</h3> <div class="form"> <div class="form-group"> <div ...

Issue with authentication when accessing Google Video API

I'm attempting to utilize the Google API provided: I have downloaded the Sample Project and followed these steps: 1) Navigate to the Project Folder named API Video 2) Run npm install 3) Set GCLOUD_PROJECT = neorisvideo 4) Download Json from the C ...