paging issue with partial view using ajax call

Question

I have a dialog popup form that has search button, I used ajax to call an action method whenever search is clicked. The method gets the data from the db based on what filter the user enters, then the action method returns a partial view that will display the webgrid. My problem is that when it displays the first page of the webgrid fine, but if I go to the next page the webgrid disappears. Controller

[HttpGet]
public ActionResult Index()
{
    return View();
}

[HttpPost]
public ActionResult SubscriberLookUp(Member filter)
{
    Member model = new Model();
    //retrieve data from db based on filter and store result in a session

    model = (Member)Session["UserSession"];
    return PartialView("MemberGrid", model);
}

View:

<div id="ASGrid">

</div>

<script>
$(document).ready(function () {
$("#ASearchbtn").click(function () {

    var ASData = $("#AdvanceSearchForm").serialize();

    $.ajax({
        type: "POST",
        url: "/SearchPayment/SubscriberLookUp",
        data: ASData,
        datatype: "html",
        cache: false,
        success: function (response) {
            $("#AdvSearch").modal("hide");
            $('#ASGrid').html(response);
        },
        complete: function () {
            $("#AdvSearch").modal("hide");
        }
    });
  })
})

Please help, I don't know what I'm doing wrong or what I'm not doing. My guess is that since the ajax call is for the search button only it will only display the initial result (first page) So I thought of changing my SubscriberLookup method to return View(model) and then create another method in my controller:

public ActionResult GetGrid()
{
    Member model = (Member)Session["UserSession"]; 
    return PartialView("MemberGrid", model);
}

then create another ajax call in my main view:

function GetGrid(){
$.ajax({
    type: "POST",
    url: "/SearchPayment/GetGrid",
    datatype: "html",
    cache: false,
    success: function (response) {
        $("#AdvSearch").modal("hide");
        $('#ASGrid').html(response);
    },
    complete: function () {
        $("#AdvSearch").modal("hide");
    }
});
}

But it's not working, it doesn't seem to be making the second ajax call.

Also another question, can I do [HttpPost] on a method that is not ActionResult?

Hi Mike This link may be help you.. Check this https://stackoverflow.com/questions/9903420/paging-sorting-not-working-on-web-grid-used-in-partial-view?rq=1 — Dilip Oganiya, Jul 03 '17 at 12:40
How can I get the page number of my table? since that example have a dropdown where the user can specify what page to view. — OiC, Jul 03 '17 at 17:07

score 0 · Answer 1 · answered Feb 06 '21 at 05:00

0

I know I am late. I ran into the same issue. Pagination in WebGrid only works with GET request. Also if you add a int? Page parameter to your Action method being called from Ajax, you can get the page number

answered Feb 06 '21 at 05:00

Pramesh

1,194
12
16

paging issue with partial view using ajax call

1 Answers1