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

Question

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

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

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

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

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

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

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

Из действия контроллера вы совершите вызов таким же образом:

<%= 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 5

Как оба: 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 6

@ Шимми, есть ли способ сделать это как однострочник, без определения функция в 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;" })