MVC 5 - jQueryUI對話框視圖不顯示

我正在爲MVC網站和我的刪除功能，我決定使用jQuery UI對話框來顯示彈出式對話框，以確認用戶希望刪除該對象。我的問題是，它不會按預期顯示，當我選擇刪除時，我可以在我重定向到顯示我的確認消息和要刪除的按鈕的另一個頁面之前，看到我的部分視圖對話框彈出一秒鐘。MVC 5 - jQueryUI對話框視圖不顯示

這是我的刪除控制器：

//Deletes a selected club 
    [HttpGet] 
    public ActionResult DeletePartialView(int? id) //Original: public ActionResult Delete(int? id) 
    { 
     if (id == null) 
     { 
      return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
     } 
     Club club = db.Clubs.Find(id); 
     if (club == null) 
     { 
      return HttpNotFound(); 
     } 
     return PartialView(club); 
    } 
    [HttpPost, ActionName("DeletePartialView")] 
    public ActionResult DeleteConfirmed(int id) //Original: public ActionResult DeleteConfirmed(int id) 
    { 
     Club club = db.Clubs.Find(id); 
     var MembersToDelete = club.ClubMembers.ToList(); 
     foreach (var item in MembersToDelete) 
     { 
      db.ClubMembers.Remove(item); 
     } 

     db.Clubs.Remove(club); 
     db.SaveChanges(); 
     return RedirectToAction("Index"); 
    }

這是刪除按鈕，並在其DIV局部視圖：

@Html.ActionLink("Delete", "Delete", new { id = item.ClubID }, new { @class = "btn btn-danger btn-xs" }) | 
          @*@Html.ActionLink("Delete Partial", "DeletePartialView", new { id = item.ClubID }, new { @class = "btn btn-danger btn-xs" })*@ 

          @Html.ActionLink(
          "Delete Partial", 
          "DeletePartialView", 
          new { id = item.ClubID }, 
          new 
          { 
          @class = "btn btn-danger btn-xs", 
          id = "deleteClub-opener" //Button ID 
                  }) 

    @* Delete Club Popup*@ 
    <div id="DelteClub-dialog" title="Delete Club"> 
     @Html.Partial("DeletePartialView", new ultimateorganiser.Models.Club()) 
    </div>

這是jQuery代碼：

//Delete Club Dialog Window with effects 
     $(function() { 
      $("#DelteClub-dialog").dialog({ 
       autoOpen: false, 
       height: 500, 
       width: 600, 
       show: { 
        effect: "clip", 
        duration: 500 
       }, 
       hide: { 
        effect: "highlight", 
        duration: 1000 
       } 
      }); 

      //Open Delete Club Dialog Window 
      $("#deleteClub-opener").click(function() { 
       $("#DelteClub-dialog").dialog("open"); 
      }); 
     })

;

這是它目前是如何顯示：

這是我DeletePartialView是什麼樣子：

@model ultimateorganiser.Models.Club 
@{ 
    ViewBag.Title = "Delete"; 
} 
<h3 class="text-warning">Are you sure you want to delete this club?</h3> 

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-actions no-color"> 
     <input type="submit" value="Delete" class="btn btn-danger" /> 
     @Html.ActionLink("Back to List", "Index") 
    </div> 
}

來源

2016-02-10 Cathal O ' Donnell

您需要取消默認重定向。在$（「＃DelteClub-dialog」）。dialog（「open」）後添加'return false;' –

可以在jQuery結合使用preventDefault。

$("#deleteClub-opener").click(function (e) { 
    e.preventDefault(); 
    $("#DelteClub-dialog").dialog("open"); 
});

或者，您還可以在綁定函數中使用return false來防止事件傳播。

來源

2016-02-10 21:55:31

這似乎不起作用，並且由於某種原因，當我添加該行時，我無法再看到彈出窗口flash代替它似乎直接跳到頁面 –

'$（「＃deleteClub-opener」）。click（function（e）{e.preventDefault（）; ....' –

是的，允許對話框顯示但現在刪除操作不再起作用 –

到目前爲止，你現在很好。爲了使你的刪除部分觀點如下刪除工作開始添加表格後

<input type="hidden" name="id" value="@Model.Id"/>

來源

2016-02-11 06:33:33

please check this code.and tell me another problem for using the dialog box. 
only use this library 
<html> 
<head> 
<link href="~/library/jquery-ui.min.css" rel="stylesheet" /> 
<script src="~/library/jquery.js"></script> 
<script src="~/library/jquery-ui.min.js"></script> 
</head> 
    <div>  
    <button id="btnCreate" class="btn-btn-primary">open the dialog</button> 
    </div> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $(function() { 
        $.noConflict(true); 
        $("#dialog").dialog({ 
         autoOpen: false, 
         draggable: true, 
         resizable: true, 
         dialogClass: "alert", 
         modal: true 
        }); 

        $("#btnCreate").click(function() { 
         $('#dialog').dialog('open'); 
        }); 
       }); 
      }); 

    <body> 
    <div id="dialog" style ="display:none" class="form" title="Basic dialog"> 
     <table> 
      <tr> 
       <th>Name</th> 
      </tr> 
      <tr> 
       <th>Name</th> 
       <td><input type ="text" id="txtName" style= "width:200px" /> 
      </tr> 
      <tr> 
       <th>Age</th> 
       <td><input type ="text" id="txtAge" style= "width:200px" /> 
      </tr> 

      <tr> 
       <td><input type="submit" value="Create" id="btnCreateId" class="btn btn-Sucess" /> 
       <td><input type="button" value="Cancel" id="txtCancel" class="btn btn-danger"/> 
      </tr> 
     </table> 
    </div> 
</body> 
<html>

來源

2016-02-11 07:52:00

MVC 5 - jQueryUI對話框視圖不顯示

回答

相關問題