Question

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

我在观点上所做的是：

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

一切都在编译中。但是当我更改下拉选项时会抛出运行时异常，如

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

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

Answer 1

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

onchange = "redirect(this.value)"

其中redirect是自定义函数：

function redirect(dropDownValue) {
    window.location.href = '/myController/myAction/' + dropDownValue;
}

Answer 2

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

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

Answer 3

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

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

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

$('._select_change').change(function() { $.post(ctrlUrl); })

Answer 4

像两者一样：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
    } );
}

Answer 5

从控制器操作开始，您将以相同的方式拨打电话：

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

Answer 6

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

Answer 7

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

在MVC中的下拉列表选择上调用特定操作

7 个答案: