CODEWITHSUNDEEP
jqueryajaxasp.net-mvc
tony09uk
tony09uk

Reputation: 2991

asp mvc partial page view update with ajax not working

After trying an unknown number of variations I have come to the conclusion that I need to ask for help.

I am simply trying to call a method in my controller that renders a partial view using the jquery ajax functionality. I can't see what i'm doing wrong, with all the information out there on this subject I guessed it would be an easy task, but i'm missing something (i'm guessing, really obvious) and cannot figure out what.

_Layout.cshtml (master page)

<script src="@Url.Content("~/Content/Scripts/jquery-1.10.2.js")"></script>
<script src="@Url.Content("~/Content/Scripts/jquery-ui-1.11.4.js")"></script>
<script src="@Url.Content("~/Content/Scripts/clickableRow.js")"></script>
<script src="@Url.Content("~/Content/Scripts/jquery.validate.min.js")"></script>
<script src="@Url.Content("~/Content/Scripts/jquery.validate.unobtrusive.min.js")"></script>

MyController.cs (the partial view method)

[ChildActionOnly]
public ActionResult _MyPartialView (int page = 1)
{
    ModelData pt = new ModelData ();
    List<ModelData > md = pt.PagesOfData(page);
    return PartialView(md);
}

_MyPartialView (lines ommited....)

@{
Layout = null;
}
<div id="myDiv">
    <form id="theFormToRefresh ">
        ......SOME FIELDS......
    </form>
</div>

Some of the javacript I have tried

Attempt x

$().ready(function () {
    $(".page-number").on("click", function () {
        var selectedPage = parseInt($(this).html());

        $.ajax({
            url: '@Url.Action("_MyPartialView")',
            type: "POST",
            datatype: "html",
            data: selectedPage,
            success: function (data) {
                $('#myDiv').empty();
                $('#myDiv').html(data);
            }
        });
    });
});

Attempt y

$().ready(function () {
    $(".page-number").on("click", function () {
        $("#myDiv").load('@Url.Action("_MyPartialView", "MyController")');
    });
});

Attempt Z

$().ready(function () {
    $(".page-number").on("click", function () {
        var selectedPage = parseInt($(this).html());
        $.ajax({
                url: '@Url.Action("_MyPartialView", "MyController")',
                data: { "page": selectedPage },
                success: function (data) {
                    $("#myDiv").html(data);
                }
            });
    });
});

Upvotes: 0

Views: 326

Answers (1)

user3559349
user3559349

Reputation:

You _MyPartialView() method is decorated with the [ChildActionOnly] which means that the method can be called only as a child method from within a view, for example by using

@Html.Action("_MyPartialView", new { page = 1 })

It cannot be called by navigating to it as a result of a user request (using a link, the address bar or ajax).

You need to remove the attribute from the method if you want to call it using ajax.

Upvotes: 1

Related Questions