MVC 3下拉列表重定向到Diff actiononchange

我想弄清楚如何得到一个@Html。在它创建的选择的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帮助器发出更好的表单块。

然后再一次，我不确定路由甚至是问题，或者我是否采取了一条糟糕的路径来到达我想去的地方。如有任何帮助或指导，将不胜感激。

更新2013年3月28日:我已经更新了jquery的使用在这个答案。attr()与。prop()，因为我发现。attr()没有工作如预期在Chrome。显然，这是jquery的一个变化，也是今后的发展方向。更多信息请看下面的讨论:.prop() vs .attr()

答:

更新

再次感谢Griegs提供的链接，这是我最后的结果，以防这为其他人节省了一些时间:

额外信息-我想让"Action selection"下拉菜单出现在任何页面的列表中，所以我把它放在布局中。唯一的问题是，我必须在每个页面上设置正确的"selected"选项，但这不是一个大问题。

这是布局视图:

<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>

和我的概念证明中的另一个视图(与索引相同，我只是想强调函数调用参数的差异):

<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函数，它就像一个魅力。再次感谢。

相关内容

最新更新

热门标签：