MVC 5 - jQueryUI 对话框视图不显示
Posted
技术标签:
【中文标题】MVC 5 - jQueryUI 对话框视图不显示【英文标题】：MVC 5 - jQueryUI Dialog View not displaying 【发布时间】：2016-05-21 11:34:31 【问题描述】：我正在开发一个 MVC 网站，对于我的删除功能，我决定使用 jQuery UI Dialog 来显示一个弹出式对话框，让用户确认他们希望删除该对象。我的问题是它没有按预期显示，当我选择删除时，我可以看到我的部分视图对话框弹出一瞬间，然后我被重定向到显示我的确认消息和删除按钮的另一个页面。
这是我的删除控制器：
//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>
【问题讨论】：
您需要取消默认重定向。在$("#DelteClub-dialog").dialog("open");之后添加return false;
【参考方案1】：
到目前为止，你现在很好。要进行删除工作，请在开始表单后的删除部分视图中添加以下内容
<input type="hidden" name="id" value="@Model.Id"/>
【讨论】：
【参考方案2】： 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>
【讨论】：
【参考方案3】：您可以在jQuery 绑定中使用preventDefault。
$("#deleteClub-opener").click(function (e)
e.preventDefault();
$("#DelteClub-dialog").dialog("open");
);
或者，您也可以在绑定函数中return false 以防止事件传播。
【讨论】：
这似乎不起作用，由于某种原因，当我添加该行时，我再也看不到我的弹出式闪光灯，而是它似乎直接跳入了页面 是的，允许显示对话框，但现在删除操作不再起作用 @CathalO'Donnell，您的对话框需要一个按钮来将值发布到您的控制器方法。有点不清楚你真正想要做什么，因为你没有显示相关代码（你的对话框中有什么？） 我已更新我的问题以包含我的部分视图以上是关于MVC 5 - jQueryUI 对话框视图不显示的主要内容，如果未能解决你的问题，请参考以下文章
需要从 MVC 5 中的控制器操作关闭 Jquery UI 对话框