AJAX在C#中实现数据的懒加载

在C#中实现AJAX数据懒加载，通常需要结合ASP.NET MVC或Web API来创建一个Web服务。这样，你可以从客户端（如JavaScript）发起AJAX请求，然后在服务器端处理请求并返回所需的数据。以下是一个简单的示例，展示了如何在ASP.NET MVC中实现AJAX数据懒加载。

1. 首先，创建一个ASP.NET MVC项目。在Visual Studio中，选择“文件”>“新建”>“项目”，然后选择“ASP.NET Web应用程序”模板。

2. 添加一个名为DataController的新控制器。在该控制器中，创建一个名为GetData的方法，该方法将处理AJAX请求并返回数据。

using System.Web.Mvc;

public class DataController : Controller
{
    public JsonResult GetData(int page, int pageSize)
    {
        // 获取数据（这里可以是从数据库或其他数据源获取数据）
        var data = GetDataFromDataSource(page, pageSize);

        // 返回JSON格式的数据
        return Json(data, JsonRequestBehavior.AllowGet);
    }

    private object GetDataFromDataSource(int page, int pageSize)
    {
        // 在这里实现从数据源获取数据的逻辑
        // 例如，从数据库查询数据
        // 这里我们只是返回一些示例数据
        return new
        {
            TotalRecords = 100,
            Records = Enumerable.Range(1, pageSize).Select(i => new
            {
                Id = (page - 1) * pageSize + i,
                Value = $"Item {(page - 1) * pageSize + i}"
            })
        };
    }
}

3. 在Views文件夹中创建一个名为Index的视图。在该视图中，添加一个表格来显示数据，并使用jQuery发起AJAX请求以获取数据。

@{
    ViewBag.Title = "Index";
}

<h2>Data Lazy Loading with AJAX</h2><table id="dataTable">
   <thead>
        <tr>
            <th>ID</th>
            <th>Value</th>
        </tr>
    </thead>
   <tbody></tbody>
</table><button id="loadMore">Load More</button>

@section Scripts {
   <script src="~/Scripts/jquery-3.6.0.min.js"></script>
   <script>
        $(document).ready(function () {
            var currentPage = 1;
            var pageSize = 10;

            function loadData() {
                $.ajax({
                    url: '/Data/GetData',
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        page: currentPage,
                        pageSize: pageSize
                    },
                    success: function (response) {
                        if (response && response.Records) {
                            for (var i = 0; i< response.Records.length; i++) {
                                var record = response.Records[i];
                                $('#dataTable tbody').append('<tr><td>' + record.Id + '</td><td>' + record.Value + '</td></tr>');
                            }
                            currentPage++;
                        }
                    },
                    error: function (error) {
                        console.log('Error:', error);
                    }
                });
            }

            $('#loadMore').click(function () {
                loadData();
            });

            // 初始加载数据
            loadData();
        });
    </script>
}

现在，当你运行项目并访问/Home/Index时，你将看到一个包含数据的表格和一个“Load More”按钮。点击按钮时，将通过AJAX请求加载更多数据。这个示例仅简单的演示，你可以根据自己的需求进行调整和优化。