Binding dropdown when ajax form in submitted in mvc2 asp.net - asp.net-mvc-2

Question

My requirement is simple, there are two dropdowns in my view. First dropdown is filled be default and second dropdown has to be filled based on values from first dropdown.
My view is
<script type='text/javascript'>
$(function() {
$('#ddlRoles').change(function() {
$(this).parents('form').submit();
});
});
< % using (Ajax.BeginForm("UpdateDropdownForm", new AjaxOptions { UpdateTargetId = "txtDropdownValue" }))
{ %>
<%= Html.DropDownList("ddlRoles", (IEnumerable<SelectListItem>)ViewData["RolesData"])%>
<%= Html.DropDownList("ddlUsers", (IEnumerable<SelectListItem>)ViewData["UsersList"])%>
<% } %>
My controller is
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["RolesData"] = GetDropdownList();
List<SelectListItem> usersList = new List<SelectListItem>();
usersList.Add(new SelectListItem() { Text = "Select" });
ViewData["UsersList"] = usersList;
TempData["UsersList"] = usersList;
return View();
}
public IEnumerable<SelectListItem> UpdateDropdownForm(string ddlRoles)
{
ViewData["UsersList"] = GetUsersList();
TempData["UsersList"] = GetUsersList();
return GetUsersList();
}
public List<SelectListItem> GetDropdownList()
{
List<SelectListItem> list = new List<SelectListItem>();
list.Add(new SelectListItem() { Text = "Admin", Value = "1" });
list.Add(new SelectListItem() { Text = "Employee", Value = "2" });
list.Add(new SelectListItem() { Text = "Manager", Value = "3" });
return list;
}
public List<SelectListItem> GetUsersList()
{
List<SelectListItem> list = new List<SelectListItem>();
list.Add(new SelectListItem() { Text = "Administrator", Value = "10" });
list.Add(new SelectListItem() { Text = "Ramesh", Value = "20" });
list.Add(new SelectListItem() { Text = "Satish", Value = "30" });
return list;
}
}
Here, im able to post the first dropdown data, and im setting the second dropdown data in viewdata/tempdata and in view im binding the data to second dropdown. But this is not working.
For now, when first dropdown is changed, im just binding second dropdown. but what if i want to fill a dropdown and display data in two text boxes. What do i have to do in that case?
How do i solve this.
please help.

Answer 1

You may find the following answer useful for generating cascading dropdown lists.