[MVC] - How to refresh partial view using AJAX GET method

Question

I need to refresh my partial view in my MVC razor type with parameter from my DropDownList. The problem is that, it doens't refresh the table from my partial view at all. But it can capture the parameter. Technically, I just want to do a filtering from my table.

 

Here's my script:

$("#toTech").change(function () {
    $.ajax({
        type: "GET",
        url: "/joballocation/TableData",
        data: { Tech: $(this).val() }
    });

});

 If I put the acction success:

$("#toTech").change(function () {
    $.ajax({
        type: "GET",
        url: "/joballocation/TableData",
        data: { Tech: $(this).val() }
    }).success(function () {
        $("#theTable").load("/joballocation/TableData");
    });

});

 It calls again my controller but no parameter.

 

Here's my controller:

private string tech;
[HttpGet]
public ActionResult TableData(string Tech)
{
    dynamic model = new ExpandoObject();

    if (ModelState.IsValid)
    {
        if (Tech == "") { Tech = "NULL"; }
        tech = Tech.Replace(" ", String.Empty);

        model.MyJob = GetMyJobs();
        model.TJob = RemoveMyJobs(tech);
    }

    return PartialView("_joballocation", model);
}

 My view:

<div class="row">
    <div class="col-sm-4">
        <table class="table table-striped table-hover table-condensed" id="myJobTable">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col"></th>
                    <th scope="col">Date</th>
                    <th scope="col">SO No</th>
                    <th scope="col">Serial</th>
                    <th scope="col">Status</th>
                    <th scope="col">Technician</th>
                </tr>
            </thead>
            @{
                var count = 1;

                foreach (MyJobAllocation tJob in Model.MyJob)
                {
                <tr>
                    <td>@tJob.row</td>
                    <td>
                        <input type="checkbox" id="chk@(count)" />
                    </td>
                    <td>@tJob.date</td>
                    <td>@tJob.so_no</td>
                    <td>@tJob.serial</td>
                    <td>@tJob.status</td>
                    <td>@tJob.technician</td>
                </tr>

                    count += 1;
                }
            }
        </table>
    </div>
    <div class="col-sm-1">
        <input type="button" value=">" onclick="asign_to()" />
    </div>
    <div class="w-100"></div>
    <div class="col-sm-1">
        <input type="button" value="<" />
    </div>
    <div class="col-sm-4">
        <table class="table table-striped table-hover table-condensed" id="ToJobTable">
            <thead class="thead-dark">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col"></th>
                    <th scope="col">Date</th>
                    <th scope="col">SO No</th>
                    <th scope="col">Serial</th>
                    <th scope="col">Status</th>
                    <th scope="col">Technician</th>
                </tr>
            </thead>
            @{
                count = 1;

                foreach (ToJobAllocation myJob in Model.TJob)
                {
                <tr>
                    <td>@myJob.row</td>
                    <td>
                        <input type="checkbox" id="chk@(count)" />
                    </td>
                    <td>@myJob.date</td>
                    <td>@myJob.so_no</td>
                    <td>@myJob.serial</td>
                    <td>@myJob.status</td>
                    <td>@myJob.technician</td>
                </tr>

                    count += 1;
                }
            }
        </table>
    </div>
</div>