Вызов конкретного действия для выбора списка в MVC

У меня есть раскрывающийся список в представлении MVC. При изменении выбора выпадающего списка я хочу вызвать конкретный метод действий в контроллере.

Что я сделал на виду, это:

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

Все компилируется. Но исключение во время выполнения бросается, когда я изменяю выпадающий выбор, поскольку

"Ошибка выполнения JavaScript JScript Microsift: объект не поддерживает свойство или метод"

Как я могу перенаправить на конкретное действие в событие изменения выбора списка?
Как передать параметры этому методу действий?

Ответ 1

Ваш подход должен работать. Проблема, с которой вы сталкиваетесь, - использование вами this в вашем onchange событии недействительно. Попробуйте заменить ваши ссылки this.form на что-то вроде этого:

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

Ответ 2

Вам действительно нужно отправить форму? Вы можете перенаправить:

onchange = "redirect(this.value)"

где redirect - настраиваемая функция:

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

Ответ 3

Это jQuery вещь. Дайте ему класс и подключитесь к нему.

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

Грубый script может выглядеть так:

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

Ответ 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
    } );
}

Ответ 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 });
}

Ответ 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;" })