C# Ajax ashx DataTable 下拉加载分页

2023-11-21 11:25:17

介绍

在现代Web开发中，Ajax（Asynchronous JavaScript and XML）技术已经成为一种重要的技术。它允许Web页面在不重新加载整个页面的情况下与服务器进行通信。这使得Web页面更加流畅和交互性更好。

DataTable是一种内存中的数据表格，可以轻松地绑定到页面上的控件，如下拉列表和数据表格。它提供了许多有用的功能，如排序、过滤和分页。

实现下拉加载和分页功能

步骤1：创建ashx文件

首先，我们需要创建一个ashx文件。ashx文件是一个ASP.NET Web处理程序，它可以处理来自客户端的请求并返回数据。

public class submit_ajax : IHttpHandler {

    public void ProcessRequest(HttpContext context) {
        //获取请求参数
        string type = context.Request["type"];
        string page = context.Request["page"];
        string rows = context.Request["rows"];

        //根据请求参数获取数据
        DataTable dt = GetData(type, page, rows);

        //将数据序列化为JSON格式
        string json = SerializationHelper.ToJso(dt);

        //返回JSON数据
        context.Response.Write(json);
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

    private DataTable GetData(string type, string page, string rows) {
        //模拟从数据库获取数据
        DataTable dt = new DataTable();
        dt.Columns.Add("id");
        dt.Columns.Add("name");
        dt.Columns.Add("type");

        for (int i = 0; i < int.Parse(rows); i++) {
            DataRow dr = dt.NewRow();
            dr["id"] = i + 1;
            dr["name"] = "name" + i;
            dr["type"] = type;
            dt.Rows.Add(dr);
        }

        return dt;
    }
}

步骤2：创建Html页面

接下来，我们需要创建一个Html页面。这个页面将包含一个下拉列表、一个数据表格和一个按钮。

<!DOCTYPE html>
<html>
<head>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //初始化下拉列表
            $("#ddlType").change(function () {
                //获取选中的值
                var type = $(this).val();

                //清空数据表格
                $("#tblData").empty();

                //加载数据
                loadData(type, 1, 10);
            });

            //加载数据
            loadData("全部", 1, 10);

            //绑定滚动事件
            $(window).scroll(function () {
                //判断是否滚动到底部
                if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
                    //加载更多数据
                    var type = $("#ddlType").val();
                    var page = parseInt($("#tblData").attr("data-page")) + 1;
                    var rows = parseInt($("#tblData").attr("data-rows"));
                    loadData(type, page, rows);
                }
            });
        });

        function loadData(type, page, rows) {
            //显示加载中
            $("#loading").show();

            //发送Ajax请求
            $.ajax({
                type: "POST",
                url: "submit_ajax.ashx",
                data: { type: type, page: page, rows: rows },
                success: function (data) {
                    //隐藏加载中
                    $("#loading").hide();

                    //将数据绑定到数据表格
                    var dt = eval('(' + data + ')');
                    var html = "";
                    for (var i = 0; i < dt.length; i++) {
                        html += "<tr>";
                        html += "<td>" + dt[i].id + "</td>";
                        html += "<td>" + dt[i].name + "</td>";
                        html += "<td>" + dt[i].type + "</td>";
                        html += "</tr>";
                    }
                    $("#tblData").append(html);

                    //更新数据表格的页码属性
                    $("#tblData").attr("data-page", page);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //显示错误信息
                    alert("加载数据失败！" + errorThrown);
                }
            });
        }
    </script>
</head>
<body>
    <h1>C# Ajax ashx DataTable 下拉加载 分页</h1>
    <div>
        <select id="ddlType">
            <option value="全部">全部</option>
            <option value="类型1">类型1</option>
            <option value="类型2">类型2</option>
            <option value="类型3">类型3</option>
        </select>
    </div>
    <div>
        <table id="tblData" data-page="1" data-rows="10">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>类型</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div id="loading" style="display: none;">加载中...</div>
</body>
</html>