使用Jquery和MVC4自定義確認

Question

jQuery的新增功能，它試圖為刪除按鈕實現一個確認框。 我可以使用以下代碼獲得一個簡單的標准警報框來執行我想要的功能：

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

現在這是可以正常運行的，但是看起來很可怕，所以我正在嘗試使用jQuery-confirmOn插件。 他們的文檔說要調用它，我應該使用如下代碼：

$('#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
    }
})

以我對jquery的了解非常有限，我可以理解它到底在做什么。 但是它的以下幾行我需要幫助。

if(confirmed) deleteSomethingImportant();

我需要如何編輯該行才能產生與最初示例相同的效果？ 我很難理解jquery將如何與MVC交互，因此任何幫助都將得到應用。

提前致謝

Answer 1

您可以編寫一個JavaScript函數以使用jQueryUI創建一個簡單的確認對話框。 真的很簡單。

您傳遞消息以顯示在對話框上，並在單擊“是”按鈕時回調以進行調用。

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');
                }
            }]
    });
}

現在說您要確認發布表單。 您只需使用message和callback參數調用該函數：

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

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

在html的某處，您具有要發布的表單：

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

並在“ MyController”中接收它

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

    return RedirectToAction("Index");
}

Answer 2

像這樣嘗試，這只是一個例子

$(document).ready(function(){

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


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

有關更多示例，請閱讀此內容