ASP.NET Razor Pages下拉选择后刷新页面传参至存储过程问题

不需要写复杂的AJAX逻辑，用原生表单提交就能实现选中下拉选项后自动刷新页面、传递用户ID给后端调用存储过程的需求，按以下步骤改代码即可。

1. 前端页面（.cshtml）实现 #

把下拉选择框包裹在表单标签内，绑定后端的选中值属性和选项列表，给下拉框加onchange事件，选中值变化时自动触发表单提交：

@page
@model YourNamespace.YourPageModel
<form method="get">
    <div class="form-group">
        <label>选择用户</label>
        <select 
            asp-for="SelectedUserId" 
            asp-items="Model.UserSelectList"
            onchange="this.form.submit()"
            class="form-control">
            <option value="">-- 请选择用户 --</option>
        </select>
    </div>
</form>

<!-- 选中用户后的数据展示区域 -->
@if (Model.CurrentUserData != null)
{
    <div class="user-data-panel mt-3">
        <!-- 在这里渲染从存储过程查询到的用户数据 -->
        <p>用户名：@Model.CurrentUserData.UserName</p>
        <p>用户其他信息：@Model.CurrentUserData.OtherInfo</p>
    </div>
}

交互效果参考：

2. 后端PageModel（.cshtml.cs）实现 #

核心是定义绑定属性接收前端传的用户ID，页面加载时判断如果有选中的ID，就把ID作为参数传给存储过程查询对应数据，注意GET提交必须给绑定属性加SupportsGet = true，否则后端拿不到值：

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.Data.SqlClient;
using System.Collections.Generic;
using System.Data;

public class YourPageModel : PageModel
{
    private readonly IConfiguration _config;
    // 注入配置对象拿数据库连接串，按你自己的依赖注入逻辑调整
    public YourPageModel(IConfiguration config)
    {
        _config = config;
    }

    /// <summary>
    /// 接收下拉框选中的用户ID，GET提交必须开启SupportsGet
    /// </summary>
    [BindProperty(SupportsGet = true)]
    public int? SelectedUserId { get; set; }

    /// <summary>
    /// 下拉框的选项列表
    /// </summary>
    public List<SelectListItem> UserSelectList { get; set; } = new();

    /// <summary>
    /// 存储过程查询返回的对应用户数据
    /// </summary>
    public UserDataDto CurrentUserData { get; set; }

    public void OnGet()
    {
        // 每次请求都要加载下拉选项，否则提交后下拉框会丢失选项
        LoadUserSelectOptions();

        // 选中了有效用户ID时，调用存储过程查数据
        if (SelectedUserId.HasValue && SelectedUserId.Value > 0)
        {
            CurrentUserData = QueryUserDataBySp(SelectedUserId.Value);
        }
    }

    /// <summary>
    /// 加载下拉框的用户选项
    /// </summary>
    private void LoadUserSelectOptions()
    {
        // 替换成你自己的查询所有用户的逻辑
        // 示例逻辑：查用户表的ID和用户名，组装成SelectListItem
        const string sql = "SELECT Id, UserName FROM Users WHERE IsDeleted = 0";
        using var conn = new SqlConnection(_config.GetConnectionString("DefaultConn"));
        using var cmd = new SqlCommand(sql, conn);
        conn.Open();
        using var reader = cmd.ExecuteReader();
        while (reader.Read())
        {
            UserSelectList.Add(new SelectListItem
            {
                Value = reader["Id"].ToString(),
                Text = reader["UserName"].ToString()
            });
        }
    }

    /// <summary>
    /// 传用户ID给存储过程，查询对应用户数据
    /// </summary>
    private UserDataDto QueryUserDataBySp(int userId)
    {
        const string spName = "sp_GetUserDetailById"; // 替换成你的存储过程名
        using var conn = new SqlConnection(_config.GetConnectionString("DefaultConn"));
        using var cmd = new SqlCommand(spName, conn);
        cmd.CommandType = CommandType.StoredProcedure;
        // 给存储过程加@UserId参数
        cmd.Parameters.Add(new SqlParameter("@UserId", SqlDbType.Int)
        {
            Value = userId
        });
        conn.Open();
        using var reader = cmd.ExecuteReader();
        var result = new UserDataDto();
        if (reader.Read())
        {
            result.UserId = (int)reader["Id"];
            result.UserName = reader["UserName"].ToString();
            result.OtherInfo = reader["OtherInfo"].ToString();
            // 其他字段按你存储过程返回的字段映射
        }
        return result;
    }
}

/// <summary>
/// 用户数据传输类，按你的业务字段调整
/// </summary>
public class UserDataDto
{
    public int UserId { get; set; }
    public string UserName { get; set; }
    public string OtherInfo { get; set; }
}

常见踩坑点 #

• 不要漏写[BindProperty(SupportsGet = true)]：GET方式提交表单时，不加这个特性后端无法接收下拉框传的用户ID
• 不要把下拉选项加载逻辑加判断锁：Razor Pages每次请求都会重新执行PageModel的方法，不管是首次加载还是提交刷新，必须每次都给UserSelectList赋值，否则提交后下拉框会变成空白
• 如果不想把用户ID暴露在URL参数里，把form的method改成post，去掉SupportsGet = true，把后端的OnGet改成OnPost即可，逻辑完全一致
• onchange="this.form.submit()"是原生JS写法，不需要引入任何jQuery或前端框架，兼容性足够

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