Add paging to view containing partial view and view model (Razor, MVC)

Question

I am trying to add paging to my razor view. Control Function contains a view model and view also has a partial view to render.It is giving errors on Model.FilterServices and Model.CustomerProfile and DisplayFor.

Controller Search Function:

    public ActionResult Search(FilterServicesViewModel sp , int? page)
        {

            var data = from profile in _context.Customers
                       join service in _context.CustomerServices
                       on profile.strUserID equals service.strUserID
                       where profile.CustomerTypeId == 1 
                       select profile;

            data = data.OrderBy(profile => profile.Name);

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


            var dataPaged = data.ToPagedList(pageNumber, pageSize);

  IEnumerable<SelectListItem> items = _context.ServicesOffered.Select(c => new SelectListItem
            {
                Value = c.lngServiceID.ToString(),
                Text = c.Name
            });

            var serviceProviderViewModel = new ServiceProvider
            {
                FilterServices = new FilterServicesViewModel(),
                CustomerServices = new CustomerServices()

            };
            serviceProviderViewModel.FilterServices.FindService = sp.FindService;
            serviceProviderViewModel.FilterServices.ServicesOffered = items;
            serviceProviderViewModel.CustomerProfiles = dataPaged;

            return View("SearchServiceProviders", serviceProviderViewModel);         
        }

Razor View Page:

@model PagedList.IPagedList<DatabaseMVCPractice.ViewModels.ServiceProvider>
@using PagedList.Mvc;
@using PagedList;


<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />

@{
    ViewBag.Title = "SearchServiceProviders";
}

<h2>Search Service Providers</h2>
@{
    Html.RenderPartial("_FilterView",Model.FilterServices);
}


<table class="table">
    <tr>
        <th></th>
    </tr>

 @foreach (var item in Model.CustomerProfiles)
    {
        <tr>
            <td>       
                <img src="@Url.Content("~/Images/Thumbs/"+item.ProfileImage)" alt="Image" />
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Address)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CustomerType)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.WhenDate)
            </td>
        </tr>
}

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

@Html.PagedListPager(Model, page => Url.Action("Index",
    new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

View Model Class:

  public class ServiceProvider
    {
        public CustomerProfile Customer { get; set; }

        public IEnumerable<CustomerProfile> CustomerProfiles { get; set; }
        public CustomerServices CustomerServices { get; set; }

        public FilterServicesViewModel FilterServices { get; set; }
    }

I get an error saying:

IPagedList<ServiceProvider>' does not contain a definition for 'CustomerProfiles' and no extension method 'CustomerProfiles' accepting a first argument of type 'IPagedList<ServiceProvider>' could be found (are you missing a using directive or an assembly

It is giving errors on Model.FilterServices and Model.CustomerProfile and DisplayFor

Nirjhar Vermani Nirjhar Vermani · Accepted Answer · 2019-05-07T21:27:43

In your view model, your model is of type paged list. As you have multiple models, you can run a loop to find the model you need.

@{
    foreach (var p in Model)
     {
        Html.RenderPartial("_FilterView", p.FilterServices);
     }
 }

@Html.PagedListPager(Model, page => Url.Action("Search",
    new { page }))

Also, in your controller, created a static paged list and pass that in your view

 List <ServiceProvider> serviceViews = new List<ServiceProvider>();

 serviceViews.Add(serviceProviderViewModel);

 int totalProfiles = data.Count();

 IPagedList<ServiceProvider> serviceProviders = new StaticPagedList<ServiceProvider>(serviceViews, pageNumber, pageSize,totalProfiles);

 return View("SearchServiceProviders", serviceProviders);

Add paging to view containing partial view and view model (Razor, MVC)

1 Answers