MVC 4 postback on Dropdownlist change

Question

Я использую 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> 

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

Answer 1

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

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

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

Для начала вам необходимо привязать событие изменения к этому элементу select. Это , вероятно,, идентифицированный с помощью «IdProvider» id, но вы хотите проверить отображаемый 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 с данными, заполненными в этом представлении. Но это, вероятно, слишком велико, потому что все, что вы хотите сделать, это отправить одно значение и получить два значения.

Answer 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 Используется сумка просмотра, но я бы предложил использовать отдельную модель просмотра для каждого создаваемого вами вида.

Answer 3

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

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

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