Как я могу изменить контент на моей странице, основываясь на выбранном значении HtmlHelper DropDownList?

Question

Я использую ASP.NET MVC и хочу обновить содержимое моей страницы на основе выбранного значения HtmlHelper.DropDownList. У меня есть страница администратора, на которой я хотел бы отобразить список наемных сотрудников за данный семестр, без необходимости перенаправления на другой контроллер. Возможно, можно создать таблицу или заполнить ListBox этими пользователями.

В моей базе данных есть таблица со списком семестров, таблица со списком пользователей и еще одна таблица с двумя полями, связанными с FK, связывающими каждый семестр со всеми нанятыми пользователями.

Есть идеи?

Answer 1

Выполните действие, которое возвращает PartialViewResult, содержащий разметку вашего дисплея. Ваш выпадающий список будет иметь семестр в качестве текста и связанный ключ базы данных в качестве значения. Добавьте обработчик изменений в раскрывающийся список, в котором AJAX получает действие, которое отображает частичное представление, и передает значение ключа семестра в метод как часть URL-адреса. Замените контейнер, который должен содержать частичное представление, с результатами запроса AJAX.

View

$(function() {
  $('#SemesterSelect').change( function() {
      $.get( '<%= Url.Action('ListEmployees') %>/' + $(this).val(), function(data) {
         $('#EmployeeList').html(data);
      },
      'html');
  });
});


<%= Html.DropDownList("SemesterSelect",
                        (IEnumerable<SelectListItem>)ViewData["Semesters"]) %>

<div id="EmployeeList"></div>

PartialView (образец - типа IEnumerable)

<ul>
<% foreach (var employee in Model)
   { %>
       <li> <%= employee.Name %> </li>
<% } %>
</ul>

Контроллер

public ActionResult ListEmployees( int semesterID )
{
     var employees = db.... // query to get employees
     return PartialView("EmployeeList", employees)
}