Question

我想使用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");
        }
    }

Answer 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;

}）;

Answer 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");
           });
      });

ASP MVC5 - 用Ajax＆amp;删除确认jQuery UI对话框

2 个答案: