如何根据HtmlHelper DropDownList的选定值更改页面上的内容?

时间:2009-05-22 01:39:14

标签: jquery asp.net-mvc ajax linq-to-sql drop-down-menu

我正在使用ASP.NET MVC,并希望根据HtmlHelper.DropDownList的选定值更新页面上的内容。我有一个管理页面,我希望在该页面上显示给定学期的雇佣员工列表,而无需重定向到另一个控制器。也许可以生成一个表或者填充这些用户的ListBox。

在我的数据库中,我有一个包含学期列表的表格,一个包含用户列表的表格,以及另一个包含两个与FK相关的字段的表格,每个学期都与所有被雇用的用户相关联。

有什么想法吗?

1 个答案:

答案 0 :(得分:5)

执行一个操作,返回包含显示标记的PartialViewResult。您的下拉列表将使用学期作为文本和关联的数据库键作为值。向下拉列表添加一个更改处理程序,该列表执行AJAX获取呈现局部视图的操作,并将该学期键值作为URL的一部分传递给该方法。将应该包含局部视图的容器替换为AJAX查询的结果。

查看

$(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)
}