AJAX在C#中实现数据的分页显示

发布时间：2024-09-09 16:19:48 作者：小樊
来源：亿速云阅读：78

在C#中，我们可以使用ASP.NET Web Forms或ASP.NET MVC来实现AJAX分页。这里我将给出一个简单的ASP.NET Web Forms示例。

首先，创建一个新的ASP.NET Web Forms项目。
在项目中添加一个新的Web Form（例如：Default.aspx）。
在Default.aspx中，添加以下代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AjaxPagingDemo.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>AJAX Paging Demo</title>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
        function loadData(pageIndex) {
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetData",
                data: JSON.stringify({ pageIndex: pageIndex }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    $("#dataContainer").html(response.d);
                },
                error: function (response) {
                    alert("Error: " + response.statusText);
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="dataContainer">
        </div>
       <button onclick="loadData(1)">Page 1</button>
       <button onclick="loadData(2)">Page 2</button>
       <button onclick="loadData(3)">Page 3</button>
    </form>
</body>
</html>

在Default.aspx.cs中，添加以下代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AjaxPagingDemo
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        [WebMethod]
        public static string GetData(int pageIndex)
        {
            // 模拟从数据库获取数据
            List<string> data = new List<string>
            {
                "Item 1",
                "Item 2",
                "Item 3",
                "Item 4",
                "Item 5",
                "Item 6",
                "Item 7",
                "Item 8",
                "Item 9"
            };

            int itemsPerPage = 3;
            int startIndex = (pageIndex - 1) * itemsPerPage;
            int endIndex = Math.Min(startIndex + itemsPerPage, data.Count);

            string result =<table>";
            for (int i = startIndex; i < endIndex; i++)
            {
                result += $"<tr><td>{data[i]}</td></tr>";
            }
            result += "</table>";

            return result;
        }
    }
}

现在，当你运行项目并点击不同的分页按钮时，将通过AJAX请求加载相应的数据。这个示例仅用于演示目的，实际项目中你需要根据自己的需求和数据源进行调整。

AJAX在C#中实现数据的分页显示

相关阅读