ASP.NET MVC 2 Filtering multiple drop down lists

Question

I know how to approach this problem but i have very little experience dealing with anything web related.

The situation is: I have a controller that returns a view with a user control in it. Inside the user control i have 3 drop down lists; one for companies, one for field offices and one for facilities. When the companies ddl is altered, the field office and facility ddls should change, and when the field office ddl is altered the facility ddl should change.

Index.aspx '<%@ Page Title="ManifestSearchPage" AutoEventWireup="true" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage"%>

Manifest

<form id="form1" runat="server">

<% using (Html.BeginForm()) { %>
    <fieldset>
        <legend><h2>Find a Manifest</h2></legend>
        <table>
            <tr>
                <td>
                    <img src="../../Content/magnify-large.jpg" width="111" height="111" align="middle"></img>
                </td>
                <td>
                    <% Html.RenderPartial("../Shared/EditorTemplates/ManifestSearch");%>
                </td>
            </tr>
        </table>
    </fieldset>
<%

} %>

<h2>Search Results</h2>
<div id="resultspanel">
    <table>
        <tr>
        </tr>
        <% foreach (var item in Model.SearchResults) { %>
           <tr>
            <td>
                blargh
            </td>
           </tr>
    <% } %>
    </table>
</div>

</form>

'

ManifestSearch.aspx ' <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<% using (Html.BeginForm()) {%>
    <%: Html.ValidationSummary(true) %>

    <fieldset>
        <legend>Fields</legend>
            <table>
                <tr>
                    <td>
                        <%: Html.LabelFor(model => model.ManifestPartialId) %>
                        <%: Html.CheckBoxFor(model => model.SearchByManifestPartialId)%>
                        <%: Html.ValidationMessageFor(model => model.SearchByManifestPartialId) %>
                    </td>
                    <td>
                        <%: Html.LabelFor(model => model.CompanyId) %>
                        <%: Html.CheckBoxFor(model => model.SearchByCompanyId)%>
                        <%: Html.ValidationMessageFor(model => model.SearchByCompanyId) %>
                    </td>
                </tr>
                <tr>
                    <td>
                        <%: Html.TextBoxFor(model => model.ManifestPartialId) %>
                        <%: Html.ValidationMessageFor(model => model.ManifestPartialId) %>
                    </td>
                    <td>
                        <%: Html.DropDownList("CompanyId", new SelectList(ViewData["Companies"] as IEnumerable,"Id","CompanyName", Model.CompanyId))%>
                        <%: Html.ValidationMessageFor(model => model.CompanyId) %>
                    </td>
                </tr>
                <tr>
                    <td>
                        <%: Html.LabelFor(model => model.FieldOfficeId) %>
                        <%: Html.CheckBoxFor(model => model.SearchByFieldOfficeId)%>
                        <%: Html.ValidationMessageFor(model => model.SearchByFieldOfficeId) %>
                    </td>
                    <td>
                        <%: Html.LabelFor(model => model.FacilityId) %>
                        <%: Html.CheckBoxFor(model => model.SearchByFacilityId)%>
                        <%: Html.ValidationMessageFor(model => model.SearchByFacilityId) %>
                    </td>
                </tr>
                <tr>
                    <td>
                        <%: Html.DropDownList("FieldOfficeId", new SelectList(ViewData["FieldOffices"] as IEnumerable, "Id", "FacilityName", Model.FieldOfficeId))%>
                        <%: Html.ValidationMessageFor(model => model.FieldOfficeId) %>
                    </td>
                    <td>
                        <%: Html.DropDownList("FacilityId", new SelectList(ViewData["Facilities"] as IEnumerable, "Id", "FacilityName", Model.FacilityId))%>
                        <%: Html.ValidationMessageFor(model => model.FacilityId) %>
                    </td>
                </tr>
                <tr>
                    <td>
                        <%: Html.LabelFor(model => model.SearchByDateTime) %>
                        <%: Html.CheckBoxFor(model => model.SearchByDateTime) %>
                        <%: Html.ValidationMessageFor(model => model.SearchByDateTime) %>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <%: Html.LabelFor(model => model.FromDate) %>
                        <%: Html.TextBoxFor(model => model.FromDate) %>
                        <%: Html.ValidationMessageFor(model => model.FromDate) %>
                    </td>
                    <td>
                        <%: Html.LabelFor(model => model.ToDate) %>
                        <%: Html.TextBoxFor(model => model.ToDate) %>
                        <%: Html.ValidationMessageFor(model => model.ToDate) %>
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <input type="submit" value="Search" />
                    </td>
                </tr>
            </table>   
    </fieldset>

<% } %>

'

This all works, with the exception of my requirement of my dropdownlists not being linked.

I know i have to use Javascript to accomplish my requirement of related dropdownlists but i have no idea how to even approach it. Ive found some tutorials, but none seem to relate to the way i have my code set up. Can anyone help with this?

Answer 1

First, for all the jQuery people here

If you're using jQuery you can use the Change Event Handler to alter you dropdown menus.

$('#firstSelect').change(function() {
  // DO STUFF
});

If you don't use jQuery on could use the onchange attribute on your dropdown menu

<script type="text/javascript>
function doStuffOnChange() {
   // DO STUFF
}
</script>

<select id="firstSelect" onchange="doStuffOnChange();">

You can add HTML Attributes with HTML Helpers by using this variant

public static MvcHtmlString DropDownList(
    this HtmlHelper htmlHelper,
    string name,
    IEnumerable<SelectListItem> selectList,
    IDictionary<string, Object> htmlAttributes
)