23

我在 MVC 视图中有一个下拉列表。在下拉列表的选择更改时，我想在控制器中调用特定的操作方法。

我在视图中所做的是：

<%=Html.DropDownList("ddl", ViewData["AvailableList"] as SelectList,
  new { onchange = "this.form.action='MyMethod';this.form.submit();" })%>

一切都在编译。但是当我更改下拉选择时会引发运行时异常，如

“Microsift JScript 运行时错误：对象不支持属性或方法”

如何重定向到列表选择更改事件的特定操作？
如何将参数传递给此操作方法？

4

7 回答 7

23

你真的需要提交表格吗？您可以重定向：

onchange = "redirect(this.value)"

redirect自定义函数在哪里：

function redirect(dropDownValue) {
    window.location.href = '/myController/myAction/' + dropDownValue;
}
于 2010-02-06T12:38:13.330 回答
14

你的方法应该有效。您遇到的问题是您this在onchange活动中的使用无效。尝试用以下内容替换您的this.form引用：

<%= Html.DropDownList(
        "ddl", ViewData["AvailableList"] as SelectList, 
        new { onchange = @"
            var form = document.forms[0]; 
            form.action='MyMethod';
            form.submit();" 
        } ) %>
于 2010-02-06T21:44:54.787 回答
6

这是一个 jQuery 的东西。给它一个课程并连接它。

Html.DropDownList("ddl", AvailableList, new { @class = "_select_change" })

粗略的脚本可能如下所示：

$('._select_change').change(function() { $.post(ctrlUrl); })
于 2010-02-06T12:40:06.070 回答
2

两个都喜欢：D

我建议混合使用——我非常喜欢 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
    } );
}
于 2010-02-06T19:51:54.970 回答
2

从控制器操作中，您将以相同的方式进行调用：

<%= Html.DropDownList(ddl, ViewData["items"] as SelectList, new { onchange = string.format("doSomething({0}); return false;", action) }) %>

一旦你这样做了，在你的页面上放置一个调用该方法的 Javascript 函数。但是，您如何称呼它取决于它是否是 AJAX 调用。也就是说，您是否想要页面往返。对于非 AJAX 调用：

function doSomething(action) {
    window.location.href = action;
}

如果是 AJAX 调用：

function doSomething(action) {
    $.load(action);
}

要将参数传递给操作，您只需确保要传递的所有数据元素都包含在<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>
<% } %>

在 Javascript 函数中：

function doSomething(action) {
    var firstName = $('#FirstName').val();
    var lastName = $('#LastName').val();
    $.load(action, { first: firstName, last: lastName });
}
于 2010-02-06T20:55:10.107 回答
1

@Shimmy 有没有一种方法可以将其作为单行来执行，而无需在 js 中定义函数？

是的，你可以，这是代码：

@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;" })
于 2015-07-08T12:45:32.083 回答
-1 
@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;" })
于 2020-05-19T23:36:35.443 回答