ASP.NET Core Razor Pages如何将下拉选框值与文本存入隐藏域

1. 修复PageModel定义 #

首先需要在页面模型中添加绑定属性，并修正异步方法的返回类型：

public class LabelPrintingModel : PageModel
{
    [BindProperty]
    public List<LabelPrinitingView> PrinterList { get; set; }

    // 添加绑定属性，用于接收隐藏域提交的值
    [BindProperty]
    public string SelectedOptionValue { get; set; }

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

    // 替换async void为async Task，避免异步操作异常
    public async Task OnGet()
    {
        PrinterList = dtprinters.AsEnumerable()
            .Select(row => new LabelPrinitingView
                           {
                               UserPC = (string)row["UserPC"],
                               PrinterName = row["PrinterName"].ToString()
                           })
            .ToList();
    }

    // 添加Post方法处理表单提交
    public async Task<IActionResult> OnPost()
    {
        // 此处可直接使用SelectedOptionValue和SelectedOptionText的值
        return Page();
    }

    public class LabelPrinitingView
    {
        public string UserPC { get; set; }
        public string PrinterName { get; set; }
    }
}

2. 修正页面HTML与JavaScript逻辑 #

确保表单元素在<form>标签内，完善下拉框的事件处理逻辑，正确给隐藏域赋值：

<form method="post">
    <div class="col-md-3 col-lg-2">
        <label for="printerserver-selectlbl" style="margin-left:3px;font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">Print Location</label>

        <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>
    </div>

    <!-- 隐藏域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" />

    <button type="submit" class="btn btn-primary">提交</button>
</form>

<script>
    const selectElement = document.getElementById("PrinterName-select");
    const textHidden = document.getElementById("selected-option-text");
    const valueHidden = document.getElementById("selected-option-value");

    // 统一更新隐藏域的方法
    function syncHiddenFields() {
        const selectedOption = selectElement.options[selectElement.selectedIndex];
        textHidden.value = selectedOption.text;
        // 取option的value而非id（你的option未定义id属性）
        valueHidden.value = selectedOption.value;
    }

    // 页面加载时初始化一次，避免默认值为空
    window.addEventListener('load', syncHiddenFields);
    // 下拉框切换时同步更新
    selectElement.addEventListener("change", syncHiddenFields);
</script>

问题根源说明 #

1. 模型属性缺失：原PageModel未定义SelectedOptionValue和SelectedOptionText，也未添加[BindProperty]标记，导致模型绑定无法识别并赋值。
2. JavaScript逻辑错误：原代码未完成隐藏域赋值操作，且错误尝试获取selectedOption.id（你的<option>标签未设置id属性，应取value）。
3. 表单范围问题：未将下拉框和隐藏域包裹在<form>标签内，导致提交时无法传递表单值。
4. 异步方法不规范：使用async void会导致ASP.NET Core无法跟踪异步操作，应替换为async Task。

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