MVC3 Ajax链接确认对话框使用jquery ui对话框

MVC3 Ajax link confirmation dialog using jquery-ui dialog box

本文关键字:对话框 jquery ui MVC3 链接 确认 Ajax      更新时间:2023-09-26

我最近一直在学习MVC 3,我发现了两种从列表视图中删除记录的解决方案。然而,我想要这两者的组件,但我对javascript的缺乏知识使这变得非常困难。

我有这两个链接要删除:

@Html.ActionLink("Delete", "Delete", 
    new { id = item.ID }, new { @class = "delete-link" }) |
@Ajax.ActionLink("Delete Ajax", "Delete", "MyController",
    new {id = item.ID},
    new AjaxOptions {
        HttpMethod = "POST",
        OnBegin = "return ConfirmDone()",
        OnSuccess = "deleteConfirmation"
    })

第一个使用以下javascript删除记录:

<script>
    $(function () {
        var deleteLinkObj;
        // delete Link
        $('.delete-link').click(function () {
            deleteLinkObj = $(this);  
            $('#delete-dialog').dialog('open');
            return false; 
        });
        //definition of the delete dialog.
        $('#delete-dialog').dialog({
            autoOpen: false, width: 400, resizable: false, modal: true, 
            buttons: {
                "Continue": function () {
                    $.post(deleteLinkObj[0].href, function (data) 
                    {  
                        var rowId = "#myTableItem-id-" + data.id;
                        $('.myTable').find(rowId).hide('slow');
                    });
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script>

第二个链接使用这个脚本函数进行确认:

<script>
    function ConfirmDone() {
        return confirm("Are you sure you want delete this item?");
    }
</script>

现在这两种解决方案都可以正常工作,但我更喜欢第二个链接的编码,但我喜欢jqueryui在第一个链接中生成的确认框。所以我想把它们融合在一起。

我想我需要做的是,当Ajax.ActionLink调用ConfirmDone()时,我需要像处理第一个链接一样显示一个jquery对话框。然而,我不确定如何生成此对话框,并允许此对话框根据按下的按钮返回true或false。

任何帮助都将不胜感激。

非常感谢。

经过几个小时的尝试,我想出了一个解决方案:

我的链接更改为:

@Ajax.ActionLink("Delete", "Delete", "StruContractUser",
     new { id = item.UserID },
     new AjaxOptions {
         HttpMethod = "Delete",
         OnBegin = "JSONDeleteFile_OnBegin",
         OnComplete = "notify"
     },
new { @class = "delete-link" })

使用OnBegin选项调用此函数:

<script type="text/javascript">
    function JSONDeleteFile_OnBegin(context) {
        return false; 
    }
</script>