将 javascript 挂钩到下拉列表更改

Question

¡哈拉！

我当前的任务是创建一个页面，用户可以在其中通过下拉列表选择套牌标题。选择标题后，页面应回发该卡片组的详细信息。

这是我目前得到的：

@model IEnumerable<SCATChartsMVC.Models.Charts_DeckList>

@{
    ViewBag.Title = "Index";

    if (IsPost) { ViewBag.Title = "We posted back!"; }
}

<h2>Index</h2>

@{ var list = ViewData.Model.Select(cl => new SelectListItem
                                {
                                    Value = cl.RecNum.ToString(),
                                    Text = cl.DeckTitle.ToString()
                                });
}


@using (Html.BeginForm("Details", "Charts_DeckList", FormMethod.Post)) 
{ 
    @Html.DropDownList("deckTitles", list, "---------select---------")

    <input type="submit" name="submit" value="Submit" />
    @Html.ActionLink("Details", "Details", "Charts_DeckList", new { id = list.ElementAt(4).Text }, "")

}

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
    $("deckTitles").change(function () {
        if ($("#deckTitles").val() != "") {
            var test = {};
            test.url = "/Charts_DeckList/Details";
            test.type = "POST";
            test.data = JSON.stringify($('#deckTitles').val());
            test.datatype = "json";
            test.contentType = "application/json";
            test.success = true;
            test.error = function () { alert("Error!"); };
            $.ajax(test);
        }
    })
</script>

Html.BeginForm下的input标签和ActionLink是我自己测试的；如果我指定元素，则 ActionLink 可以正常工作。我希望能够在用户点击选择时传递类似的东西，而不是每当他们点击“详细信息”按钮时。

提交输入标签不起作用。它确实正确路由到 Charts_DeckList/Details，但操作中的参数始终为 null。

我刚刚进入整个 MVC/Web 繁琐，所以有很多我不知道我什至不知道我不知道的东西。虽然我在互联网上看到许多不同的资源提出了不同的建议，但此时我已经忘记了很多 Web 开发术语，而且自从 VS似乎是自动组合了这么多。

任何指针将不胜感激。谢谢。

---

下面巴里克的建议是正确的！

我还必须将脚本标签向上移动到 BeginForm 括号中，请注意。

Answer 1

您没有在那里设置DropDownList 的ID，第一个参数设置下拉列表的name 属性（用于标识服务器回发时POST 变量集合中的值）- 您需要添加另一个参数来设置 ID：

@Html.DropDownList("deckTitles", list, "---------select---------", new { @id = "deckTitles" });

然后你就可以在 jQuery 中获取选中的值，如下所示：

$("#deckTitles option:selected").val();