在C# ASP.NET MVC中实现下拉框选中项提交后展示功能

首先先修正你当前下拉框的代码问题：你的<option>标签value属性是空的，这会导致无法正确传递选中项的值，需要给每个选项设置有效的值，比如绑定对象的ID或名称：

<select name="select_box" class="selectpicker" id="select_box" data-live-search-style="begins" data-live-search="true">
    <option value="">Select Meal</option>
    @foreach(var obj in Model)
    {
        <!-- 建议用ID作为value，名称显示文本，也可以直接用Name作为value -->
        <option value="@obj.Id">@obj.Name</option>
    }
</select>

一、前端JavaScript实现（和你提供的文本框示例逻辑一致） #

直接用JavaScript获取下拉框选中值，无需后端交互，页面无刷新：

<!-- 在页面添加用于展示结果的元素 -->
<span id="selectedResult"></span>

<button onclick="showSelectedMeal()">提交</button>

<script>
function showSelectedMeal() {
    // 获取下拉框元素
    var selectBox = document.getElementById("select_box");
    // 获取选中的文本（如果需要值用selectBox.value）
    var selectedText = selectBox.options[selectBox.selectedIndex].text;
    // 展示结果
    document.getElementById("selectedResult").textContent = "你选中的是：" + selectedText;
}
</script>

二、后端C#实现（替代前端JS的后端方案） #

C#运行在服务器端，无法直接像JavaScript那样获取客户端DOM元素，而是通过表单提交+模型绑定来获取前端输入的值，步骤如下：

1. 后端Controller代码 #

public class MealController : Controller
{
    // 展示页面的Action
    public ActionResult Index()
    {
        // 从数据库获取下拉框数据，传给View
        var mealList = GetMealsFromDatabase(); // 你的数据库查询逻辑
        return View(mealList);
    }

    // 处理提交的Action
    [HttpPost]
    public ActionResult Index(string select_box)
    {
        // 这里select_box就是下拉框选中的value值
        ViewBag.SelectedMeal = select_box;
        // 重新获取下拉框数据，保持页面下拉框数据不变
        var mealList = GetMealsFromDatabase();
        return View(mealList);
    }

    // 模拟数据库查询方法
    private List<Meal> GetMealsFromDatabase()
    {
        return new List<Meal>
        {
            new Meal { Id = "1", Name = "早餐" },
            new Meal { Id = "2", Name = "午餐" },
            new Meal { Id = "3", Name = "晚餐" }
        };
    }
}

// 你的Meal实体类
public class Meal
{
    public string Id { get; set; }
    public string Name { get; set; }
}

2. 前端View代码 #

用表单包裹下拉框和提交按钮，提交到后端Action：

@model List<Meal>

@using (Html.BeginForm("Index", "Meal", FormMethod.Post))
{
    <select name="select_box" class="selectpicker" id="select_box" data-live-search-style="begins" data-live-search="true">
        <option value="">Select Meal</option>
        @foreach(var obj in Model)
        {
            <option value="@obj.Id" @(obj.Id == ViewBag.SelectedMeal ? "selected" : "")>@obj.Name</option>
        }
    </select>

    <button type="submit">提交</button>
}

<!-- 展示后端返回的选中结果 -->
@if (!string.IsNullOrEmpty(ViewBag.SelectedMeal))
{
    <p>你选中的是：@Model.FirstOrDefault(m => m.Id == ViewBag.SelectedMeal)?.Name</p>
}

关键说明 #

• 前端JS方案：在客户端浏览器处理，无页面刷新，适合无需后端交互的简单场景。
• 后端C#方案：通过表单提交把值传到服务器端处理，页面会刷新，适合需要将选中值存入数据库、做业务逻辑处理的场景。
• C#没有直接对应getElementById的方法，因为后端代码运行时还没有生成客户端DOM，后端是通过接收表单参数来获取用户输入的。

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