ASP.NET中如何通过AJAX调用方法获取数据并展示列表内容

解决步骤 #

1. 修正后端GetDatabase方法

要让ASP.NET方法能被AJAX调用，需要满足几个关键要求：添加[WebMethod]标记、方法设为静态、返回可序列化的结构化数据（避免分开的两个List，改用对象列表更易处理）。

using System.Web.Services;
using System.Collections.Generic;
using System.Data;

// 封装节假日数据的模型类
public class HolidayItem
{
    public string Description { get; set; }
    public string Date { get; set; }
}

public partial class Test : System.Web.UI.Page
{
    [WebMethod] // 必须添加此属性才能被AJAX调用
    public static List<HolidayItem> GetDatabase() // 设为静态，返回封装好的对象列表
    {
        List<HolidayItem> holidays = new List<HolidayItem>();
        var db_holiday = dbObj.RetrieveData("SELECT Holiday_description, Date FROM ServiceReport.dbo.WS_Holidays");
        
        // 增加空值判断，避免空引用异常
        if (db_holiday != null && db_holiday.Tables.Count > 0 && db_holiday.Tables[0].Rows.Count > 0)
        {
            foreach (DataRow row in db_holiday.Tables[0].Rows)
            {
                holidays.Add(new HolidayItem
                {
                    Description = row["Holiday_description"].ToString(),
                    Date = row["Date"].ToString()
                });
            }
        }
        return holidays;
    }
}

2. 完善前端AJAX与数据展示逻辑

实现OnSuccess回调函数，解析后端返回的JSON数据，生成HTML插入到目标容器中：

<div class="container col-lg-2 bg-warning ">
    <div id="week_display" class="m-grid-col-center">
    </div>
</div>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "Test.aspx/GetDatabase",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                error: function(xhr, status, error) {
                    // 错误处理，方便调试
                    $("#week_display").html("<p>加载失败：" + error + "</p>");
                }
            });
        });

        // 成功回调：处理并渲染数据
        function OnSuccess(response) {
            var holidays = response.d; // ASP.NET WebMethod返回的数据会包裹在d属性中
            var container = $("#week_display");
            container.empty();

            // 无数据时提示
            if (holidays.length === 0) {
                container.html("<p>暂无节假日数据</p>");
                return;
            }

            // 生成HTML结构（这里用无序列表，可根据需求修改）
            var html = "<ul class='holiday-list'>";
            $.each(holidays, function(index, item) {
                html += `<li>${item.Date}：${item.Description}</li>`;
            });
            html += "</ul>";

            container.html(html);
        }
    </script>
</head>

关键说明

• ASP.NET WebMethod返回的JSON数据会被自动包裹在d属性中，所以必须通过response.d获取真实数据
• 统一容器id的大小写（HTML中id不区分大小写，但jQuery选择器建议用小写，避免歧义）
• 增加空值判断和错误处理，提升代码健壮性
• 可根据需求修改生成的HTML结构（比如改用卡片、表格等），配合CSS优化展示效果

内容的提问来源于stack exchange，提问作者Dante How