add pagination to partial view in asp.net mvc

Question

I'm trying to add pagination to my partialview

This is how model classes exiting

public class DashboardViewModel
{
    public List<ProductTableViewModel> ProductTable;

}

public class ProductTableViewModel
{       
    public string Product_ID { get; set; }     
    public string Product_Title { get; set; }

    public IEnumerable<ProductTableViewModel> Items { get; set; }
    public PaginationModel.Pager Pager { get; set; }

    public int PageSize { get; set; }
    public int PageCount { get; set; }
    public int CurrentPageIndex { get; set; }

}

this is the controller method

    public ActionResult ProductsTablePartial(int? page)
    {
        var allproducts = ..

        var pager = new PaginationModel.Pager(allproducts.Count(), page);

        var viewModel = new ProductTableViewModel
        {
            Items = allproducts.Skip((pager.CurrentPage - 1) * pager.PageSize).Take(pager.PageSize),
            Pager = pager
        };

        return PartialView("ProductsTablePartial", viewModel);
    }

This is main view page

@model project_name.Models.DashboardViewModel

@{
}

<div>
    @Html.Action("ProductsTablePartial", "Home")
</div>

this is partial view with pagination controls

@model IEnumerable< project_name.Models.ProductTableViewModel>

<fieldset>    

    <table class="table">

        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Product_ID)
            </th>

            <th>
                @Html.DisplayNameFor(model => model.Product_Title)
            </th>

        </tr>

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

        }

    </table>

    <!-- pager -->
                <div class="col-md-10">
                    <!-- pager -->
                    @if (Model.Pager.EndPage > 1)
                    {
                        <ul class="pagination">

                        @if (Model.Pager.CurrentPage > 1)
                        {
                                <li>
                                    <a>First</a>
                                </li>

                                <li>
                                    <a>Previous</a>
                                </li>
                            }

                        @for (var page = Model.Pager.StartPage; page <= Model.Pager.EndPage; page++)
                        {
                                <li class="@(page == Model.Pager.CurrentPage ? "active" : "")">
                                    <a>@page</a>
                                </li>
                            }

                        @if (Model.Pager.CurrentPage < Model.Pager.TotalPages)
                        {
                                <li>
                                    <a>Next</a>
                                </li>

                                <li>

                                    <a>Last</a>
                                </li>
                         }
                        </ul>

                    }

                </div>  


</fieldset>

This code doesn't have any compile time errors but once this in runtime

I'm getting following exception

IEnumerable<ProductTableViewModel> does not contain a definition for 'Pager' and no extension method 'Pager' accepting a first argument of type IEnumerable<ProductTableViewModel>

Answer 1

The view model you are passing to your partial view is of type ProductTableViewModel not IEnumerable<ProductTableViewModel>. So make sure you adjust your partial accordingly:

@model project_name.Models.ProductTableViewModel

and then loop over the Items property of your model, not over the model itself:

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