2

我试图弄清楚如何让 @Html.DropDownList 指向它创建的选择的 onChange() 事件上的另一个操作，操作名称存储在选择列表的选项值中。到目前为止，我得到的壁橱是这样的：

看法：

@using (Html.BeginForm("Index", "Home", FormMethod.Get))
{
<h5>Select service to test:</h5>
@Html.DropDownList("ddl", new SelectList(Model.Services, "MvcActionName", "ServiceName"), 
new {
    onchange = @"
    var form = document.forms[0];
    var action = $('#ddl').val();                                 
    form.action=action;
    form.submit();"
})

}

它发出的是这样的：

<form action="/" method="get">    <h5>Select service to test:</h5>
    <select id="ddl" name="ddl" onchange="
            var form = document.forms[0];
            var action = $("#ddl").val();                                 
            form.action=action;
            form.submit();"><option value="">Ping Service</option>
    <option value="Data">Data Service</option>
    </select>
</form>

但这所做的只是尝试调用“localhost/Data”并失败，因为它应该调用“localhost/Home/Data”。我正在使用标准的 MVC3 路由设置，但到目前为止，我还无法在那里进行更改，从而导致 BeginForm 助手发出更好的表单块。

再说一次，我不确定路由是否是问题所在，或者我是否走错了路才能到达我想去的地方。任何帮助或指导将不胜感激。

4

1 回答 1

2

2013 年 3 月 28 日更新：我已经用 .prop() 更新了 .attr() 这个答案中的 jquery 用法，因为我发现 .attr() 在 Chrome 中没有按预期工作。显然这是 jquery 的一个变化，并且是从这一点开始的方式。有关更多信息，请参阅此讨论：.prop() 与 .attr()

更新答案：

再次感谢 Griegs 提供的链接，这就是我最终得到的结果，以防其他人节省一些时间：

额外信息 - 我希望“动作选择”下拉菜单出现在它自己列表中的任何页面上，所以我把它放在布局中。唯一的问题是我必须在每个页面加载时在 js 中设置正确的“选定”选项，但这没什么大不了的。

这是布局视图：

<body>
    <h4>Action Selector:</h4>
    <select id="ServiceDropDown" name="ServiceDropDown">
        <option value="Index">Ping Service</option> 
        <option value="Data">Data Service</option>
    </select>
    <br />

    @RenderBody()
</body>
</html>

索引视图：

<h2>Index</h2>

<script type="text/javascript">
    $(document).ready(function () {
        SetupServicesDropDown('Index');
    });
</script>

我的概念证明中的另一个视图（实际上与 Index 相同，我只是想强调参数与函数调用的区别）：

<h2>Data</h2>

<script type="text/javascript">
    $(document).ready(function () {
        SetupServicesDropDown('Data');
    });
</script>

我将使它全部工作的函数放入一个单独的文件中：

function SetupServicesDropDown(optionValue) {
    // Set correct option in ServiceDropDown
    $('#ServiceDropDown > option[value = ' + optionValue + ']').prop("selected", "selected");

    // Event handler for ServiceDropDown.onChange()
    // Redirects to new Action in same Controller, with Action name of the selected option value
    $('#ServiceDropDown').change(function () {
        var target = "/Home/" + $("#ServiceDropDown option:selected").prop('value');
        window.location = target;
    });
}

只要您不介意必须在每个页面上调用 setup 函数，它就可以发挥作用。再次感谢。

于 2013-03-28T03:14:28.760 回答