如何在C#代码中获取网页SelectMenu选中值？解决CS0103错误

CS0103 - 在MyButton_Click代码中，名称‘Column1’在当前上下文中不存在。

开发的网页包含4个HTML下拉框，点击按钮后希望在后台C#的MyButton_Click方法中输出各下拉框的选中值，但运行时出现上述错误，相关代码如下：

前端代码（.aspx） #

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CarDatas.aspx.cs" Inherits="WebApplication2.CarDatas" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Car Datas</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h2 {
            color: #333;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        .date-input, .column-input {
            width: 200px;
            padding: 8px;
            margin-bottom: 15px;
        }

        .calendar {
            position: absolute;
            display: none;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
            z-index: 1000;
        }
        .custom-button {
            width: 200px; 
            height: 40px; 
            margin-top: 10px; 
            margin-bottom: 10px; 
        }

    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
        $(function () {
            $(".date-input").datepicker({
                onSelect: function (dateText, inst) {
                    $(this).val(dateText);
                    $(".calendar").hide();
                }
            });

            var columnOptions = '<option value=""></option>'; 
            columnOptions +=
                '<option value="make">Make</option>' +
                '<option value="_owner">Owner</option>' +
                '<option value="center">Center</option>' +
                '<option value="subsidiary">Subsidiary</option>';

            $(".column-input").html(columnOptions);
        });

        function showCalendar(dateTextBoxId, calendarId) {
            var dateTextBox = $("#" + dateTextBoxId);
            var calendar = $("#" + calendarId);

            var rect = dateTextBox.offset();
            calendar.css({
                position: 'absolute',
                left: rect.left + 'px',
                top: rect.top + dateTextBox.outerHeight() + 'px'
            });

            if (calendar.is(":hidden")) {
                $(".calendar").hide();
                calendar.show();
            } else {
                calendar.hide();
            }
        }
    </script>
</head>
<body>
    <h2>Date and Columns Selection</h2>
    <form id="form1" runat="server">
        <label for="DateFromTextBox">Date From:</label>
        <input type="text" id="DateFromTextBox" class="date-input" onclick="showCalendar('DateFromTextBox', 'Calendar1')">
        <div id="Calendar1" class="calendar"></div>

        <label for="DateToTextBox">Date To:</label>
        <input type="text" id="DateToTextBox" class="date-input" onclick="showCalendar('DateToTextBox', 'Calendar2')">
        <div id="Calendar2" class="calendar"></div>

        <label for="Column1">Column 1:</label>
        <select id="Column1" class="column-input"></select>

        <label for="Column2">Column 2:</label>
        <select id="Column2" class="column-input"></select>

        <label for="Column3">Column 3:</label>
        <select id="Column3" class="column-input"></select>

        <label for="Column4">Column 4:</label>
        <select id="Column4" class="column-input"></select>

        <br>
        <asp:Button ID="MyButton" runat="server" Text="Click Me" OnClick="MyButton_Click" CssClass="custom-button" />

    </form>
</body>
</html>

后台代码（.aspx.cs） #

using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Data.SqlClient;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml.Linq;


namespace WebApplication2
{
    public partial class CarDatas : System.Web.UI.Page
    {
        protected void MyButton_Click(object sender, EventArgs e)
        {
            string selectedValueColumn1 = Column1.SelectedValue;
            string selectedValueColumn2 = Column2.SelectedValue;
            string selectedValueColumn3 = Column3.SelectedValue;
            string selectedValueColumn4 = Column4.SelectedValue;

            Response.Write($"Selected values: {selectedValueColumn1}, {selectedValueColumn2}, {selectedValueColumn3}, {selectedValueColumn4}");
        }
    }
}

解决方法 #

方法1：转为ASP.NET服务器控件 #

在每个<select>标签中添加runat="server"属性，让ASP.NET将其识别为服务器控件，后台即可直接通过ID访问：

修改后的下拉框代码片段：

<label for="Column1">Column 1:</label>
<select id="Column1" class="column-input" runat="server"></select>

<label for="Column2">Column 2:</label>
<select id="Column2" class="column-input" runat="server"></select>

<label for="Column3">Column 3:</label>
<select id="Column3" class="column-input" runat="server"></select>

<label for="Column4">Column 4:</label>
<select id="Column4" class="column-input" runat="server"></select>

后台代码无需修改，保持原写法即可正常获取选中值。

方法2：通过Request.Form获取表单值 #

若不想修改为服务器控件，可为每个<select>添加name属性，后台通过Request.Form获取提交的选中值：

修改后的下拉框代码片段：

<label for="Column1">Column 1:</label>
<select id="Column1" name="Column1" class="column-input"></select>

<label for="Column2">Column 2:</label>
<select id="Column2" name="Column2" class="column-input"></select>

<label for="Column3">Column 3:</label>
<select id="Column3" name="Column3" class="column-input"></select>

<label for="Column4">Column 4:</label>
<select id="Column4" name="Column4" class="column-input"></select>

修改后的后台代码：

protected void MyButton_Click(object sender, EventArgs e)
{
    string selectedValueColumn1 = Request.Form["Column1"];
    string selectedValueColumn2 = Request.Form["Column2"];
    string selectedValueColumn3 = Request.Form["Column3"];
    string selectedValueColumn4 = Request.Form["Column4"];

    Response.Write($"Selected values: {selectedValueColumn1}, {selectedValueColumn2}, {selectedValueColumn3}, {selectedValueColumn4}");
}

错误原因 #

原代码中的<select>是普通HTML控件，未添加runat="server"属性，ASP.NET不会为其生成后台控件实例，因此后台代码无法通过ID直接访问这些控件，触发CS0103上下文不存在错误。

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