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請求加載更多數據。這個示例僅簡單的演示，你可以根據自己的需求進行調整和優化。