Ajax在mvc視圖中顯示div對話框

Question

對於ajax來說很新穎。

所以我有這個div：

<div id="authentication" title="Authentication" > 
    <b>Please Generate a new token to continue!</b> 
    <br /><br /> 
    <table> 
     <tr> 
      <td>Token:</td> 
      <td><input type="text" id="txtToken"/></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td><label id="lblError"></label></td> 
     </tr> 
    </table> 
</div> 

這是不被我的MVC視圖中顯示

，因爲它是被用來作爲下面的Ajax代碼的對話框：

$('#authentication').dialog({ 
    autoOpen: true, 
    width:500, 
    resizable: false, 
    beforeclose : function() { return false; }, 
    title: 'Authentication', 
    modal: true, 
    buttons: { 
     "Cancel": function() { 
      window.location.replace("@Url.Action("Index", "Home")"); 
     }, 
     "Submit": function() { 
      var token=$('#txtToken').val(); 
      var dlg = $(this); 
      $.ajax({ 
       type: 'POST', 
       data: { 'token': token}, 
       dataType: 'json', 
       url: '@Url.Action("CheckNewToken", "Account")', 
       success: function (result) { 
        if(result==true) 
        { 
         window.parent.jQuery('#authentication').dialog('destroy'); 
        } 
        else{ 
         $('#lblError').html("Incorrect credentials. Please try again"); 
        } 
       }, 
       error: function (xhr, ajaxOptions, thrownError) { 
     } 
      }); 
     } 
    } 
}); 

然而，當代碼進入成功和結果==結果，對話框被銷燬，但div（對話框）然後顯示在我不想要的視圖上。我究竟做錯了什麼？

Answer 1

關閉對話框，然後銷燬。這將完全隱藏對話框，然後銷燬其對話框功能。如果你只是做.dialog('destroy')它只會完全刪除對話功能並顯示在頁面上的元素，但它不會隱藏。

success: function (result) { 
        if(result==true) 
        { 
         $('#authentication').dialog('close').dialog('destroy'); 
        } 
        else{ 
         $('#lblError').html("Incorrect credentials. Please try again"); 
        } 
       }, 

另一件事是beforeclose : function() { return false; },你正在返回false將防止關閉事件發生。它應該是beforeClose，儘管您可以安全地將其移除。

如果上述不工作的另一個選項刪除DIV是通過訂閱close事件： -

$('#authentication').dialog({ 
    autoOpen: true, 
    width:500, 
    resizable: false, 
    title: 'Authentication', 
    modal: true, 
    close:function(){ 

     $(this).dialog('destroy').hide(); 
    }, 
    buttons: { 
     "Cancel": function() { 

     }, 
     "Submit": function() { 
      var token=$('#txtToken').val(); 
      var dlg = $(this); 
      $('#authentication').dialog('close'); 
     } 
    } 
});