ASP.NET PagedList.MVC for ajax with PartialView

Question

I am using PagedList.Mvc and have a bit of problem. So I have an Index view where I can select country from a dropdownlist and submit using ajax.

View:

@model testModel.Models.Test

@using (Ajax.BeginForm("GetEmployee", "Test", new AjaxOptions
{
    HttpMethod = "POST",    
    UpdateTargetId = "showResult" 
})) 
{
@Html.AntiForgeryToken()
    @Html.DropDownList("CountryId", null, "-- Select Country --")            
    <input type="submit" value="Search" class="btn btn-default" />
}

<div id="showResult"></div>

In my GetEmployee Controller method, I am looping through the db and pass the model object to the partial view.

Controller:

    [HttpPost]
    public ActionResult GetEmployee(int CountryId, int? page)
    {            
        var model = db.Employee
            .Include(x => x.Country)               
            .Where(x => x.Country.CountryId == CountryId)            
            .ToList();

        int pageSize = 3;
        int pageNumber = (page ?? 1);

        return PartialView("PartialEmployee", model.ToPagedList(pageNumber, pageSize));            
    }

In my partialEmployee view, I am showing the employee names in the table.

PartialEmployee view:

@model PagedList.IPagedList<testModel.Models.Employee>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

@{
    Layout = null;
}

<table class="table table-hover">
    <tr>
        <th>Username</th> 
    </tr>

    @foreach (var item in Model)
    {         
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.EmployeeName)
            </td>             
        </tr>
    }

</table>
<br />
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

<div id="contentPager">
    @Html.PagedListPager(Model, page => Url.Action("Index", new { page }))
</div>

So the problem here is that when I click on the next page (ex: 2) it returns back to the index page without any table showing in UpdateTargetId.

<div id="showResult"></div>

Any suggestions or sample codes would be greatly appreciated.

What are you expecting to happen? By default PagedList does not make an ajax call although there are options to use ajax - refer [this answer](http://stackoverflow.com/questions/24679320/ajax-pagedlist-with-partial-view) for an example. — , Sep 09 '16 at 22:12
Alright thanks. I think the link has a good example. I will try when I get home. — bbusdriver, Sep 09 '16 at 22:44
@StephenMuecke you said PagedList has an option to use ajax, and do you think it can be applied to my case? So in my case, the first pager looks fine, but when I click on the next one, the table disappears and goes back to the first Index page. — bbusdriver, Sep 09 '16 at 22:55
That's because you have `Url.Action("Index", new { page })` which goes to the `Index()` method. Not clear what you wanting to do, but typically you handle this by having a parameter in the `Index()` method for the country and passing the country to the method (e.g. `Url.Action("Index", new { page, Country = ViewBag.Country})` as described in [this article](http://www.asp.net/mvc/overview/getting-started/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application) — , Sep 09 '16 at 23:00
Stephen, but that method works in html.BeginForm, not for Ajax.BeginForm — bbusdriver, Sep 10 '16 at 06:26

score 0 · Answer 1 · edited Sep 10 '16 at 02:06

0

Change the web method type to GET instead of POST
Remove HttpPost attribute from the GetEmployee() method
Change your Url.action to Url.Action("GetEmployee", new { page, CountryId=Model.FirstOrDefault().CountryId })

edited Sep 10 '16 at 02:06

reformed

4,505
11
62
88

answered Sep 09 '16 at 23:44

Aldo

204
1
7

no, your CountryId=Model.FirstOrDefault().CountryId part doesn't make sense since CountryId is only called in Index View, not in the partialView. – bbusdriver Sep 10 '16 at 06:23

bbusdriver · Accepted Answer · 2016-09-10T06:53:38.213

Okay, based on Stephen and Aldo's comments, I figured it out.

I had to add ViewBag.CountryId = CountryId; in the GetEmployee method, so it can be used in the View.

So in the View:

@Html.PagedListPager(Model, page => Url.Action("GetEmployee",
   new
   {
       page,
       CountryId = ViewBag.CountryId          
   }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "showResult" }))

It worked smoothly.

ASP.NET PagedList.MVC for ajax with PartialView

2 Answers2