使用Jquery和MVC4自定义确认

Question

Very new to jquery and trying to implement a confirm box for a delete button. I can get a simple standard alert box to perform the function i want with this code:

<script type="text/javascript">
    $(document).ready(function () {
        $("input[name='deleteComment']").click(function () {
            return confirm('Are You Sure You Want To Delete This?');
        });
    });
</script>

Now this is functional but looks horrible so i am trying to use jQuery-confirmOn plugin. Their documentation says to call it i should use code like this:

$('#myButton').confirmOn('click', function(e, confirmed){
    if(confirmed) deleteSomethingImportant();
    else {
        //If we need to, we can do some actions here if the user cancelled the confirmation
    }
})

With my very limited knowledge of jquery i can understand what this is doing just about. But its the following line i need help with.

if(confirmed) deleteSomethingImportant();

what would i need to edit that line to to have the same effect as my initial example? I struggle to understand how jquery will interact with MVC so any help would be appriciated.

Thanks in advance

Answer 1

You could just write a JavaScript function to create a simple confirm dialog with jQueryUI. It's really simple.

You pass the message to display on the dialog and callback to call when "Yes" button is clicked.

function confirm(message, callback) {
    $('<div></div>').appendTo('body')
        .html('<div><p>' + message + '</p></div>') // Append the message
        .dialog({
            resizable: false,
            autoOpen: true,
            modal: true,
            buttons: [{
                text: "Yes",
                click: function () {
                    // Callback on click
                    if (typeof(callback) !== "undefined") {
                         callback();
                    }
                    $(this).dialog('close');
                }
            },
            {
                text: "No",
                click: function () {
                    $(this).dialog('close');
                }
            }]
    });
}

Now say you want to confirm posting a form. You just call the function with the message and callback parameters:

$('#myButton').click(function(e) {
    e.preventDefault();

    // Prompt the submit
    confirm("Are you sure you want to delete this?", function() {
        // Submit the form
        $("#myForm").submit();
    });
})

Somewhere in your html you have the form you want to post:

@using ( Html.BeginForm("Delete", "MyController", FormMethod.Post, new {id="myForm"} ))
{
   ....
}

And receive it in "MyController"

[HttpPost]
public ActionResult Delete(SomeModel model)
{
    /* Delete the entity from database */
    ....

    return RedirectToAction("Index");
}

Answer 2

Try like this, it's just an example

$(document).ready(function(){

    $(".confirm").easyconfirm();
    $("#alert").click(function() {
        alert("You approved the action");
    });
});


<a href="#" class="confirm" id="alert">Normal test</a>

And for more examples read this