ASP.NET Core Razor Pages如何根据单选按钮选择条件跳转页面

问题修复步骤 #

1. 修改前端单选按钮绑定

你的前端单选按钮name属性和后端绑定的属性名不匹配，无法将选择结果传递到后端，修改代码如下：

<div class="form-group ">
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="SexSelection" id="inlineRadio1" value="Boy" checked>
        <label class="form-check-label" for="inlineRadio1">男孩</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="SexSelection" id="inlineRadio2" value="Girl">
        <label class="form-check-label" for="inlineRadio2">女孩</label>
    </div>
</div>

修改说明：将name属性改为和后端[BindProperty]修饰的SexSelection属性完全一致，value改为语义化值方便后续判断。

2. 修正后端OnPostAsync跳转逻辑

你当前的跳转逻辑是登录成功跳男孩页，登录失败跳女孩页，完全不符合需求，修改OnPostAsync方法的判断逻辑：

public async Task<IActionResult> OnPostAsync(string returnUrl = null)
{
    returnUrl ??= Url.Content("~/");
    ExternalLogins = (await _signInManager.GetExternalAuthenticationSchemesAsync()).ToList();

    if (ModelState.IsValid)
    {
        var result = await _signInManager.PasswordSignInAsync(Input.Correo, Input.Contraseña, Input.RememberMe, lockoutOnFailure: false);
        if (result.Succeeded)
        {
            _logger.LogInformation("用户登录成功");
            // 根据性别选择跳转对应页面
            if (SexSelection == "Boy")
            {
                return RedirectToPage("./boysNames");
            }
            else if (SexSelection == "Girl")
            {
                return RedirectToPage("./girlsNames");
            }
            // 默认跳转兜底
            return LocalRedirect(returnUrl);
        }
        else
        {
            // 登录失败时添加错误提示，返回登录页
            ModelState.AddModelError(string.Empty, "登录尝试无效，请检查邮箱或密码");
        }
    }
    // 验证失败或登录失败都返回登录页
    return Page();
}

修改说明：登录成功后才判断性别选择结果跳转对应页面，登录失败时停留在当前登录页并抛出错误提示，避免未登录用户直接访问内部页面。

可选优化

可以给SexSelection加个默认值避免空值异常：

[BindProperty, Required]
public string SexSelection { get; set; } = "Boy";

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