javascript - Jquery UI、Razor 和 MVC : Uncaught TypeError: Illegal invocation

Question

尝试获取 Jquery UI 对话框来确认(确定、取消)对删除操作 (DeleteTestUser) 的调用。我的 jquery ui 对话框将在单击时出现。取消按钮按预期工作，但“确定”按钮却不然。

当我单击“确定”时，Chrome 在控制台中显示错误(未捕获的类型错误:非法调用)。这可能并不奇怪，因为它不知道 testUser.TestUserId 是什么...

我最终如何将该值从客户端传递到服务器？否则，从 HomeController.cs 进行的删除操作无需确认对话框即可正常工作。我需要先确定才能打电话。我觉得我已经很接近了，但不知道如何在 Javascript 中形成 Url.Action 帖子。

我很确定有问题的行是 _layout.cshtml 中的帖子

_layout.cshtml

    <script type="text/javascript">
    $(document).ready(function() {

        $('#dialog-modal').dialog(
            {
                title: 'Test User',
                draggable: false,
                resizeable: false,
                closeOnEscape: true,
                modal: true,
                autoOpen: false,
                buttons: {
                    'Cancel': function() {
                        $(this).dialog('close');
                    },
                    'OK': function() {
                        $.post("@Url.Action("DeleteTestUser", "Home")",
                            { id: $('testUser.TestUserId') });
                        $(this).dialog('close');
                    }

                }
            });

        $('#confirm-delete').click(function () {
            $('#dialog-modal').dialog("open");
        });
    });
</script>

HomeController.cs

    public ActionResult DeleteTestUser(int id)
    {
        this.testUserBusinessLogic.DeleteTestUser(id);
        return this.RedirectToAction("Index");
    }

index.cshtml

    @foreach (var testUser in this.Model)
    {
        <tr>
            <td>@testUser.FirstName</td>
            <td>@testUser.LastName</td>
            <td>@testUser.EmailAddress</td>
            <td>
                <a href="@Url.Action("TestUser", "Home",
                        new {id = testUser.TestUserId})">
                    <i class="fa fa-pencil fa-lg text-primary"></i>
                </a>
            </td>
            <td>
                <a href="#" id="confirm-delete" >
                    <i class="fa fa-trash fa-lg text-primary"></i>
                </a>
            </td>
        </tr>
    }

Answer 1

更改生成链接的代码，以删除重复的 id 属性(改为使用类名)并添加 data- 属性来存储 TestUserId 的值

<td>
    <a href="#" class="confirm-delete" data-id="@testUser.TestUserId">
        <i class="fa fa-trash fa-lg text-primary"></i>
    </a>
</td>

在脚本中，您可以在调用 open 之前检索该值并将其分配给对话框的 data- 属性

$('.confirm-delete').click(function () { // modify selector
    var id = $(this).data('id');
    $('#dialog-modal').data('id', id).dialog("open");
});

并在单击“确定”按钮时检索它

$('#dialog-modal').dialog(
    ....
    buttons: {
        'Cancel': function() {
            $(this).dialog('close');
        },
        'OK': function() {
            $.post('@Url.Action("DeleteTestUser", "Home")', { id: $('#dialog-modal').data('id') });
            $(this).dialog('close');
        }
    }
});