How to implement pagination in MVC with bootstrap datepicker?

Question

Friends, I have implemented a solution type ASP.NetCore with a project MVC. I have a view in which I used https://github.com/cloudscribe/cloudscribe.Web.Pagination for pagination. **Honestly I took the example and used it. But I don't get the detail about this code example.

The problem that I have now is that, I have to include filters, like datepicker range. So I am using bootstrap datepicker. But the pagination stopped working.

The pagination gets this parameters in querytrings to work: pageNumber, pageSize and query. When I send the request of the filter date, I can get the dates selected in the controller, but the parameters of pagination get in null.

This is an URL example with pagination working fine: http://localhost/pager?query=1&pagesize=10&pageNumber=2

This is an URL when I send the request in the button 'Apply' with dates range, and pagination died without its parameters like 'query': http://localhost/pager?startDate=11/04/2019&endDate=11/11/2019

I suppose I have to send the current querystring in the request too, but I'm not sure, I'm kind of new at this technology. Thanks for any help.

My view →

@using (Html.BeginForm("Details", "Movements", routeValues: new { pageNumber = @Model.UserMovementsResults.PageNumber, pageSize = @Model.UserMovementsResults.PageSize, query = @Model.Query }, FormMethod.Get))
{
    

    
        

        
            Date From 

            @Html.TextBoxFor(model => model.StartDateFilter, "{0:d MMM yyyy}", new
            {
            id = "StartDateFilter",
            @class = "input-sm form-control",
            @readonly = "readonly"
            })

             To 

            @Html.TextBoxFor(model => model.EndDateFilter, "{0:d MMM yyyy}", new
            {
            id = "EndDateFilter",
            @class = "input-sm form-control",
            @readonly = "readonly"
            })
        
        

        
    

    

    

    
            @foreach (var item in Model.UserMovementsResults.Data)
            {
                
            }
        
        
            
                
                    @Html.DisplayNameFor(model => model.UserMovementsResults.Data.FirstOrDefault().Date)
                
                
                    @Html.DisplayNameFor(model => model.UserMovementsResults.Data.FirstOrDefault().Description)
                
            
        

        
                    
                        @Html.DisplayFor(modelItem => item.Date)
                    
                    
                        @Html.DisplayFor(modelItem => item.Description)
                                            
                

    
    
        
    
}

My Controller (I've tried to set the method HttpGet and HttpPost) →

   [HttpGet]        
   public async Task Details(int? pageNumber, int? pageSize, int? query, string startDate, string endDate)
    {
        if (query == null)
        {
            return NotFound();
        }

        DateTime startDateFilter = DateTime.Now.StartOfWeek(DayOfWeek.Monday);
        DateTime endDateFilter = DateTime.Now.EndOfWeek(DayOfWeek.Monday);

        var userMovements = await GetUserMovements(user.Id, pageNumber, pageSize, query, startDateFilter, endDateFilter);

        return View(userMovements);
        }
    }

My ViewModel →

public class UserMovementsViewModel
{
    private DateTime? endDateFilter;

    public UserMovementsViewModel()
    {
        UserMovementsResults = new PagedResult();
    }

    public string Query { get; set; } = string.Empty;

    [Key]
    public int Id { get; set; }

    public int UserId { get; set; }

    public PagedResult UserMovementsResults { get; set; } = null;

    public DateTime? StartDateFilter { get; set; }

    public DateTime? EndDateFilter
    {
        get => endDateFilter;
        set
        {
            if (value != null)
            {
                endDateFilter = value;
                endDateFilter = endDateFilter.Value.AddHours(23).AddMinutes(59).AddSeconds(59);
            }                
        }
    }
}
public class UserMovementsResult
{
    public DateTime Date { get; set; }

    public string Description { get; set; }
}

Roger Ospina · Accepted Answer

If anyone needs this too, here is how I got it → I was missing the setting of the parameters in the controller with ViewBag. Like this → ViewBag.StartDateFilter = starDate; Otherwise, It was becoming at null always, when I tried to change at another page. I don't why. I used a hidden field too to save the "query" (in my case this is the user id) because when I sent the request submit in the button, this was losing its value too. What a mess !!

Here is a minified version

View:




                
        
            Date From 

            @Html.TextBox("startDate", null, new
       {
           id = "startDate",
           @class = "input-sm form-control",
           @readonly = "readonly"
       })

             To 

            @Html.TextBox("endDate", null, new
       {
           id = "endDate",
           @class = "input-sm form-control",
           @readonly = "readonly"
       })
                    
        
        @Html.Hidden("Query", (object)ViewBag.Query)
    




        @foreach (var item in Model.UserMovementsResults.Data)
        {
            
        }
    
    
        
            
                @Html.DisplayNameFor(model => model.UserMovementsResults.Data.FirstOrDefault().Date)
            
            
                @Html.DisplayNameFor(model => model.UserMovementsResults.Data.FirstOrDefault().Description)
                            
        
    

    
                
                    @Html.DisplayFor(modelItem => item.Date)
                
                
                    @Html.DisplayFor(modelItem => item.Description)

Controller:

[HttpGet]
    public async Task Details(int? pageNumber, UserMovementsViewModel userMovementsViewModel)
    {
        userMovementsViewModel.StartDateFilter = DateTime.ParseExact(userMovementsViewModel.StartDate, "dd/MM/yyyy", CultureInfo.InvariantCulture);
        userMovementsViewModel.EndDateFilter = DateTime.ParseExact(userMovementsViewModel.EndDate, "dd/MM/yyyy", CultureInfo.InvariantCulture).SetEndOfDay();

        var userMovements = await GetUserMovements(pageNumber, userMovementsViewModel).ConfigureAwait(true);

        ViewBag.StartDateFilter = userMovementsViewModel.StartDateFilter.Value.ToString("dd/MM/yyyy", CultureInfo.InvariantCulture);
        ViewBag.EndDateFilter = userMovementsViewModel.EndDateFilter.Value.ToString("dd/MM/yyyy", CultureInfo.InvariantCulture);
        ViewBag.Query = userMovementsViewModel.Query;

        return View(userMovements);
    }

My Class:

public class UserMovementsViewModel
{
    public UserMovementsViewModel()
    {
        UserMovementsResults = new PagedResult();
    }
    public string Query { get; set; } = string.Empty;
    public PagedResult UserMovementsResults { get; set; } = null;
    public DateTime? StartDateFilter { get; set; }
    public DateTime? EndDateFilter { get; set; }
    public string StartDate { get; set; }
    public string EndDate { get; set; }
}

How to implement pagination in MVC with bootstrap datepicker?

Answers (2)

Related Questions