asp.net-mvc 在 MVC 中对下拉列表选择调用特定操作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2213055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Invoking particular action on dropdown list selection in MVC
提问by Jaqen H'ghar
I have a dropdown list in an MVC view. On selection change of dropdown list I want to call specific action method in the controller.
我在 MVC 视图中有一个下拉列表。在选择更改下拉列表时，我想在控制器中调用特定的操作方法。
What I have done on view is this :
我所做的是这样的：
<%=Html.DropDownList("ddl", ViewData["AvailableList"] as SelectList,
new { onchange = "this.form.action='MyMethod';this.form.submit();" })%>
Everything is getting compiled. But a runtime exception is thrown when I change the drop down selection, as
一切都在编译。但是当我更改下拉选择时会引发运行时异常，如
"Microsift JScript Runtime Error : Object doesn't support property or method"
“Microsift JScript 运行时错误：对象不支持属性或方法”
How can I redirect to specific action on list selection change event?
How can I pass parameters to this action method?
如何重定向到列表选择更改事件的特定操作？
如何将参数传递给此操作方法？
采纳答案by Jacob
Your approach should work. The issue you're encountering is your use of thisin your onchangeevent is invalid. Try replacing your this.formreferences with something like this:
你的方法应该有效。您遇到的问题是您this在onchange活动中的使用无效。尝试用this.form这样的东西替换你的引用：
<%= Html.DropDownList(
"ddl", ViewData["AvailableList"] as SelectList,
new { onchange = @"
var form = document.forms[0];
form.action='MyMethod';
form.submit();"
} ) %>
回答by Darin Dimitrov
Do you really need to submit the form? You could redirect:
你真的需要提交表格吗？你可以重定向：
onchange = "redirect(this.value)"
where redirectis a custom defined function:
redirect自定义函数在哪里：
function redirect(dropDownValue) {
window.location.href = '/myController/myAction/' + dropDownValue;
}
回答by ziya
This is a jQuery thing. Give it a class and wire up to it.
这是一个 jQuery 的东西。给它一个类并连接它。
Html.DropDownList("ddl", AvailableList, new { @class = "_select_change" })
A rough script might look like this:
粗略的脚本可能如下所示：
$('._select_change').change(function() { $.post(ctrlUrl); })
回答by SDReyes
Like both : D
两个都喜欢 :D
I propose a mix -I like a lot the jQuery.
我建议混合使用 - 我非常喜欢 jQuery。
$('ddl').change(
function() {
// This contains your selected option val
$(this).val();
// so you can do domething like...
$.post(
$(this).val(),
{ Param1: xxxx,
Param2: xxxx,
Param3: xxxx },
function(data) {
// handle your call here. 'data' contains the response
} );
}
回答by Neil T.
From the controller action, you're going to make the call the same way:
从控制器操作中，您将以相同的方式进行调用：
<%= Html.DropDownList(ddl, ViewData["items"] as SelectList, new { onchange = string.format("doSomething({0}); return false;", action) }) %>
Once you do that, put a Javascript function on your page that calls the method. How you call it, however, is going to depend on whether it's an AJAX call or not. That is, whether you want a page round-trip or not. For the non-AJAX call:
完成此操作后，在页面上放置一个调用该方法的 Javascript 函数。但是，如何调用它取决于它是否是 AJAX 调用。也就是说，无论您是否想要页面往返。对于非 AJAX 调用：
function doSomething(action) {
window.location.href = action;
}
If it's an AJAX call:
如果是 AJAX 调用：
function doSomething(action) {
$.load(action);
}
To pass parameters to the action, you just need to make sure that all of the data elements you want to pass are contained within the <form>tag. For example, let's say you want to include a first and last name with your drop down list. In the view, you'll do something like this:
要将参数传递给操作，您只需确保要传递的所有数据元素都包含在<form>标记中。例如，假设您想在下拉列表中包含名字和姓氏。在视图中，您将执行以下操作：
<%= using (Html.BeginForm())
{ %>
<table>
<tr>
<td>First Name:</td>
<td><%= Html.TextBox("FirstName") %></td>
</tr>
<tr>
<td>Last Name:</td>
<td><%= Html.TextBox("LastName") %></td>
</tr>
<tr>
<td>Assign to:</td>
<td><%= Html.DropDownList(ddl, ViewData["items"] as SelectList,
new { onchange = string.format("doSomething({0}); return false;", ViewData["action"]) }) %></td>
<tr>
</table>
<% } %>
In the Javascript function:
在 Javascript 函数中：
function doSomething(action) {
var firstName = $('#FirstName').val();
var lastName = $('#LastName').val();
$.load(action, { first: firstName, last: lastName });
}
回答by Nick Kahn
@Shimmy is there a way to do this as a one-liner, without defining the function in js?
@Shimmy 有没有一种方法可以将其作为单线执行，而无需在 js 中定义函数？
yes you can and here is the code for that:
是的，你可以，这里是代码：
@Html.DropDownListFor(m => m.Name, new SelectList((System.Collections.IEnumerable)ViewBag.DropDownName, "Value", "Text"), new { @class = "form-control", onchange = "document.location.href = '/Home/Employee?c=' + this.options[this.selectedIndex].value;" })
回答by Leon Polyakov
@Html.DropDownListFor(model => model.StudentId, new SelectList(ViewBag.List, "Value", "Text"), new { @class = "form-control", @style = "width:65px", onchange = "document.location.href = '/Student/find?Id=' + this.options[this.selectedIndex].value;" })
