Question

I am rendering ajax request for action where i am expecting to receive a partial view.
instead i am getting full rendered page including layout page and i am not sure why

my action:

 public PartialViewResult Menu(int? caseId)
    {
        if (caseId != null)
        {
            ViewBag.MenuId = caseId;
        }
        return PartialView("_MenuPartial", null);
    }

My view is rendered using jquery ajax

  function loadMenu(id) {
                $.ajax({
                    data: "/Home/Menu?caseId=" + id,
                    success: function (data) {
                        alert(data);
                        $("#menucontainer").html(data);
                    }
                });
            }

and finally my view is which is named “_MenuPartial”:

<ul id="menu">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    @if (@ViewBag.MenuId == 1 || @ViewBag.MenuId == 2)
    {
        <li>link @ViewBag.MenuId</li>
    }
</ul>

Any idea why its returning full page instead a partial view?

Answer 1

Your .ajax() call looks a bit off. You should be using the “url” property to call your controller action. It would look something like this:

function loadMenu(id) {
    $.ajax({
        url: "/Home/Menu?caseId=" + id,
        success: function (data) {
            $("#menucontainer").html(data);
        }
    });
}

Assuming all of your files are in the correct folders, you should get the results you are expecting. If you need to pass a more complex data type to your action, you could serialize a JSON object and send that in the data parameter.