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?

Henrik P. Hessel · Accepted Answer · 2010-10-03 01:01:31Z

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
)

edited Oct 3, 2010 at 1:01

answered Oct 3, 2010 at 0:44

Henrik P. Hessel

36.6k17 gold badges83 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

John Stuart Over a year ago

Is there a way to do this with '<%: Html.dropdownlist() %>' ?

John Stuart Over a year ago

'<%: Html.dropdownlist("CompanyId", new SelectList(ViewData["Companies"] as IEnumerable,"Id","CompanyName", Model.CompanyId), new {onchange=@{some func}}) %>'

John Stuart Over a year ago

Ill give this a shot. Though this does look promising, i may have a question later about how to implement this. Thanks for your help.

Collectives™ on Stack Overflow

ASP.NET MVC 2 Filtering multiple drop down lists

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related