如何用jQuery Ajax调用ASP.NET Razor页面的ChangeLoginStatus方法？

后端代码优化说明 #

首先检查你的后端代码，strNewStatus变量未定义，需要补充参数或赋值。以下是修正后的后端代码示例：

[BindProperty]
public string LoginStatusMsg { get; set; }

// Razor Pages中OnGet前缀的方法默认处理GET请求，[HttpGet]可省略
public JsonResult OnGetChangeLoginStatus(string UserId, string strNewStatus)
{
    string strHost = _ISecurityService.GetPCName();
    DataSet ds = _IUserSecurity.ChangeLoginStatus(UserId, strNewStatus, UserId, strHost);
    
    if (ds.Tables[0].Rows.Count > 0)
    {
        if (ds.Tables[0].Rows[0][0].ToString() != "0")
        {
            LoginStatusMsg = ds.Tables[0].Rows[0][1].ToString();
        }
        else
        {
            LoginStatusMsg = "账号状态更新成功";
        }
    }
    else
    {
        LoginStatusMsg = "未获取到状态数据";
    }

    return new JsonResult(LoginStatusMsg);
}

前端jQuery Ajax实现 #

在Razor页面中添加jQuery引用和Ajax请求代码，实现调用后端方法并更新页面元素：

<!-- 引入jQuery（若页面未引入） -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 给状态元素添加ID，方便jQuery选择 -->
<span class="spn col-lg-2" id="LoginStatusMsg">Account Status : @Model.LoginStatusMsg</span>

<!-- 示例触发按钮（根据你的业务场景调整触发逻辑） -->
<button id="updateStatusBtn">更新账号状态</button>

<script>
$(function() {
    $("#updateStatusBtn").click(function() {
        // 替换为实际的用户ID和状态值
        const userId = "当前用户ID";
        const newStatus = "要设置的新状态";

        $.ajax({
            url: "/你的页面路径?handler=ChangeLoginStatus", // 例如"/User/Profile?handler=ChangeLoginStatus"
            type: "GET",
            data: {
                UserId: userId,
                strNewStatus: newStatus
            },
            success: function(res) {
                // 更新页面状态文本
                $("#LoginStatusMsg").text(`Account Status : ${res}`);
            },
            error: function(xhr) {
                $("#LoginStatusMsg").text(`Account Status : 更新失败 - ${xhr.responseText}`);
            }
        });
    });
});
</script>

核心注意事项 #

• Handler路径规则：Razor Pages调用后台方法必须在URL中指定handler参数，方法名去掉OnGet前缀（如OnGetChangeLoginStatus对应handler=ChangeLoginStatus）。
• 参数匹配：Ajax传递的参数名必须和后端方法的参数名完全一致，否则无法正确接收。
• 元素选择：给状态展示元素添加id属性，方便jQuery精准定位更新。
• 错误处理：添加错误回调，在请求失败时给出提示，提升用户体验。

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