2013-12-18 3 views
0

Очень новый jQuery и попытка реализовать окно подтверждения для кнопки удаления. Я могу получить простой стандартный ящик оповещения для выполнения функции я хочу с этим кодом:Пользовательский Подтвердить с помощью JQuery и MVC4

<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, поэтому любая помощь будет назначена.

Заранее спасибо

+0

Вы отправляете данные обратно на сервер, который нужно удалить? В первом примере вы ничего не удаляете. Метод 'confirmOn' вызовет функцию deleteSomethingImportant()', когда будет подтверждено удаление. – Kami

+0

В 'deleteSomethingImportant()' вы можете сделать, например, вызов ajax на сервер, чтобы указать, какие вещи нужно удалить. – Marthijn

+0

Кнопка отправки в первом примере (#deleteComment) прикрепляется к форме, которая отправляет commentID (int) в действие в моем контроллере. – loveforfire33

ответ

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

Теперь скажите, что вы хотите подтвердить отправку формы. Вы просто вызовите функцию с параметрами сообщения и обратного вызова:

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

Попробуйте, как это, это просто пример

$(document).ready(function(){ 

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


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

И для большего количества примеров читайте this

Смежные вопросы