Jquery UI, Razor and MVC: Uncaught TypeError: Illegal invocation

Question

Attempting to get a Jquery UI dialog to confirm (OK, Cancel) a call to a delete operation (DeleteTestUser). My jquery ui dialog is coming up on click. The cancel button works as expected but OK is not.

The error (Uncaught TypeError: Illegal Invocation) is what Chrome is showing in the console when I click OK. This is probably not surprising since it doesn't know what testUser.TestUserId is...

How do I ultimately pass that value along from client to server? The delete operation from HomeController.cs otherwise does work without the confirmation dialog. I need to get OK to call that. I feel like I am close but not sure how to form the Url.Action post in Javascript.

I'm pretty sure the problematic line is the post in _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

Change the code that generates your link to both remove the duplicate id attribute (use a class name instead) and add a data- attribute to store the value of TestUserId

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

In the script, you can then retrieve the value and assign it to a data- attribute of the dialog before calling open

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

and retrieve it when you click the OK button

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