Asp.net Core how to use ReflectionIT.Mvc.Paging with ViewModel?

Question

I want to use paging with a ViewModel in Asp.net Core 2.2.

You can see my code below

public class UserQuestionListComplexViewModel
{
   //There are 2 ViewModel in this Class

    public UserPanelViewModel Model1 { get; set; }
    public List<UserQuestionListViewModel> Model2 { get; set; }
}

And in my Controller

public class UserHomeController : Controller
{
    private readonly UserManager<ApplicationUsers> _userManager;
    private readonly IQuestionRepository _iq;

    public UserHomeController(UserManager<ApplicationUsers> userManager, 
        IQuestionRepository iq)
    {
        _userManager = userManager;
        _iq = iq;
    }

    [HttpGet]
    public async Task<IActionResult> QuestionList(UserQuestionListComplexViewModel model,
      int page = 1)
    {
        var query = _iq.UserQuestionList(_userManager.GetUserId(HttpContext.User), page);
        model.UQVM = await query;
        return View(model);
    }
}

And below is QuestionRepository

public async Task<List<UserQuestionListViewModel>> UserQuestionList(string UserID, 
  int page = 1)
{
    var questionQuery = (from q in _db.QuestionTbl
                         where q.UserID == UserID
                         select new UserQuestionListViewModel()
                         {
                             ....
                         })
                         .AsNoTracking()
                         .Where(q => q.qflag == 0)
                         .OrderBy(q => q.QuestionID);

    var pagedResult = await PagingList<UserQuestionListViewModel>.CreateAsync(
        questionQuery, 1, page);
        
    return pagedResult;
}

At the end View.cshtml

@model UserQuestionListComplexViewModel
@using ReflectionIT.Mvc.Paging

@await Component.InvokeAsync("UserInfo", Model.Model1)

<div>  
    <table>
        <thead class="thead-dark">
            <tr>
                <td>...</td>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Model2)
            {
                <tr>
                    <td>...</td>
                </tr>
            }
        </tbody>
    </table>

    <nav class="pagenav">
        @await this.Component.InvokeAsync("Pager", new { PagingList = this.Model })
    </nav>
</div>

But i get below error

InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'ReflectionIT.Mvc.Paging.PagingList`1[porseman.Models.ViewModels.UserQuestionListViewModel]', but this ViewDataDictionary instance requires a model item of type 'porseman.Areas.UserPanel.Models.UserComplexViewModel.UserQuestionListComplexViewModel'.

Answer 1

Look at your PagingList creation function ,the type is UserQuestionListViewModel:

 var pagedResult = await PagingList<UserQuestionListViewModel>.CreateAsync(questionQuery, 1, page);

But when you config the PagingList in view , you are setting type UserQuestionListComplexViewModel , so replace this line :

 @await this.Component.InvokeAsync("Pager", new { PagingList = this.Model })

With :

 @await this.Component.InvokeAsync("Pager", new { PagingList = this.Model.Model2 })

Also , you might need to change the type Model2 to PagingList<UserQuestionListViewModel> in your view model :

public PagingList<UserQuestionListViewModel> Model2 { get; set; }