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

Question

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

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

假设我有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;
    });
});

Answer 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")

Answer 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);
});
});