Вызов определенного действия при выборе выпадающего списка в MVC - PullRequest
23 голосов
/ 06 февраля 2010

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

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

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

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

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

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

Ответы [ 6 ]

22 голосов
/ 06 февраля 2010

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

onchange = "redirect(this.value)"

, где redirect - это пользовательская функция:

function redirect(dropDownValue) {
    window.location.href = '/myController/myAction/' + dropDownValue;
}
13 голосов
/ 07 февраля 2010

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

<%= Html.DropDownList(
        "ddl", ViewData["AvailableList"] as SelectList, 
        new { onchange = @"
            var form = document.forms[0]; 
            form.action='MyMethod';
            form.submit();" 
        } ) %>
6 голосов
/ 06 февраля 2010

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

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

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

$('._select_change').change(function() { $.post(ctrlUrl); })
2 голосов
/ 06 февраля 2010

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

<%= 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 });
}
2 голосов
/ 06 февраля 2010

Как оба: 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
    } );
}
1 голос
/ 08 июля 2015

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