Asp.net静态jQuery函数从数据库动态展示单选按钮问题求助

我明白你的问题所在了——静态WebMethod没法直接操作服务器端的DataList控件，因为静态方法不属于页面实例，自然访问不到那些需要实例化的服务器控件。咱们换个思路，从后端返回JSON格式的尺寸数据，前端动态生成单选按钮就搞定了，具体步骤如下：

1. 修改后端WebMethod，返回JSON格式数据 #

首先把你的静态方法改成返回序列化后的尺寸数据，而不是尝试绑定DataList（静态方法里根本拿不到dlSize的实例）。这里我们读取数据库数据后转换成实体列表，再序列化为JSON字符串返回：

using System.Collections.Generic;
using System.Web.Script.Serialization;
using System.Data.SqlClient;
using System;

// 先定义尺寸实体类
public class Size
{
    public int SizeId { get; set; }
    public string SizeName { get; set; }
}

// 假设Product类已定义
public class Product
{
    public string Name { get; set; }
}

[System.Web.Services.WebMethod]
public static string GetData1(Product product)
{
    List<Size> sizeList = new List<Size>();
    // 用using确保连接和命令自动释放，避免资源泄漏
    using (SqlConnection con = new SqlConnection("你的数据库连接字符串"))
    {
        con.Open();
        using (SqlCommand cmd = new SqlCommand("sp_SelectProductSize", con))
        {
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.Add(new SqlParameter("@Name", product.Name));
            using (SqlDataReader reader = cmd.ExecuteReader())
            {
                while (reader.Read())
                {
                    sizeList.Add(new Size
                    {
                        SizeId = Convert.ToInt32(reader["SizeId"]),
                        SizeName = reader["SizeName"].ToString()
                    });
                }
            }
        }
    }
    // 序列化为JSON字符串返回
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    return serializer.Serialize(sizeList);
}

2. 修改前端代码，动态生成单选按钮 #

把原来的asp:DataList换成一个普通的HTML容器（比如div），然后在AJAX请求的success回调里循环生成单选按钮：

先更新HTML部分（模态框内的容器）： #

<!-- 替换原来的DataList，用来承载动态生成的单选按钮 -->
<div id="sizeRadioContainer"></div>

然后修改JS的AJAX代码： #

<script type="text/javascript">
$(document).ready(function () {
    $("#pizzaModal").on('shown.bs.modal', function () {
        var product = {};
        product.Name = "Pizza";
        $.ajax({
            url: "Default.aspx/GetData1",
            type: "POST",
            data: '{product: ' + JSON.stringify(product) + '}',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                // 先清空容器，避免重复渲染
                $("#sizeRadioContainer").empty();
                // ASP.NET WebMethod返回的结果会被包装在d属性里
                var sizeList = response.d;
                // 循环生成单选按钮组
                $.each(sizeList, function(index, size) {
                    // 生成带label的单选按钮，提升用户体验
                    var radioItem = `<div class="radio-item">
                        <input type="radio" name="rdGroup" id="size_${size.SizeId}" value="${size.SizeId}">
                        <label for="size_${size.SizeId}">${size.SizeName}</label>
                    </div>`;
                    $("#sizeRadioContainer").append(radioItem);
                });
            },
            error: function(xhr, status, error) {
                console.error("获取尺寸数据失败：", error);
                $("#sizeRadioContainer").html("<p>加载尺寸失败，请稍后重试</p>");
            }
        });
        return false;
    });
});
</script>

为什么原来的方法行不通？ #

ASP.NET的静态WebMethod是在没有页面实例的情况下执行的，服务器端的dlSize控件属于页面实例的一部分，所以在静态方法里它的值是null，自然没法绑定数据。这种前后端分离的方式（后端返回数据，前端渲染UI）更适合异步场景，也避开了服务器控件的局限性。

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