如何将下拉列表中的选定项目 ID 传递给控制器的操作？答案

【问题标题】：How to pass selected item id from dropdown list to controller's action?如何将下拉列表中的选定项目 ID 传递给控制器的操作？
【发布时间】：2013-11-29 11:55:55
【问题描述】：

一般问题概述：我有一个复合项目的创建\编辑视图，我从下拉列表中为组件选择了许多选项。我希望能够添加或编辑在下拉列表中选择的特定组件。

这是一个简短但完整的示例：

假设我有一个Car 模型

public class Car
{
    public int Id { get; set; }
    public string Name { get; set; }

    public BodyStyle BodyStyle { get; set; }
    public int BodyStyleId { get; set; }
}

BodyStyle 是Car 聚合的一个组件，定义为：

public class BodyStyle
{
    public int Id { get; set; }
    public string Name { get; set; }
}

现在我有一个控制器动作来创建汽车，

public ActionResult CreateCar()
{
    //BodyStyles is a mock property with all hardcoded BodyStyles, just for demo
    ViewBag.Styles = new SelectList(BodyStyles, "Id", "Name");
    return View();
}

这是CreateCar 视图的一部分，它定义了BodyStyle 下拉列表。

<div class="form-group">
    @Html.LabelFor(model => model.BodyStyle, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(model => model.BodyStyleId, (IEnumerable<SelectListItem>)ViewBag.Styles)
        @Html.ActionLink("Create", "CreateBodyStyle")

        @*here is the problem, can't find a way to pass selected BodyStyle Id to EditBodyStyle action*@
        @Html.ActionLink("Edit", "EditBodyStyle") 
    </div>
</div>

这是EditBodyStyle的幼稚实现

public ActionResult EditBodyStyle(int bodyStyleId)
{
    return View(BodyStyles.First(b => b.Id == bodyStyleId));
}

有没有办法让 ASP.NET MVC 将选定的 BodyStyle Id 从 DropDownListFor 传递到 EditBodyStyle 操作？

我已经使用 javascript 实现了这一点，订阅 onchange 并存储选定的值，然后在链接中使用它。但是代码变得一团糟，因为我在几个视图中有近 10 个这样的组件。该功能非常简单，所以我想知道我是否缺少一些 ASP.NET MVC 功能，这将帮助我仅使用 Razor 视图引擎来实现这一点。

这是生成的视图，只是为了了解整个画面：

select 标签的每个选项的格式为：

<option value="1">Coupe - 2 door</option>
<option value="2">Coupe - 3 door</option>

当前实现（上面的视图示例中没有 id，但假设下拉列表和链接有 id，如 js 中所述）：

$(function () {
    $("#editBodyStyleLink").click(function () {
        var id = $("#bodyStylesDropDown").val();
        window.location.href = "/Home/EditBodyStyle/?id=" + id;
    });
});

【问题讨论】：

不妨看看这个：codeproject.com/Questions/593787/…
@jbontinck 我已经注意到第一个，我现在正在使用它，它很好。我并不反对编写 JS，但想知道如果没有它是否可以做到这一点。解决方案 2 有 onchange = "submit();" 这意味着一个操作将处理下拉列表中的所有更改，这是不可取的，因为我想在视图级别而不是控制器级别调度编辑操作。
没有javascript？你为什么不把表格发到EditBodyStyle？这里一定要用ActionLink吗？

标签： c# asp.net asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

首先您需要将您的 bodyStyleId 作为参数发布（请注意我使用 Cars 作为您的控制器名称，您需要将其更改为实际的控制器名称）：

   <div class="form-group">
@Html.LabelFor(model => model.BodyStyle, new { @class = "control-label col-md-2" })
<div class="col-md-10">
    @Html.DropDownListFor(model => model.BodyStyleId, (IEnumerable<SelectListItem>)ViewBag.Styles)
    @Html.ActionLink("Create", "CreateBodyStyle")

    @*here is the problem, can't find a way to pass selected BodyStyle Id to EditBodyStyle action*@
    @Html.ActionLink("Edit", "EditBodyStyle", null, new { bodyStyleId = model.BodyStyleId) 
</div>

然后您需要在填充您的选择列表项时选择它并将其发送回视图：

public ActionResult EditBodyStyle(int bodyStyleId)
{
    var styles = BodyStyles.Select(m => new SelectListItem
                {
                    Value = m.Id.ToString(),
                    Text = m.Name,
                    Selected = bodyStyleId.Equals(m.Id.ToString())

                });
    ViewBag.Styles = styles;
    return View(model);
}

在执行此操作时让我感到震惊的重要部分是选择列表的以下行：

 Selected = bodyStyleId.Equals(m.Id.ToString())

最后为你使用这个下拉菜单。

@Html.DropDownListFor(model => model.BodyStyleId, (IEnumerable<SelectListItem>)ViewBag.Styles, "Please select")

【讨论】：

抱歉，没听懂。 @Html.ActionLink("Edit", "EditBodyStyle") 怎么知道要传递给 action 的 id 是什么？
用户选择下拉菜单，我们不能从服务器端设置它。此答案无效。
用表单提交是我知道的唯一方法。（不带 javascript）
这会导致一个页面上有10个表单？我有很多组件
对不起，我重新安排了我的答案，以便更有意义。

【解决方案2】：

编写一个可以在任何地方重复使用的 javascript 框架。您必须使用 Javascript。

你可以这样接近。

@Html.DropDownListFor(model => model.BodyStyleId, (IEnumerable<SelectListItem>)ViewBag.Styles,new{@class="traceable",targetid="changeLink",url="/yourcontroller/EditBodyStyle/"})

<a id="changeLink" href="#">Edit</a>

然后写一个脚本

$(function(){
$('.traceable').change(function(){
var id=$(this).val();
var target=$(this).attr('tragetid'); 
var url=$(this).attr('url');
$('#'+target).attr('href',url+id);
});
});

【讨论】：