Razor页面RadioButton提交后返回值为null问题求助

页面渲染时希望Gender默认选中Male，但点击提交按钮后，无论选择Male还是Female，返回的Gender值均为null。相关代码如下：

Razor页面原代码 #

@page
@model IndexModel
<form method="post">
    <div class="form-group">
        <div>
            Male: @Html.RadioButton("Gender", "Male")
            Female: @Html.RadioButton("Gender", "Female")
        </div>
    </div>
    <div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
</form>

CS页面原代码 #

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace Test.Pages
{
    public class IndexModel : PageModel
    {
        public string? Gender { get; set; }

        public async Task OnGet()
        {
            Gender = "Male";
        }

        public async Task<IActionResult> OnPost()
        {
            var test = Gender;
            return Page(); 
        }
    }
}

问题原因 #

• PageModel中的Gender属性未添加[BindProperty]特性，表单提交的值无法自动绑定到该属性，导致OnPost方法中Gender始终为null。
• 原RadioButton未关联模型的Gender属性，即使OnGet中给Gender赋值为Male，也无法自动设置默认选中状态。

解决方案 #

1. 修改CS页面，添加绑定特性 #

在Gender属性上添加[BindProperty]，让ASP.NET Core自动绑定表单提交的值：

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace Test.Pages
{
    public class IndexModel : PageModel
    {
        [BindProperty]
        public string? Gender { get; set; }

        public async Task OnGet()
        {
            Gender = "Male";
        }

        public async Task<IActionResult> OnPost()
        {
            var test = Gender; // 现在可获取用户选择的值
            return Page(); 
        }
    }
}

2. 修改Razor页面，使用强类型单选框 #

使用强类型的Html.RadioButtonFor方法关联模型属性，自动生效默认选中状态，同时保证表单提交时正确绑定值：

@page
@model IndexModel
<form method="post">
    <div class="form-group">
        <div>
            Male: @Html.RadioButtonFor(m => m.Gender, "Male")
            Female: @Html.RadioButtonFor(m => m.Gender, "Female")
        </div>
    </div>
    <div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
</form>

效果验证 #

修改后，页面加载时自动选中Male选项；提交表单后，OnPost方法中的Gender属性可正确获取用户选择的性别值。

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