Display different view in popup or html div based on clicking url action

Question

How can I display a view in popup or in different div location in the original view based on the call to different action in the controller .

I tried to use ajax call but it didn't work. I don't know why. I used a jquery model dialog but it redirect the user to another empty background page and display the popup.

It's important that not to change the original page.

I appreciate any help.

function ButtonClick(x) {
    $.ajax({
        type: "POST",
        cache: false,
        url: "Tasks/AddWorkersToTask",
        data: { id: x },
        dataType: "html",
        async: true,
        success: function (data) {
            $("#Content").html(data);
              alert('success');
        }
    });
    return false;
}


<a class="Tab" href="#" onclick="ButtonClick('@Model.PK_TaskID');"> AJAX Call </a>

<div id="Content">  </div>

Edit The error in the console is : Empty string passed to getElementById().

This function works well. i tried to test it in case action Link and it successfully add the data.

    public ActionResult AddWorkersToTask(int id=0)
    {
        TempData["TaskID"] = id;
        return PartialView();

    }
    [HttpPost]
    public ActionResult AddWorkersToTask(FormCollection form, string textbox1,string TaskID)
    {

Answer 1

First of all, look at your signatures in your controller. The AJAX request needs to match this.

type: "POST",
data: { id: x }

public ActionResult AddWorkersToTask(int id=0)

[HttpPost]
public ActionResult AddWorkersToTask(FormCollection form, string textbox1,string TaskID)

If you are targeting the HttpPost you have the wrong signature. Or it needs to be a GET request. Your AJAX should have thrown you an error which you would need to capture with the .error() callback.