How to make a complex data grid in ASP .Net 8 with pagination and sort and filters?(with bootstrap)

 Creating a complex data grid in ASP.NET 8 with pagination, sorting, and filtering using Bootstrap for styling involves several steps. Here, we'll outline a solution that includes setting up a controller to handle data fetching, creating a view with a data grid, and incorporating features like pagination, sorting, and filtering.

1. Set Up Your Project

  1. Create a new ASP.NET Core MVC project:

    bash

    dotnet new mvc -n ComplexDataGridExample
cd ComplexDataGridExample

  2. Install necessary packages:

    Ensure your project is set up with Bootstrap. You can add it via CDN in your layout file.

2. Model Definition

Create a model that represents the data you want to display in the grid.

Models/Product.cs:

csharp

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Category { get; set; }
    public decimal Price { get; set; }
    public int Stock { get; set; }
}

3. Controller Implementation

Create a controller to handle data operations including sorting, filtering, and pagination.

Controllers/ProductController.cs:

csharp

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;

public class ProductController : Controller
{
    private static List<Product> Products = new List<Product>
    {
        // Seed data
        new Product { Id = 1, Name = "Product 1", Category = "Category 1", Price = 10, Stock = 100 },
        new Product { Id = 2, Name = "Product 2", Category = "Category 2", Price = 20, Stock = 200 },
        // Add more products as needed
    };

    public IActionResult Index(string sortColumn, string sortOrder, string searchString, int pageNumber = 1, int pageSize = 10)
    {
        var products = Products.AsQueryable();

        // Filtering
        if (!string.IsNullOrEmpty(searchString))
        {
            products = products.Where(p => p.Name.Contains(searchString) || p.Category.Contains(searchString));
        }

        // Sorting
        switch (sortColumn)
        {
            case "name":
                products = sortOrder == "asc" ? products.OrderBy(p => p.Name) : products.OrderByDescending(p => p.Name);
                break;
            case "category":
                products = sortOrder == "asc" ? products.OrderBy(p => p.Category) : products.OrderByDescending(p => p.Category);
                break;
            case "price":
                products = sortOrder == "asc" ? products.OrderBy(p => p.Price) : products.OrderByDescending(p => p.Price);
                break;
            case "stock":
                products = sortOrder == "asc" ? products.OrderBy(p => p.Stock) : products.OrderByDescending(p => p.Stock);
                break;
            default:
                products = products.OrderBy(p => p.Id);
                break;
        }

        // Pagination
        int totalItems = products.Count();
        products = products.Skip((pageNumber - 1) * pageSize).Take(pageSize);

        ViewBag.TotalItems = totalItems;
        ViewBag.PageSize = pageSize;
        ViewBag.PageNumber = pageNumber;
        ViewBag.SortColumn = sortColumn;
        ViewBag.SortOrder = sortOrder;
        ViewBag.SearchString = searchString;

        return View(products.ToList());
    }
}

4. View Implementation

Create a view to display the data grid with pagination, sorting, and filtering.

Views/Product/Index.cshtml:

html

@model IEnumerable<Product>
@{
    ViewData["Title"] = "Products";
    var sortOrder = ViewBag.SortOrder as string ?? "asc";
    var oppositeSortOrder = sortOrder == "asc" ? "desc" : "asc";
    var pageSize = ViewBag.PageSize as int? ?? 10;
    var pageNumber = ViewBag.PageNumber as int? ?? 1;
    var totalItems = ViewBag.TotalItems as int? ?? 0;
    var totalPages = (int)Math.Ceiling((double)totalItems / pageSize);
    var searchString = ViewBag.SearchString as string ?? "";
}

<h2>Products</h2>

<form method="get" asp-action="Index">
    <div class="form-group">
        <input type="text" name="searchString" value="@searchString" class="form-control" placeholder="Search..." />
    </div>
    <button type="submit" class="btn btn-primary">Search</button>
</form>

<table class="table table-bordered table-striped mt-3">
    <thead>
        <tr>
            <th><a asp-action="Index" asp-route-sortColumn="name" asp-route-sortOrder="@oppositeSortOrder" asp-route-searchString="@searchString">Name</a></th>
            <th><a asp-action="Index" asp-route-sortColumn="category" asp-route-sortOrder="@oppositeSortOrder" asp-route-searchString="@searchString">Category</a></th>
            <th><a asp-action="Index" asp-route-sortColumn="price" asp-route-sortOrder="@oppositeSortOrder" asp-route-searchString="@searchString">Price</a></th>
            <th><a asp-action="Index" asp-route-sortColumn="stock" asp-route-sortOrder="@oppositeSortOrder" asp-route-searchString="@searchString">Stock</a></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in Model)
        {
            <tr>
                <td>@product.Name</td>
                <td>@product.Category</td>
                <td>@product.Price</td>
                <td>@product.Stock</td>
            </tr>
        }
    </tbody>
</table>

<nav>
    <ul class="pagination">
        <li class="page-item @(pageNumber == 1 ? "disabled" : "")">
            <a class="page-link" asp-action="Index" asp-route-pageNumber="@(pageNumber - 1)" asp-route-sortColumn="@ViewBag.SortColumn" asp-route-sortOrder="@ViewBag.SortOrder" asp-route-searchString="@searchString">Previous</a>
        </li>
        @for (var i = 1; i <= totalPages; i++)
        {
            <li class="page-item @(i == pageNumber ? "active" : "")">
                <a class="page-link" asp-action="Index" asp-route-pageNumber="@i" asp-route-sortColumn="@ViewBag.SortColumn" asp-route-sortOrder="@ViewBag.SortOrder" asp-route-searchString="@searchString">@i</a>
            </li>
        }
        <li class="page-item @(pageNumber == totalPages ? "disabled" : "")">
            <a class="page-link" asp-action="Index" asp-route-pageNumber="@(pageNumber + 1)" asp-route-sortColumn="@ViewBag.SortColumn" asp-route-sortOrder="@ViewBag.SortOrder" asp-route-searchString="@searchString">Next</a>
        </li>
    </ul>
</nav>

5. Enable Bootstrap

Ensure you have Bootstrap included in your project. You can include Bootstrap via CDN in your _Layout.cshtml.

Views/Shared/_Layout.cshtml:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ComplexDataGridExample</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

Summary

This setup provides a fully functional data grid with sorting, filtering, and pagination using ASP.NET 8 MVC and Bootstrap. You can further enhance this by adding more advanced features or optimizing the performance as per your application requirements.

Post a Comment