加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

MVC 3 Ajax.ActionLink与JQuery UI确认对话框

发布时间:2020-12-16 01:37:13 所属栏目:百科 来源:网络整理
导读:我有一个@ Ajax.ActionLink,它调用一个删除操作.现在我想使用 JQuery UI Dialog来确认Ajax链接的常规“Confirm”属性. 我使用不显眼的javaScript将事件挂钩到Ajax.ActionLink.但是提交的动作和e.preventDefault();通过一个错误.谁能告诉我为什么会这样? 这
我有一个@ Ajax.ActionLink,它调用一个删除操作.现在我想使用 JQuery UI Dialog来确认Ajax链接的常规“Confirm”属性.
我使用不显眼的javaScript将事件挂钩到Ajax.ActionLink.但是提交的动作和e.preventDefault();通过一个错误.谁能告诉我为什么会这样?

这是我的jQuery代码:

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

这是我的MVC代码:

@Ajax.ActionLink("Delete","DeleteConfirmed",new { id = item.Id },new AjaxOptions
                    {
                        HttpMethod = "POST",OnSuccess = "refreshList"
                    },new {data_dialog_confirm="true" }
                    )
以下是我使用jquery UI实现确认功能的方法:
$(document).ready( function () {
    $("#dialog-confirm").dialog({
      autoOpen: false,modal: true,resizable: false,height:180,});

    $(".deleteLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog-confirm").dialog({
        buttons : {
        "Confirm" : function() {
            window.location.href = targetUrl;
        },"Cancel" : function() {
            $(this).dialog("close");
        }
        }
    });

    $("#dialog-confirm").dialog("open");
    });

} );

并在您的HTML中,您可以添加对话框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.ActionLink("Delete","UpdateDelete",new { @class = "deleteLink" })

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读