How can I change content on my page based on the selected value of an HtmlHelper DropDownList?

Question

Hello,

I am using ASP.NET MVC and want to update content on my page based on the selected value of an HtmlHelper.DropDownList. I have an Admin page on which I would like to display a list of hired employees for a given semester, without having to redirect to another controller. Perhaps a table could be generated or a ListBox filled with these users.

In my database, I have a table containing a list of semesters, a table containing a list of users, and another table with two FK-related fields linking each semester with all the users who are hired for it.

Any ideas? Thanks in advance.

Answer 1

Have an action that returns a PartialViewResult containing the mark up your display. Your dropdown list will have the semester as the text and associated database key as the value. Add a change handler to the dropdown list that does an AJAX get to the action that renders the partial view and pass the semester key value to the method as part of the url. Replace the container that should hold the partial view with the results of the AJAX query.

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 (sample -- of type IEnumerable)

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

Controller

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