MVC中如何根据下拉列表选项绑定并显示对应视图页面？

需求：在MVC框架中，实现下拉列表选中不同选项时，显示对应的视图页面。以下是当前主视图中的下拉列表代码：

@using(Html.BeginForm("selectFrom", "Company", FormMethod.Get)) 
{  
    @Html.DropDownList("CATEGORIES",
                     new List<SelectListItem> 
                        {
                             new SelectListItem {
                                Text="COMPONENT",
                                Value="COMPONENT",
                             },
                             new SelectListItem {
                                Text="SOFTWARE",
                                Value="SOFTWARE",
                             },
                             new SelectListItem {
                                    Text="SERVICE",
                                    Value="SERVICE",
                                 }
                        })
    <input type="submit" value="Submit" />
}

针对你提出的两种实现方式，可行性分析及修正建议如下：

方式1：同一个ActionResult中分支处理 #

可行，但需要修正代码中的冲突与缺失

原代码存在两个关键问题：

1. 表单使用FormMethod.Get提交，但Action标记了[HttpPost]，请求方式不匹配会导致404；
2. 分支逻辑未完成，且没有默认返回路径。

修正后的示例代码：

// 去掉[HttpPost]，或改为[HttpGet]（默认就是Get，可省略）
public ActionResult selectFrom(string CATEGORIES)
{
    if (string.IsNullOrEmpty(CATEGORIES))
    {
        // 默认返回主视图或其他默认页面
        return View();
    }

    if (CATEGORIES == "COMPONENT")
    {
        var data = _context.COMBINED.Where(x => x.Laptop != " ").ToList();
        // 返回COMPONENT对应的视图，若视图名与Action名不同需指定
        return View("COMPONENT", data);
    }
    else if (CATEGORIES == "SOFTWARE")
    {
        var data = _context.COMBINED.Where(x => x.Laptop != " ").ToList();
        return View("SOFTWARE", data);
    }
    else if (CATEGORIES == "SERVICE")
    {
        // 补充SERVICE分支的逻辑
        var data = _context.COMBINED.Where(/* 你的筛选条件 */).ToList();
        return View("SERVICE", data);
    }

    // 兜底返回，避免无匹配分支时出错
    return View();
}

这种方式逻辑集中，适合选项较少的场景，维护成本较低。

方式2：创建独立IActionResult返回对应视图 #

可行，但需要调整下拉列表的提交逻辑

原代码中独立的COMPONENT、SOFTWARE Action本身没问题，但无法直接和当前的下拉列表表单关联，可通过以下两种方式调整：

方案A：JavaScript监听下拉列表直接跳转 #

修改主视图的下拉列表，添加onchange事件，选中选项后直接跳转到对应Action：

@Html.DropDownList("CATEGORIES",
                 new List<SelectListItem> 
                    {
                         new SelectListItem { Text="COMPONENT", Value="@Url.Action("COMPONENT", "Company")" },
                         new SelectListItem { Text="SOFTWARE", Value="@Url.Action("SOFTWARE", "Company")" },
                         new SelectListItem { Text="SERVICE", Value="@Url.Action("SERVICE", "Company")" }
                    },
                 new { onchange = "window.location.href = this.value;" })

此时可去掉原有的表单和提交按钮，用户选中选项后直接跳转。

方案B：通过selectFrom Action转发到独立Action #

保留原表单，在selectFrom中根据选中值跳转到对应Action：

public ActionResult selectFrom(string CATEGORIES)
{
    if (string.IsNullOrEmpty(CATEGORIES))
    {
        return View();
    }

    switch (CATEGORIES)
    {
        case "COMPONENT":
            return RedirectToAction("COMPONENT");
        case "SOFTWARE":
            return RedirectToAction("SOFTWARE");
        case "SERVICE":
            return RedirectToAction("SERVICE");
        default:
            return View();
    }
}

// 你的独立Action保持不变
public IActionResult COMPONENT()
{
    return View(_context.COMBINED.Where(x => x.Laptop != " " || x._2_In_1 != "").ToList());
}

public IActionResult SOFTWARE()
{
    return View(_context.COMBINED.Where(x => x.Laptop != " ").ToList());
}

// 补充SERVICE的Action
public IActionResult SERVICE()
{
    return View(_context.COMBINED.Where(/* 你的筛选条件 */).ToList());
}

这种方式职责分离，每个Action只负责对应视图的数据逻辑，适合选项较多、后续可能扩展的场景。

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