jvery 대화 상자가 표시된 mvc ajax.actionlink

Question

데이터 항목이있는 테이블이 있습니다. 각 행에 대해 몇 가지 메소드 (데이터 항목 삭제, 상태 데이터 항목 변경 ... 등)를 호출하는 액션 링크가 될 것입니다.

각 사용자가 버튼을 클릭하기 전에 jquery 대화 상자를 표시하고 일부 정보, 확인 및 취소 버튼이 있습니다.

ChangeStatus 메소드를 호출 할 ajax.actionlink의 일부 예제 코드 :

function StartChangeStatus(e) { 
      $('#dialog-confirm').dialog({ 
       resizable: false, 
       height: 200, 
       modal: true, 
       buttons: { 
        'Continue': function() { 
         $(this).dialog('close'); 
         $('#Loading-Div').show('slow'); 
        }, 
        Cancel: function() { 
         $(this).dialog('close'); 
         e.preventDefault(); 
        } 
       } 
      }); 
     } 

actionlink 및 JQuery와 기능 작업 :

<%= Ajax.ActionLink(item.Status, "ChangeStatus", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "ListReturns-Div", OnBegin = "StartChangeStatus", OnSuccess = "EndChangeStatus", OnFailure = "FailureChangeStatus" }, new { @class = "StatusBtn" })%> 

이 호출되는 JQuery와 기능입니다. 하지만 문제는 actionlink가 클릭 될 때 현재 작업을 일시 중지하거나 중지 할 수 없다는 것입니다. 버튼을 클릭하면 홀 프로세스가 실행 중이고 대화 상자 확인 버튼이 무시됩니다. 그래서 내 질문에 계속하기 전에 대화 확인을 원하는대로 작동하도록 jquery 함수 또는 actionlink 변경하는 방법?

Answer 1

나는 또한 동일한 동작을 얻으려고 코드를 시도했습니다. 확인 상자를 표시하도록 코드를 수정했습니다.

<%= Ajax.ActionLink("Link", 
        "ChangeStatus", 
        new { id = 3 }, 
        new AjaxOptions { UpdateTargetId = "ListReturns-Div", 
             HttpMethod = "Post", 
             Confirm = "confirmClick" }, 
             new { @class = "StatusBtn" } 
        ) 
%> 

그리고 자바 스크립트 확인을 표시하고 있습니다. 그것이 작동하지 않는 이유를 찾아야합니다. my website에서

Answer 2

: 요즘 그 엉터리 자바 스크립트 경고를 원하는 사람, 아직 ... 이제

는 Ajax.ActionLink 정말 유용하고, 확인 AjaxOption 더욱입니까? Ms MVC 2로 응용 프로그램을 개발하고 있으며 환상적인 JQueryUI 라이브러리를 사용하여 모든 요소의 비주얼을 사용자 정의합니다. JQueryUI가 가진 최고의 것들 중 하나는 "이 파일을 삭제 하시겠습니까? 예/아니오"와 같은 대화 창이 있습니다 ... 내 Ajax에서 사용하고 싶습니다 .ActionLink!

인터넷에서 답변을 찾지 못했기 때문에 간단한 방법을 찾았습니다. 이제 여기에 게시합니다.

첫째 읽고 페이지에 리카르도 Covo의 쓴 좋은 튜토리얼 구현 :

나는 그의 자바 스크립트 코드에 간단한 변경을 (그냥 구글) "ASP MVC 아약스 & jQuery를 UI 대화와 삭제 확인을" 단순히 hide ('fast') 대신 remove()를 사용하고 tr에 "item"클래스를 적용하여 삭제하십시오.

deleteLinkObj.closest("tr").hide('fast') 

은 이전 튜토리얼을 따라 한 후, 당신은

<%:Ajax.ActionLink([LinkName],[ActionName],[ControllerName],new { id = item.Id },new AjaxOptions{HttpMethod = "Delete" /*You can use Post though*/,OnBegin = "JsonDeleteFile_OnBegin" /*This is the main point!*/}, new { @class = "delete-link" }) %> 

당신은을 사용할 수 있습니다로

<%: Html.ActionLink([LinkName],[ActionName], new { id = item.Id }, new { @class = "delete-link" })%> 

행을 대체 할 준비가되어 지금

deleteLinkObj.closest("tr.item").remove(); 

된다 당신이 t를 좋아한다면 포스트 방법

<script language="javascript">function JsonDeleteFile_OnBegin(context) {return false;/*Prevent the Ajax.Action to fire before needed*/}</script> 

장소 페이지에 자바 스크립트 : 오, 여기에 중요한 것은 서버 작업이 JQueryUI 대화 확인하기 전에 호출되는 것을 방지 자바 스크립트를 호출하는 OnBegin 옵션이다.

그럼 이제 어떻게 될까요? 삭제 버튼을 클릭하면 JQueryUI가 열리는 반면 OnBegin 함수는 정상적인 게시 작업을 취소합니다. "확인"의 경우 Ricardo Covo의 코드가 서버 측 작업을 실행하고 Ricardo Covo의 확인 코드 (javacript code Confirmation)에서 Success (행 삭제 숨기기)와 같은 경우 모든 작업을 실행할 수 있습니다.

에주의 :이 방법을 사용하면/성공을 위해 기능을 관리해야 onsuccess는 및 onComplete를 AjaxOptions가 (아마 코드에 의해 덮어 쓰기) 모두에서 해고되지 않기 때문에, 리카르도 Covo의의 자바 스크립트 코드에 실패합니다.