MVC 5-jQueryUI对话框视图未显示
[英]MVC 5 - jQueryUI Dialog View not displaying
问题描述
I am working on a MVC website and for my delete function I decided to use jQuery UI Dialog to display a popup style dialog box for the user to confirm that they wish to delete the object. 
我在MVC网站上工作，对于删除功能，我决定使用jQuery UI对话框来显示一个弹出样式对话框，以供用户确认他们希望删除该对象。 My problem is that it is not displaying as intended, when I select to delete I can see my partial view dialog popup for a split second before I am redirected to another page that displays my confirmation message and the button to delete. 我的问题是，它没有按预期显示，当我选择删除时，可以看到我的局部视图对话框弹出片刻，然后重定向到另一个显示我的确认消息和删除按钮的页面。
This is my delete controller: 这是我的删除控制器：
//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");
}
This is the Delete button and the partial view in its div: 这是“删除”按钮和其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>
This is the jQuery code: 这是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");
});
})
; ;
This is how it is currently displaying: 当前显示方式如下：
This is what my DeletePartialView looks like: 这是我的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>
}
3 个解决方案
解决方案1
0 2016-02-10 21:55:31
You can use preventDefault in the jQuery binding. 您可以在jQuery绑定中使用preventDefault 。
$("#deleteClub-opener").click(function (e) {
e.preventDefault();
$("#DelteClub-dialog").dialog("open");
});
Alternatively, you can also return false in the binding function to prevent event propagation. 或者，您也可以在绑定函数中return false以防止事件传播。
解决方案2
0 2016-02-11 06:33:33
So far your are good now. 到目前为止，您现在很好。 To make the delete work add following in your Delete partial view after begin form 要进行删除工作，请在开始表单后的删除部分视图中添加以下内容
<input type="hidden" name="id" value="@Model.Id"/>
解决方案3
0 2016-02-11 07:52:00
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.