MVC 3 DropDownList重定向到Diff动作OnChange?

时间:2013-03-27 23:46:14

标签: asp.net-mvc-3

我试图找出如何让@ Html.DropDownList指向其创建的select的onChange()事件上的另一个Action,该动作名称存储在选择列表的选项值中。我到目前为止得到的壁橱是:

查看:

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

但这一切都是尝试调用&#34; localhost / Data&#34;并失败,因为它应该调用&#34; localhost / Home / Data&#34;。我使用标准的MVC3路由设置,但到目前为止我还没有能够在那里进行更改,导致BeginForm帮助器发出更好的表单块。

然后,我不确定路由是否是问题,或者我是否走上一条糟糕的道路前往我想去的地方。任何帮助或指导将不胜感激。

1 个答案:

答案 0 :(得分:2)

2013年3月28日更新:我已经使用.prop()更新了.attr()答案中的jquery用法,因为我发现.attr()不能正常工作预计在Chrome中。显然这是jquery的变化,并且是从这一点开始的方法。有关详细信息,请参阅此讨论:.prop() vs .attr()

更新答案:

再次感谢格里格斯的链接,这是我最终得到的结果,以防其他人节省时间:

额外的信息 - 我希望“动作选择”下拉列表出现在它自己的列表中的任何页面上,所以我把它放在布局中。唯一的打嗝是我必须在每个页面上的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>

在我的概念证明中的另一个观点(与索引相同,我只是想突出函数调用的参数差异):

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

只要您不介意在每个页面上调用设置功能,它就像魅力一样。再次感谢。