Call Action Controller from jQuery

Question

I have a controller for a jQuery TabControl.

public class MainFrameController : Controller
{
    public ActionResult AddTab(int menuItemId)
{
return View("Index");
}               }
public void RemoveTab( string menuInstanceName)
{
}
}

The methods MaineFrame.NewTab si MainFram.RemoveTab - keep up to date a dictionary with existing tabs.

for adding and removing tab from view I have the jQuery script:

$(function () {
var tabTitle = $("#tab_title"),
tabContent = $("#tab_content"),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
     tabCounter = 2;

var tabs = $("#tabs").tabs();


// close icon: removing the tab on click
tabs.delegate("span.ui-icon-close", "click", function () {
    var panelId = $(this).closest("li").remove().attr("aria-controls");
    $("#" + panelId).remove();

 // !!!!here I want to call MainFrame.RemoveTab action controller form panelId  !!!!

    tabs.tabs("refresh");
});

//remove the panel
tabs.bind("keyup", function (event) {
    if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
        var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
        $("#" + panelId).remove();
        tabs.tabs("refresh");
    }

});
});

I need to call an Controller Action inside of jQuery (where is the row: // !!!!here I want to call MainFrame.RemoveTab action controller form panelId !!!!)

Finally I found how:

 $.post("/MainFrame/RemoveTab",
        { menuInstanceName: panelId },
        function (data,status) {
            alert("\nStatus: "+ status);
        }
    );

But I have another problem: while is working ok on developer machine,$.post is not working on production server. ... and I don't understand why: I check and double check if the files are updated correctly on production server - they are.

... I found why not working on production server: on production server the root path is something like {domain}/{virtual dir}, and the path created by jQuery is start from {domain}. So, I try with Url.Content like bellow:

$.post('@Url.Content("~/MainFrame/RemoveTab")',
        { menuInstanceName: panelId },
        function (data,status) {
            alert("Status: "+ status);
        }
    );

unfortunately not working too (same result with Url.Action). What is wrong?

Answer 1

I found a solution which working:

        $.post('RemoveTab',
        { menuInstanceName: panelId },
        function (data,status) {
            //alert("Status: "+ status);
        }
    );

While The action I need to fire up is in the same controller, is working, if not....