ASP MVC 5 – 使用 Ajax 和 jQuery UI 对话框删除确认答案

【问题标题】：ASP MVC5 – Delete confirmation with Ajax & jQuery UI DialogASP MVC 5 – 使用 Ajax 和 jQuery UI 对话框删除确认
【发布时间】：2014-07-22 09:26:15
【问题描述】：

我想使用 JQuery UI Dialog 来确认我的删除操作，我在互联网上尝试了一些教程，但我仍然重定向到删除页面确认，而不是显示确认对话框：

这里是我的脚本实现：

<link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery-2.1.0.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")" type="text/javascript"></script>

   $("#dialog-confirm").dialog({
       autoOpen: false,
       resizable: false,
       width: 500,
       modal: true,
       buttons: {
           "Delete this item": function () {
               $(this).dialog("close");
           },
           Cancel: function () {
               $(this).dialog("close");
           }
       }
   });

   $("[data-dialog-confirm]").click(function (e) {
       e.preventDefault();
       var theHREF = $(this).attr("href");
       $("#dialog-confirm").dialog('option', 'buttons', {
           "Yes":
           function () {
               $.get(theHREF, null, function () { refreshList() });
               $(this).dialog("close");
           }, "No":
         function () { $(this).dialog("close"); }
       });
       $("#dialog-confirm").dialog("open");
   });

我的确认 div：

  <div id="dialog-confirm" title="Delete the item?">
            <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p>
        </div>

以及调用删除确认对话框的操作链接

 @Html.Raw(@Html.ActionLink(".", "DeleteDemandeLocation", new { id = item.Publication_ID }, new { data_dialog_confirm = "true" }).ToHtmlString().Replace(".", "<img src=\"/Content/Images/Delete.png\" style=\"margin-left:0px; width:19px; height:19px\" />")) |

最后是我的删除操作/控制器方面：

 //
    // GET: /DemandeLocation/Delete/5
    public ActionResult DeleteDemandeLocation(int id)
    {
        return View(db.PublicationSet.Find(id));
    }

    //
    // POST: /DemandeLocation/Delete/5
    [HttpPost]
    public ActionResult DeleteDemandeLocation(int id, DemandeLocation demandeLocation)
    {
        try
        {
            var demandeLocationGetById = db.DemandeLocations.Find(id);
            if (demandeLocationGetById != null)
                db.DemandeLocations.Remove(demandeLocationGetById);

            db.SaveChanges();

            return RedirectToAction("ListDemandeLocation");
        }
        catch
        {
            return RedirectToAction("Error");
        }
    }

【问题讨论】：

标签： ajax jquery-ui razor asp.net-mvc-5

【解决方案1】：

您忘记从点击处理程序返回 false

$("[data-dialog-confirm]").click(function (e) {
   e.preventDefault();
   var theHREF = $(this).attr("href");
   $("#dialog-confirm").dialog('option', 'buttons', {
       "Yes":
       function () {
           $.get(theHREF, null, function () { refreshList() });
           $(this).dialog("close");
       }, "No":
     function () { $(this).dialog("close"); }
   });
   $("#dialog-confirm").dialog("open");
    return false;

});

【讨论】：

我已经通过添加返回来修改函数！但是一旦我点击删除图标，它会将我重定向到另一个视图：localhost:50412/DemandeLocation/DeleteDemandeLocation 而不是显示确认对话框
如果你在点击处理程序中放置一个调试点，它会被命中吗？你能确认 return false 真的被击中了吗？

【解决方案2】：

试试这个：

 $(document).ready(function(){
         $("#dialog-confirm").dialog({
               autoOpen: false,
               resizable: false,
               width: 500,
               modal: true,
               buttons: {
                   "Delete this item": function () {
                       $(this).dialog("close");
                   },
                   Cancel: function () {
                       $(this).dialog("close");
                   }
               }
           });

           $("[data-dialog-confirm]").click(function (e) {
               e.preventDefault();
               var theHREF = $(this).attr("href");
               $("#dialog-confirm").dialog('option', 'buttons', {
                   "Yes":
                   function () {
                       $.get(theHREF, null, function () { refreshList() });
                       $(this).dialog("close");
                   }, "No":
                 function () { $(this).dialog("close"); }
               });
               $("#dialog-confirm").dialog("open");
           });
      });

【讨论】：