代码之家 › 专栏 › 技术社区 › Steve

Jquery UI、Razor和MVC:未捕获类型错误:非法调用

jquery-ui-dialog asp.net-mvc-5 razor javascript

Steve · 技术社区 · 8 年前

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

当我单击OK时,Chrome会在控制台中显示错误(UncaughtTypeError:非法调用)。这可能并不奇怪,因为它不知道testUser是什么。TestUserId为。。。

如何最终将该值从客户端传递到服务器?HomeController中的删除操作。否则,cs将在没有确认对话框的情况下工作。我需要确认才能打电话给你。我觉得我很接近,但不知道如何形成Url。Javascript中的动作帖子。

我很确定有问题的一行是布局中的帖子。cshtml

_布局。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");
    }

指数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>
    }

1 回复 | 直到 8 年前

user3559349 user3559349 8 年前

更改生成链接的代码,以删除重复的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

$('.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');
        }
    }
});