load and insert an ASP.NET partial view using jquery

Question

I have a partial view of a row for the table. Each row in the table describes an element. An element can have child elements, but if it is a child element it cannot have it's own children. In the table, there is a row for each parent element, and a list of all of it's child elements. I am working on having a link next to the child elements that they can click, and it will no longer be a child. So it needs to be removed from the list, and a row added to the table under the parent element you just took it out of. I have the following javascript funciton that correctly updates the element in the database to no longer have a parent and removes it from the list.

    function removeElementFromParent(id, parentid) {
        if (confirm("Are you sure you want to remove this element from the group?")) {
            $.post('@Url.Content("~/Pack/RemoveElementFromParent")', { "elementid": id });
            $('#' + id).remove();
        }
    }

to create the row and insert it, I tried to do:

$('@Url.Action("~/Pack/ElementRow", new { elementid = id })').insertAfter('#' + parentid);

but that won't work since you cannot use the javascript variable id within @Url.Action(...). I have used the $('#id').load(@Url.Action(...)); to load data as it is requested. I tried to do something similar, but since we don't have a defined place to load it, that wasn't going to work in this case. Also, you still wouldn't be able to use javascript variables.

if there is a better way to do this, some help would be greatly appreciated

---

EDIT

Here is my solution:

$('<tr id="' + id + '"></tr>').insertAfter('#' + parentid);
$('#' + id).load('@Url.Action("ElementRow")' + '?elementid=' + id);

Answer 1

If you want to use the javascript variable with Url.Action than you should to write something like this

$('@Url.Action("~/Pack/ElementRow")' + "?elementid=" + id).insertAfter('#' + parentid);

Hope this will fix you problem.