Question

I’m using MVC2 with jquery.

I’m trying to open a partial view in a jquery Dialog container, passing an itemID of an object to be deleted.

What I’m doing to accomplish this is passing in an action that renders a view to jquery, which I can get to work without variables. If I try to pass in the ID of the object to be deleted, the action doesn’t even trigger. My likely foil is where I am passing in the variable.

Here’s my jquery code:

    $(function () {
        var itemToDelete
        $('#deleteDialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'Delete Item',
            modal: true,
            open: function(event, ui) {
                //This calls the action if I don't try to pass in the variable
                $(this).load("<%: Url.Action("Delete") %>",
                    {  
                        item: itemToDelete 
                    });
                },
                buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('#item-delete-button').click(function () {
            itemToDelete = $(this).find("input").val()
            $('#deleteDialog').dialog('open');
        });
    });

Here’s what pertinent part the view looks like.

<div id="item-delete-button" class="item-delete-button">
                        Delete
                        <%:Html.Hidden("item-delete-content", model.ItemID.ToString(), New With {.id = "item-delete-content", .class = "item-delete-content"})%>
                    </div>

If I click “Delete”, the jquery happens and an empty dialog window opens. If I don’t try to pass in the “itemToDelete” variable, then the action triggers fine, but of course, I’m not going to get far without knowing what item I want to delete.

So as I said, the issue is that I’m failing to pass in the right variable to my action. It’s likely a simple mistake, and I’m relatively new to jquery.

Answer 1

Does it work if you replace:

$(this).load("<%: Url.Action("Delete") %>",
                {  
                    item: itemToDelete 
                });

with this?

$(this).load('<%: Url.Action("Delete") %>?item=' + itemToDelete);