2013-12-18 2 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

에서

덕분에 당신은 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'); 
       } 
      }] 
    }); 
} 

이제 양식 게시를 확인하고 싶습니다. 당신은 메시지와 콜백 매개 변수로 함수를 호출 :

@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"); 
} 
에 나타납니다

이 어딘가에 당신의 HTML에서
$('#myButton').click(function(e) { 
    e.preventDefault(); 

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

양식은 게시 할 한

0

는 그냥 예입니다,이 같은 시도

$(document).ready(function(){ 

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


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

더 많은 예제를 보려면 this

관련 문제