MVC 3 Ajax.ActionLink与jQuery UI确认对话框 [英] MVC 3 Ajax.ActionLink with JQuery UI Confirm Dialog

问题描述

我有一个@ Ajax.ActionLink它调用删除操作。现在我想使用jQuery用户界面对话框确认，而不是阿贾克斯链接常规的确认属性。
我勾用不显眼的JavaScript事件到Ajax.ActionLink。但是动作被提交，或者e preventDefault（）。阅错误。谁能告诉我，为什么出现这种情况？

下面是我的jQuery code：

  $（[数据对话框的确认]）。点击（函数（五）{        亦即preventDefault（）;
        VAR theHREF = $（本）.attr（HREF）;
        $（＃对话 - 确认）。对话框（'选项'，'按钮'，{
            删除此项目：功能（）{
                window.location.href = theHREF;
                $（本）.dialog（亲密）;
            }，
            取消：功能（）{
                $（本）.dialog（亲密）;
            }
        }）;
        $（＃对话 - 确认）对话框（开放）。
    }）;
 

---

下面是我的MVC code：

  @ Ajax.ActionLink（删除，DeleteConfirmed，新{ID = item.Id}，
                    新AjaxOptions
                    {
                        列举HTTPMethod =POST
                        的onSuccess =refreshList
                    }，
                    新{data_dialog_confirm =真}
                    ）
 

解决方案

我落得这样做：
更改 Ajax.ActionLink 到 Html.ActionLink ，并在我的JavaScript code我称之为 $得到（theHREF，空，函数（）{refreshList（）}）;

下面是code：

  $（＃对话 - 确认）。对话框（{
        的AutoOpen：假的，
        可调整大小：假的，
        宽度：500，
        模式：真实，
        纽扣： {
            删除此项目：功能（）{
                $（本）.dialog（亲密）;
            }，
            取消：功能（）{
                $（本）.dialog（亲密）;
            }
        }
    }）;    $（[数据对话框的确认]）。点击（函数（五）{
        亦即preventDefault（）;
        VAR theHREF = $（本）.attr（HREF）;
        $（＃对话 - 确认）对话框（选项，按钮，{是：
        功能（）{
            $获得（theHREF，空，函数（）{refreshList（）}）;
            $（本）.dialog（亲密）;
        }，否：
      函数（）{$（本）.dialog（亲密）; }
        }）;
        $（＃对话 - 确认）对话框（开放）。
    }）;
 

下面是MVC 3 ActionLink的

  @ Html.ActionLink（删除，DeleteConfirmed，类别，新{ID = item.Id}，新
                    {
                        data_dialog_confirm =真
                    }）
 

I have a @Ajax.ActionLink which calls a Delete Action. Now I want to use JQuery UI Dialog confirm instead the regular "Confirm" attribute of the Ajax link. I hook the event to the Ajax.ActionLink using the unobtrusive javaScript. But the action gets submitted and the e.preventDefault(); throughs an error. Can anyone tell me why this happens?

Here is my jQuery code:

 $("[data-dialog-confirm]").click(function (e) {

        e.preventDefault();
        var theHREF = $(this).attr("href");
        $("#dialog-confirm").dialog('option', 'buttons', {
            "Delete this item": function () {
                window.location.href = theHREF;
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        });
        $("#dialog-confirm").dialog("open");
    });

---

Here is my MVC code:

    @Ajax.ActionLink("Delete", "DeleteConfirmed", new { id = item.Id },
                    new AjaxOptions
                    {
                        HttpMethod = "POST",
                        OnSuccess = "refreshList"
                    },
                    new {data_dialog_confirm="true" }
                    )

解决方案

I ended up doing this: Change the Ajax.ActionLink to Html.ActionLink and in my JavaScript code I call $.get(theHREF, null, function () { refreshList() });

Here is the code:

   $("#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");
    });

Here is the MVC 3 ActionLink

 @Html.ActionLink("Delete", "DeleteConfirmed", "Category", new { id = item.Id }, new
                    {
                        data_dialog_confirm = "true"
                    })

这篇关于MVC 3 Ajax.ActionLink与jQuery UI确认对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！