Возврат MVC 4 при изменении Dropdownlist

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

<div class="row">
    <div class="col-md-4">
    @Html.DropDownListFor(x=> x.usr.DatUsrs.IdProvider, new SelectList(Lista, "Value","Text"))
    </div>
    <div class="col-md-3">
      Credit
      @Html.DisplayTextFor(x=> x.usrSelectedProvider.AvailiableCredit)
    </div>
    <div class="col-md-3">
      TEXT
    </div>
    <div class="col-md-2">
      Closing Day  @Html.DisplayTextFor(m=> m.usrSelectedProvider.ClosingDay)
    </div>
  </div>

проблема, с которой я сталкиваюсь, заключается в следующем: когда пользователь изменяет выбранный элемент в раскрывающемся списке, я хочу сделать обратную передачу, чтобы иметь возможность загрузить AccessiableCredit и ClosingDay. В webforms я мог сделать это с помощью autopostback, но я не нашел способ сделать это в MVC4

Ответ 1

Есть несколько способов сделать это, но сначала вам нужно понять структуру того, что вы делаете.

Это не "post back" в MVC (или, действительно, в HTTP в целом... вам не нравятся WebForms). То, что вы пытаетесь сделать, это просто отправить данные на сервер и получить ответ. В MVC Framework целью этого сообщения будет действие контроллера. Ответ может быть несколько разных вещей, в зависимости от вашего подхода.

Я рекомендую писать JavaScript для выполнения этой задачи через AJAX. Таким образом, страница не обновляется, и вы только отправляете/получаете данные, относящиеся к конкретной задаче. ASP.NET MVC поставляется с jQuery, поэтому я предполагаю использование jQuery в этом случае.

Сначала вам нужно привязать событие изменения к этому элементу select. Вероятно, он идентифицирован с id "IdProvider", но вы хотите проверить отображаемый HTML, чтобы убедиться. Предположим, что вы можете использовать что-то вроде этого:

$('#IdProvider').change(function () {
    // respond to the change event in here
});

Теперь вы можете сделать вызов AJAX на сервере внутри этого обработчика. Это может быть что-то просто:

var selectedValue = $('#IdProvider').val();
$.post('@Url.Action("MyAction", "MyController")', { selection : selectedValue }, function (data) {
    // handle the server response here
});

При этом действие контроллера будет иметь выбранное значение, доступное в аргументе selection:

public ActionResult MyAction(string selection)
{
    // do your server-side processing and get your data
    return Json(data);
}

Это действие возвращает форматированные данные Json, поскольку он используется JavaScript на клиенте. Поэтому при обработке ответа в вызове $.post() выше вы получите эти данные в data.

То, что вы делаете с этими данными в коде JavaScript, зависит от вас. Если это простая структура с двумя значениями, которые вы ищете, это может быть что-то простое:

$('#AvailableCredit').text(data.AvailableCredit);
$('#ClosingDay').text(data.ClosingDay);

В качестве альтернативы вы можете обернуть элемент select в form и опубликовать все это при изменении выбора, и тогда действие контроллера должно вернуть View данные, заполненные в этом представлении. Но это, вероятно, слишком велико, поскольку все, что вы хотите сделать, это отправить одно значение и получить два значения.

Ответ 2

В MVC нет необходимости в отправке сообщения, Когда пользователь выбирает из раскрывающегося списка, redirecect к тому же действию снова, но на этот раз действие будет иметь атрибут HttpPost (это будет ваша обратная передача). Затем вы можете делать все, что захотите, и повторно отображать один и тот же вид, но на этот раз с новой моделью просмотра (с вашими новыми данными: AvailiableCredit и ClosingDay)

    public ActionResult DisplayMainView()
    {    
      LoadDataOnDropDown();    
      return View();    
    }

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

[HttpPost]
public ActionResult DisplayMainView(string selectedValueFromDropdown) {

// get AvailiableCredit and ClosingDay  based on selection
ViewBag.AvailiableCredit = myService.GetAvailiableCredit (selectedValueFromDropdown);
ViewBag.ClosingDay   = myService.GetClosingDay (selectedValueFromDropdown);

return View;

}

Это псевдокод, который иллюстрирует, как вы должны использовать HttpPost для имитации обратной передачи webForm. N.B.:I Использовал viewbag, но я бы предложил использовать отдельную viewmodel для каждого созданного вами вида.

Ответ 3

Отказ от ответственности. Этот подход предоставит всю форму. Если возможно, лучше выполнить операцию Ajax вместо формы submit. Ответ Дэвида объясняет, как сделать вызов Ajax.

Если добавить класс data-on-change-submit в список выбора (или любой элемент ввода, который должен запускать post back). Тогда можно добавить обработчик событий; который представит форму об изменении, следующим образом.

$(function () {
    $(".data-on-change-submit")
        .change(function ()
                {
                   var form = button.closest("form");
                   form.submit();
                })
});