c# - process to mvc action after jquery confirmation button is clicked - Stack Overflow

admin管理员组

文章数量:1290939

I'm trying to implement jquery onclick confirmation dialog to my mvc3 delete actions. Worth to mention is that I'm succ. render dialog itself, where I'm struggle is process action to /User/Delete action from js after the continue button is clicked. Here's the code:

onclick-delete.js

$(function () {
    var deleteLinkObj;
    // delete Link
    $('.delete').click(function () {
        deleteLinkObj = $(this);  //for future use
        $('#delete-dialog').dialog('open');
        return false; // prevents the default behaviour
    });

    //definition of the delete dialog.
    $('#delete-dialog').dialog({
        autoOpen: false, width: 400, resizable: false, modal: true, //Dialog options
        buttons: {
            "Continue": function () {
                $.post(deleteLinkObj[0].href, function (data) {  //Post to action
                    // THIS IS WHERE I SHOULD SEND DATA TO MY DELETE ACTION (Users/Delete)
                    else {
                        alert("error");
                    }
                });
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
});

So, what I'm doing wrong. After clicking error is thrown, any ideas

I'm trying to implement jquery onclick confirmation dialog to my mvc3 delete actions. Worth to mention is that I'm succ. render dialog itself, where I'm struggle is process action to /User/Delete action from js after the continue button is clicked. Here's the code:

onclick-delete.js

$(function () {
    var deleteLinkObj;
    // delete Link
    $('.delete').click(function () {
        deleteLinkObj = $(this);  //for future use
        $('#delete-dialog').dialog('open');
        return false; // prevents the default behaviour
    });

    //definition of the delete dialog.
    $('#delete-dialog').dialog({
        autoOpen: false, width: 400, resizable: false, modal: true, //Dialog options
        buttons: {
            "Continue": function () {
                $.post(deleteLinkObj[0].href, function (data) {  //Post to action
                    // THIS IS WHERE I SHOULD SEND DATA TO MY DELETE ACTION (Users/Delete)
                    else {
                        alert("error");
                    }
                });
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
});

So, what I'm doing wrong. After clicking error is thrown, any ideas

• c#
• javascript
• jquery
• asp-mvc-3

Share Improve this question Follow edited Aug 20, 2012 at 13:15 Grunf asked Aug 20, 2012 at 13:01 GrunfGrunf 47288 silver badges2121 bronze badges 2

• put the relevant code on jsfiddle – robasta Commented Aug 20, 2012 at 13:08
• If the "alert("error")" is being thrown, then the problem is with the statement $.post(deleteLinkObj[0].href, function (data) { – user1477388 Commented Aug 20, 2012 at 13:19

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Correct me if I wrong, but isn't this way simpler and more effective

@Html.ActionLink("Delete", "Delete", 
   new { id = item.Id }, 
   new { onclick = "return confirm('Are you sure you wish to delete this article?');" }) 

As per the discussion in Mark Oreta's answer, here's what I would do:

If you set up the form like always, you can still get confirmation from the user without too much hassle. Take the following HTML/JS:

<form action="/User/Delete" method="post">

    <!-- some fields here -->

    <input id="btnSubmit" type="submit" value="Delete" />

</form>

This should properly submit the form to the backend. Interesting to note is that if you click the submit button, any click event set up in javascript/jQuery will be executed before submitting the form.

So you can do:

$("#btnSubmit").click(function(event) {

    event.preventDefault(); // --> This stops the form submit from happening.

});

If all you need is a textbox in which the user confirms, there is no need to use anything other than the standard confirm() function. This messages the user and asks him to either agree or cancel. The function returns true/false according to the user's response.

So you can write the simplest of code:

$("#btnSubmit").click(function(event) {

    var confirmationmessage = "Are you sure you want to delete this?";

    if( ! confirm(confirmationmessage) ) {

        // !confirm == the user did not confirm. Therefore stop the form submission.

        event.preventDefault(); // --> This stops the form submit from happening.

    } else {

        // The user agreed. There is no else block needed, then normal form submission may occur.

    }
});

This code is much simpler and easier to read than the snippet in your question. Of course, if you prefer using any other means of asking confirmation from the user, that works too. Just make sure you end up with an if(someboolean) { event.preventDefault(); } at the end of it.

I've created a JSfiddle for you here

I'm hoping you pulled out some relevant code, because your post function was setup incorrectly. I got it working like this:

$(function () {
    var deleteLinkObj;
    // delete Link
    $('.delete').click(function () {
        deleteLinkObj = $(this);  //for future use
        $('#delete-dialog').dialog('open');
        return false; // prevents the default behaviour
    });

    //definition of the delete dialog.
    $('#delete-dialog').dialog({
        autoOpen: false, width: 400, resizable: false, modal: true, //Dialog options
        buttons: {
            "Continue": function () {
              $.post(deleteLinkObj[0].href, function (data) { 
                  //do the data parsing here      
                  alert(data);     

                    });
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });
});​

Where you see do the data parsing here is where you need to handle what your controller is returning. Normally, when I do something like this, my return from the delete action on the controller is a boolean value, so that in the Jquery above, you could do something like

if (data == true)
alert("success!");
else
alert("error");

Try this:

<script type="text/javascript">

    $(document).ready(function () {
        $('form[action$="/Delete"]').submit(function () {
            return confirm('Are you sure you want to delete ?');
        });
    }); 

</script>

Think that's about all, using jQuery events.. http://api.jquery./submit/

本文标签： cprocess to mvc action after jquery confirmation button is clickedStack Overflow