ASP.NET Core 6 Razor Page中SelectedOption属性值为null的问题

问题现状 #

开发ASP.NET Core 6 Razor Page时，页面模型中的SelectedOptionValue和SelectedOptionText属性始终为null。已尝试通过隐藏字段存储下拉框选中项的文本与值，但未生效。

前端代码问题分析 #

原前端HTML代码 #

<select id="PrinterName-select" asp-for="SelectedPrinterId" name="selectprinterid" class="form-select" style="margin-left:3px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;">
    <option value="0">--Select--</option>
    @foreach (var printer in Model.PrinterList)
    {
        <option value="@printer.UserPC">@printer.PrinterName</option>
    }
</select>
<input type="hidden" id="selected-option-text" name="selected-option-text" value="@Model.SelectedOptionText" />
<input type="hidden" id="selected-option-value" name="selected-option-value" value="@Model.SelectedOptionValue" />

原JavaScript代码 #

var selectElement = document.getElementById("PrinterName-select");
selectElement.addEventListener("change", function () {
    var selectedOption = selectElement.options[selectElement.selectedIndex];
    var selectedText = selectedOption.text;
    var selectedId = selectedOption.id;
    console.log("Selected Text: " + selectedText);
    console.log("Selected ID: " + selectedId);
});

前端存在的错误 #

1. 未更新隐藏字段值：JS仅打印日志，未将选中的文本和值赋值给隐藏输入框，导致表单提交时隐藏框仍为初始null值。
2. 选中值获取错误：selectedOption.id是错误写法，下拉框选项的实际值存储在value属性中，应改为selectedOption.value。
3. name属性不匹配：隐藏字段的name为selected-option-text、selected-option-value，与后端模型属性或参数名未对应，导致绑定失败。

后端代码问题分析 #

原后端处理方法 #

public ActionResult OnGetSelectedPrinter(string selectedtext,string selectedvalues)
{
    string a = SelectedOptionValue;//display as null
    string b = SelectedOptionText;//display as null
}

后端存在的错误 #

1. 绑定目标不匹配：方法参数selectedtext、selectedvalues与前端隐藏字段的name（selected-option-text、selected-option-value）不一致，且未通过模型绑定直接访问页面模型属性，导致属性值为null。
2. 属性访问逻辑问题：直接访问SelectedOptionValue和SelectedOptionText时，若未通过模型绑定赋值，自然为null。

修复步骤 #

1. 修正JavaScript代码，更新隐藏字段值 #

修改JS，将选中的文本和值正确赋值给隐藏框：

var selectElement = document.getElementById("PrinterName-select");
selectElement.addEventListener("change", function () {
    var selectedOption = selectElement.options[selectElement.selectedIndex];
    var selectedText = selectedOption.text;
    var selectedValue = selectedOption.value; // 修正为获取value属性
    console.log("Selected Text: " + selectedText);
    console.log("Selected Value: " + selectedValue);
    
    // 更新隐藏字段的值
    document.getElementById("selected-option-text").value = selectedText;
    document.getElementById("selected-option-value").value = selectedValue;
});

2. 统一前端隐藏字段的绑定标识 #

推荐使用asp-for自动匹配页面模型属性，确保name一致：

<input type="hidden" id="selected-option-text" asp-for="SelectedOptionText" />
<input type="hidden" id="selected-option-value" asp-for="SelectedOptionValue" />

若不使用asp-for，则手动设置name与模型属性名一致：

<input type="hidden" id="selected-option-text" name="SelectedOptionText" value="@Model.SelectedOptionText" />
<input type="hidden" id="selected-option-value" name="SelectedOptionValue" value="@Model.SelectedOptionValue" />

3. 修正后端页面模型与处理方法 #

首先确保页面模型包含可绑定的public属性：

public class YourPageModel : PageModel
{
    // 确保属性为public，支持模型绑定
    public string SelectedOptionValue { get; set; }
    public string SelectedOptionText { get; set; }
    
    // 其他原有属性
    public List<Printer> PrinterList { get; set; }
    public string SelectedPrinterId { get; set; }

    public ActionResult OnGetSelectedPrinter()
    {
        // 模型绑定完成后，属性已赋值
        string a = SelectedOptionValue;
        string b = SelectedOptionText;
        
        // 后续业务逻辑
        return Page();
    }
}

如果坚持使用参数接收，需指定参数与前端name的对应关系：

public ActionResult OnGetSelectedPrinter(
    [FromQuery(Name = "selected-option-text")] string selectedtext,
    [FromQuery(Name = "selected-option-value")] string selectedvalues)
{
    // 直接使用参数值
    string a = selectedvalues;
    string b = selectedtext;
    return Page();
}

额外注意事项 #

• 若通过表单POST提交，需确保表单method="post"，后端对应使用OnPostSelectedPrinter方法。
• 检查页面模型属性是否正确初始化，避免未赋值导致的null问题。

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