AJAX在C#中处理大型数据表的分页与搜索

发布时间：2024-09-09 16:37:52 作者：小樊
来源：亿速云阅读：79

在C#中处理大型数据表的分页和搜索，通常需要使用ASP.NET Web API或MVC来创建一个Web服务。这个Web服务可以接收AJAX请求，并返回分页和搜索后的数据。以下是一个简单的示例，展示了如何在C#中使用ASP.NET MVC和Entity Framework实现分页和搜索功能。

首先，创建一个ASP.NET MVC项目，并添加一个模型（Model）来表示数据表。例如，我们创建一个名为Product的模型：

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

接下来，创建一个名为ProductRepository的仓库类，用于处理数据库操作。在这个类中，我们将实现分页和搜索功能：

public class ProductRepository
{
    private readonly ApplicationDbContext _context;

    public ProductRepository(ApplicationDbContext context)
    {
        _context = context;
    }

    public async Task<IEnumerable<Product>> GetProductsAsync(int page, int pageSize, string searchTerm)
    {
        var query = _context.Products.AsQueryable();

        if (!string.IsNullOrEmpty(searchTerm))
        {
            query = query.Where(p => p.Name.Contains(searchTerm));
        }

        return await query
            .OrderBy(p => p.Id)
            .Skip((page - 1) * pageSize)
            .Take(pageSize)
            .ToListAsync();
    }
}

然后，创建一个名为ProductsController的控制器，用于处理AJAX请求：

public class ProductsController : Controller
{
    private readonly ProductRepository _repository;

    public ProductsController(ProductRepository repository)
    {
        _repository = repository;
    }

    [HttpGet]
    public async Task<IActionResult> GetProducts(int page, int pageSize, string searchTerm)
    {
        var products = await _repository.GetProductsAsync(page, pageSize, searchTerm);
        return Json(products);
    }
}

最后，在前端页面上，使用jQuery发送AJAX请求，并处理返回的数据：

<!DOCTYPE html>
<html>
<head>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
   <input type="text" id="searchTerm" placeholder="Search..." />
   <button id="searchButton">Search</button>
   <table id="productsTable">
       <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Price</th>
            </tr>
        </thead>
       <tbody></tbody>
    </table>

   <script>
        $(document).ready(function () {
            const pageSize = 10;
            let currentPage = 1;
            let searchTerm = "";

            function loadProducts() {
                $.get("/Products/GetProducts", { page: currentPage, pageSize: pageSize, searchTerm: searchTerm }, function (data) {
                    $("#productsTable tbody").empty();
                    data.forEach(function (product) {
                        $("#productsTable tbody").append(`
                            <tr>
                                <td>${product.id}</td>
                                <td>${product.name}</td>
                                <td>${product.price}</td>
                            </tr>
                        `);
                    });
                });
            }

            $("#searchButton").click(function () {
                searchTerm = $("#searchTerm").val();
                currentPage = 1;
                loadProducts();
            });

            // 初始化加载第一页数据
            loadProducts();
        });
    </script>
</body>
</html>

这个示例展示了如何在C#中使用ASP.NET MVC和Entity Framework实现大型数据表的分页和搜索功能。当然，你还可以根据需要对此进行扩展和优化。

AJAX在C#中处理大型数据表的分页与搜索

相关阅读