Unable to call controller action from a partial view rendered via ajax

Question

i have the following set up :

A) HTML div container in Parent View to hold partial view returned:

<div id="divProjectCostList" class="tablecontainer">

</div>

B) Controller method that returns the view model -

    [HttpGet]
    public PartialViewResult GetProjectCostsById(int viewProjectId)
    {
        return PartialView("ProjectCost", GetProjectCostsViewModel(viewProjectId));  
    }

C) AJAX to render the partial view HTML into the div above -

$(document).ready(function () {

    $(".retProjTran").click(function () {

        var projectid = $(this).data("projectid");

        $.ajax({
            cache: false,
            asynch: true,
            type: "GET",
            url: "@(Url.Action("GetProjectCostsById", "Project"))",
            data: { "viewProjectId": projectid },
            success: function (retData) {
                $('#divProjectCostList').html(retData);
            }
        })
    });
})

The above works just fine.

the Partial view set up in order to get elements from the returned model and render these in a table

@using (Html.BeginForm("ProjectCostList", "Project", FormMethod.Get))
{
<table class="table table-striped table-bordered table-condensed table-hover">
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.HiddenFor(modelItem => item.ProjectCostType)</td>
                <td>
                    @Html.ActionLink(item.ProjectCostType.ToString(), "", null,
                     new { @class = "retProjDetails", data_details = item.ProjectCostId })
                </td>
            </tr>
        }
    </tbody>
</table>
} 

This Partial view also needs to access a JS method -

$(".retProjDetails").click(function () {


        $.ajax({
            cache: false,
            asynch: true,
            type: "GET",
            url: "@(Url.Action("GetProjectCostDetails", "Project"))",
            data: { "viewProjectCostId": projectCostId },
            success: function (retData) {
            $('#divProjectCostList').html(retData);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError);
            }
        })
    });

I can see the JS function being called from the rendered Actionlink, however the relevant Controller action is simply not hit..

I'd imagine this is some sort of issue with how I am rendering the Partial, but cannot figure out what. Hope someone can provide a clue. Happy for any suggestions on whether this set up is optimal or I need to change..

Answer 1

You simply change your

@using (Html.BeginForm("ProjectCostList", "Project", FormMethod.Get)) 

to

@using (Html.BeginForm("ProjectCostList", "Project", FormMethod.Post))

in the Partial View and things will be fine.