ASP.NET无回发调用SQL存储过程获取数据的方案及示例请求

针对你的场景，异步AJAX请求 + 后端接口是无需回发获取数据的最优方案，完全避免整页刷新，大幅提升用户体验。下面基于你提供的Test2sp存储过程，给出两种易上手的实现方式：

一、技术选型说明 #

• 后端：推荐用ASP.NET PageMethods（适合单页面简单场景，无需额外项目配置）或ASP.NET Web API（适合多页面复用、复杂业务场景）
• 前端：用原生JavaScript或jQuery发起AJAX异步请求，实现无刷新数据交互

二、PageMethods实现（新手首选） #

1. 后端代码（.cs页面后台） #

在你的ASP.NET页面后台类中，添加标记[WebMethod]的静态方法，调用存储过程获取输出参数：

using System.Web.Services;
using System.Data.SqlClient;
using System.Configuration;

public partial class YourPage : System.Web.UI.Page
{
    // 标记为WebMethod，允许前端AJAX调用
    [WebMethod]
    public static string GetEmployeeCategory(string idRef)
    {
        string category = string.Empty;
        // 从Web.config读取数据库连接字符串
        string connStr = ConfigurationManager.ConnectionStrings["YourConnStringName"].ConnectionString;

        using (SqlConnection conn = new SqlConnection(connStr))
        {
            using (SqlCommand cmd = new SqlCommand("Test2sp", conn))
            {
                cmd.CommandType = System.Data.CommandType.StoredProcedure;
                // 传入输入参数
                cmd.Parameters.AddWithValue("@id_ref", idRef);
                
                // 配置输出参数
                SqlParameter outputParam = new SqlParameter("@category", System.Data.SqlDbType.NVarChar, 50);
                outputParam.Direction = System.Data.ParameterDirection.Output;
                cmd.Parameters.Add(outputParam);

                conn.Open();
                cmd.ExecuteNonQuery();
                // 获取输出参数值
                category = outputParam.Value?.ToString() ?? string.Empty;
            }
        }
        return category;
    }
}

2. 前端页面代码 #

假设页面有选择控件（比如日期/员工ID下拉框）和目标TextBox：

<!-- 选择控件（示例用员工ID下拉框，可替换为日期选择器） -->
<select id="idRefSelector">
    <option value="EMP001">员工001</option>
    <option value="EMP002">员工002</option>
</select>

<!-- ASP.NET服务器TextBox -->
<asp:TextBox ID="txtCategory" runat="server"></asp:TextBox>

<!-- 原生JavaScript AJAX调用 -->
<script>
document.getElementById('idRefSelector').addEventListener('change', function() {
    var selectedId = this.value;
    var xhr = new XMLHttpRequest();
    
    // 指向页面的WebMethod
    xhr.open('POST', 'YourPage.aspx/GetEmployeeCategory', true);
    xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            // 给TextBox赋值（注意用服务器控件的客户端ID）
            document.getElementById('<%= txtCategory.ClientID %>').value = response.d;
        }
    };
    
    // 传递JSON格式参数，参数名需与后台方法一致
    var data = JSON.stringify({ idRef: selectedId });
    xhr.send(data);
});
</script>

如果用jQuery，代码更简洁：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#idRefSelector').change(function() {
    var selectedId = $(this).val();
    $.ajax({
        type: 'POST',
        url: 'YourPage.aspx/GetEmployeeCategory',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify({ idRef: selectedId }),
        success: function(res) {
            $('#<%= txtCategory.ClientID %>').val(res.d);
        },
        error: function(xhr, err) {
            console.error('请求出错：' + err);
        }
    });
});
</script>

三、ASP.NET Web API实现（适合复杂场景） #

如果需要多页面复用接口，可创建Web API控制器：

1. 后端API控制器 #

using System.Web.Http;
using System.Data.SqlClient;
using System.Configuration;

public class EmployeeApiController : ApiController
{
    [HttpPost]
    public IHttpActionResult GetCategory([FromBody] string idRef)
    {
        if (string.IsNullOrEmpty(idRef))
            return BadRequest("请选择有效ID");

        string category = string.Empty;
        string connStr = ConfigurationManager.ConnectionStrings["YourConnStringName"].ConnectionString;

        try
        {
            using (SqlConnection conn = new SqlConnection(connStr))
            {
                using (SqlCommand cmd = new SqlCommand("Test2sp", conn))
                {
                    cmd.CommandType = System.Data.CommandType.StoredProcedure;
                    cmd.Parameters.AddWithValue("@id_ref", idRef);
                    
                    SqlParameter outputParam = new SqlParameter("@category", System.Data.SqlDbType.NVarChar, 50);
                    outputParam.Direction = System.Data.ParameterDirection.Output;
                    cmd.Parameters.Add(outputParam);

                    conn.Open();
                    cmd.ExecuteNonQuery();
                    category = outputParam.Value?.ToString() ?? string.Empty;
                }
            }
            return Ok(category);
        }
        catch (Exception ex)
        {
            return InternalServerError(ex);
        }
    }
}

2. 前端AJAX调用 #

$('#idRefSelector').change(function() {
    var selectedId = $(this).val();
    $.ajax({
        type: 'POST',
        url: '/api/EmployeeApi/GetCategory',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(selectedId),
        success: function(res) {
            $('#<%= txtCategory.ClientID %>').val(res);
        },
        error: function(xhr, err) {
            console.error('请求出错：' + err);
        }
    });
});

四、关键注意事项 #

1. 确保Web.config中配置了正确的数据库连接字符串，名称与代码中的YourConnStringName一致
2. PageMethods的方法必须是静态方法，且标记[WebMethod]
3. 前端传递的参数名需与后台方法参数名完全一致（区分大小写）
4. ASP.NET服务器控件的客户端ID需用<%= txtCategory.ClientID %>获取，避免ID被自动改写
5. 建议添加异常处理逻辑，在后台捕获数据库异常并返回友好提示

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