ASP.NET Razor页面Post方法中获取下拉框选中的打印机名称

要在不修改下拉框value值、不查询数据库的前提下，把选中的打印机名称传递到OnPostPrintAdc方法，可通过隐藏字段+JavaScript同步的方式实现，具体步骤如下：

1. 在PageModel中添加绑定属性 #

在对应的PageModel类里，新增两个绑定属性，分别接收下拉框的value（UserPC）和选中的打印机名称：

public class YourPageModel : PageModel
{
    [BindProperty]
    public string SelectedPrinterUserPC { get; set; }
    
    [BindProperty]
    public string SelectedPrinterName { get; set; }

    // 你的打印机列表属性，示例：
    public List<Printer> Printers { get; set; }

    public void OnGet()
    {
        // 初始化打印机列表逻辑
        Printers = GetPrintersFromSource();
    }

    public IActionResult OnPostPrintAdc()
    {
        // 这里可以直接获取选中的打印机名称
        string targetPrinterName = SelectedPrinterName;
        // 后续业务逻辑...
        return Page();
    }
}

2. 页面中添加下拉框与隐藏字段 #

在Razor页面里，渲染下拉框并添加用于存储打印机名称的隐藏字段：

<!-- 下拉框，value绑定UserPC，显示文本为PrinterName -->
<select id="printerSelect" asp-for="SelectedPrinterUserPC" asp-items="@(new SelectList(Model.Printers, "UserPC", "PrinterName"))">
    <option value="">请选择打印机</option>
</select>

<!-- 隐藏字段，用于同步选中的打印机名称，提交时会一起传递到后台 -->
<input type="hidden" id="selectedPrinterName" asp-for="SelectedPrinterName" />

3. 用JavaScript同步选中文本到隐藏字段 #

添加JavaScript代码，监听下拉框的change事件，将选中项的文本同步到隐藏字段：

// 监听下拉框选择变化
document.getElementById('printerSelect').addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    // 将选中项的显示文本赋值给隐藏字段
    document.getElementById('selectedPrinterName').value = selectedOption.text;
});

可选优化：使用data属性存储PrinterName #

如果担心显示文本可能有格式问题，也可以在生成option时通过data-*属性预存PrinterName，再通过JS读取：

<select id="printerSelect" asp-for="SelectedPrinterUserPC">
    <option value="">请选择打印机</option>
    @foreach (var printer in Model.Printers)
    {
        <option value="@printer.UserPC" data-printer-name="@printer.PrinterName">@printer.PrinterName</option>
    }
</select>

对应的JS代码修改为：

document.getElementById('printerSelect').addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    // 读取data属性中的PrinterName
    document.getElementById('selectedPrinterName').value = selectedOption.dataset.printerName;
});

这样提交表单时，SelectedPrinterName就会携带选中的打印机名称，直接在OnPostPrintAdc方法中使用即可。

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