Tuesday, 20 January 2015

Webgrid with sorting and Paging in MVC

Data Access Class

public class ModelServices
    {
        //For Custom Paging
        public IEnumerable<Customer> GetCustomerPage(int pageNumber, int pageSize, string sort, bool desc)
        {
            List<Customer> lst = GetCustomer();
            int count = lst.Count;        
            // I am sorting only Name. You can also sort with other column
            if (desc)
            {
                lst = lst.OrderByDescending(p => p.Name).ToList();
            }
            else
            {
                lst = lst.OrderBy(p => p.Name).ToList();
            }
            lst =  lst.Skip((pageNumber - 1) * pageSize).Take(pageSize).ToList();
            lst[0].totalRow = count;
            return lst;
        }       


        private List<Customer> GetCustomer()
        {
            List<Customer> lst = new List<Customer>();
            lst.Add(new Customer() { Id = 1, Name = "Ajay Patel", City = "Kalol",
                                                  DOB = Convert.ToDateTime("02/02/1990 7:00:00") });
            lst.Add(new Customer() { Id = 2, Name = "John Kerry", City = "NY",
                                                  DOB = Convert.ToDateTime("01/02/1987") });
            lst.Add(new Customer() { Id = 3, Name = "Lerry Shaw", City = "Newark",
                                                  DOB = Convert.ToDateTime("11/12/1990") });
            lst.Add(new Customer() { Id = 4, Name = "Jerry Ducat", City = "Jercy",
                                                  DOB = Convert.ToDateTime("2/28/1982") });
            lst.Add(new Customer() { Id = 5, Name = "Sara James", City = "Dakota",
                                                 DOB = Convert.ToDateTime("06/02/1958") });
            lst.Add(new Customer() { Id = 6, Name = "Nensi pit", City = "Concord",
                                                  DOB = Convert.ToDateTime("07/12/1948") });
            lst.Add(new Customer() { Id = 7, Name = "Brad pit", City = "California",
                                                  DOB = Convert.ToDateTime("08/22/1978") });
            lst.Add(new Customer() { Id = 8, Name = "Lerry Paize", City = "Michigan",
                                                  DOB = Convert.ToDateTime("10/28/1989") });
            lst.Add(new Customer() { Id = 9, Name = "James Anderson", City = "Utah",
                                                  DOB = Convert.ToDateTime("01/30/1992") });
            lst.Add(new Customer() { Id = 10, Name = "Bruice Willice", City = "Salt Lake City",
                                                  DOB = Convert.ToDateTime("12/02/1955") });
            lst.Add(new Customer() { Id = 11, Name = "Tom Cruice", City = "Serbia",
                                                  DOB = Convert.ToDateTime("12/31/1948") });
            lst.Add(new Customer() { Id = 12, Name = "Ocean", City = "Burban",
                                                  DOB = Convert.ToDateTime("01/02/1965") });
            lst.Add(new Customer() { Id = 13, Name = "Tes", City = "Illinoise",
                                                  DOB = Convert.ToDateTime("01/01/1975") });
            lst.Add(new Customer() { Id = 14, Name = "William", City = "springField",
                                                  DOB = Convert.ToDateTime("07/12/1983") });
            lst.Add(new Customer() { Id = 15, Name = "John MacLarren", City = "Nevada",
                                                  DOB = Convert.ToDateTime("09/23/1984") });
            return lst;
        }
    }


    /// <summary>
    /// Class Used in Webgrid
    /// </summary>
    public class CustomerList
    {
        public int TotalRows { get; set; }
        public IEnumerable<Customer> Customer { get; set; }
        public int PageSize { get; set; }
    }


    /// <summary>
    /// Entity Class for Customer
    /// </summary>
    public class Customer
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string City { get; set; }
        public DateTime DOB { get; set; }
        public int totalRow { get; set; }
    }



Controller Code

public class HomeController : Controller
    {
        public ActionResult Index(int page = 1, string sort = "Name", string sortDir = "ASC")
        {
            ModelServices mobjModel = new ModelServices();
            const int pageSize = 5;
            bool desc = sortDir.ToLower() == "desc" ? true : false;
            var customer = mobjModel.GetCustomerPage(page, pageSize, sort, desc); ;
            var data = new CustomerList()
            {
                TotalRows = customer.ToList().Count > 0 ? customer.ToList()[0].totalRow : 0,             
                Customer = customer,
                PageSize = pageSize
            };

            return View(data);
        }
    }


Code in Index.csHtml (view)

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
@model MvcApplication3.Models.CustomerList
@{   
    WebGrid grid = new WebGrid(rowsPerPage:5);
    grid.Bind(Model.Customer,
             autoSortAndPage: false,
             rowCount: Model.TotalRows);
}

@grid.GetHtml(tableStyle: "table table-bordered table-hovered", // Css Class for Table
             fillEmptyRows: false, // Bind the grid with blank upto pageSize
             alternatingRowStyle: "alternate-row",
             headerStyle: "grid-header",
             footerStyle: "grid-footer",
             mode: WebGridPagerModes.All, // Set Page Style mode
             firstText: "<< First",
             previousText: "< Prev",
             nextText: "Next >",
             lastText: "Last >>",
             columns: new[] {                            
                             grid.Column(columnName:"Name", header:"Customer Name"),
                             grid.Column(columnName: "City", header:"City"),
                             grid.Column(columnName: "DOB", header:"Birth Date",
                                                format:@<text> @item.DOB.ToString("MM/dd/yyy")
                                                              </text>, canSort:false),
                             grid.Column(columnName: "Id", header:"Text Column",
                                                format:@<text> <input type="text" value="@item.Id.ToString()" />
                                                             </text>, canSort:false, style:"col-md-1")
                           //grid.Column(columnName: "Name of Column", header:"Header text",
                                                 format:@<text> Custom fields. Access Datas using 
                                                                         @item.PropertyName </text>,
                                                               canSort:Allow to sort or not, style: Apply Class to cell)
                            }
)


result is like be;ow :

No comments:

Post a comment