0

I have two dropdownlistfor, and the second of them should be filled with an array based on the value of the first dropdownlist

I've tried to follow Darins Answer here but I have problem getting the second dropdownlistforto work and filled with my array. My second Dropdownlisfor is not getting filled, instead, it disappear.

This my script for using JSON

    <script type="text/javascript">
    $(function () {
        $('#teamname').change(function () {
            var selectednametext = $(this).find("option:selected").text();
            $.getJSON('@Url.Action("TeamName")', { TeamName: selectednametext }, function (persons) {
                var selectedpersons = $('#personname');
                selectedpersons.empty();
                $.each(persons, function (index, person) {
                    selectedpersons.append(
                    $('<option/>')
                        .attr('value', person.name)
                        .text(person.name)
                );
            });
        });
    });
});
</script>

This is my DropdownListforin my view:

<p>Team</p>
        <div class="editor-field" id="teamname">
            @Html.DropDownListFor(model => model.TeamName, Model.Teams, "Select Team", new { @class = "selectstyle" })
            @Html.ValidationMessageFor(model => model.TeamName)
        </div>
        <p>Person</p>
        <div class="editor-field" id="personname">
            @Html.DropDownListFor(model => model.PersonName, Model.Person, "Select Person", new { @class = "selectstyle", @disabled = "disabled" })
            @Html.ValidationMessageFor(model => model.PersonName)

This how my array is getting filled in my controller:

public ActionResult TeamName(string teamname)
    {
        if (teamname == "Team A")
        {
            System.Collections.ArrayList teamArray = new System.Collections.ArrayList();

            new ConsultantContext(new Uri("http://foo/persons"), ConsultantContext.Format.Json)
            .Consultant
            .Where(x => x.Team == "Team A")
            .OrderBy(x => x.DisplayName)
            .ToList()
            .ForEach(item =>
            {
            teamArray.Add(item.DisplayName);
            });

            return Json(teamArray, JsonRequestBehavior.AllowGet);   
        }// and same goes with arrays for Team B and Team C

All kind of help is appreciated, thanks in advance!

Community
  • 1
  • 1
ps__
  • 365
  • 1
  • 4
  • 19

1 Answers1

1

$('#teamname') doesn't match the id of your dropdown. Make sure that you have assigned the same id in your markup:

@Html.DropDownListFor(
    model => model.TeamName, 
    Model.Teams, 
    "Select Team", 
    new { id = "teamname", @class = "selectstyle" }
)

Same stands true for the $('#personname'); selector. You should fix your markup so that those selectors correspond to your DOM elements.

Also why are you using ArrayList? That's prehistoric. Use strongly typed collections:

public ActionResult TeamName(string teamname)
{
    var consultants = new ConsultantContext(
        new Uri("http://foo/persons"), 
        ConsultantContext.Format.Json
    )
    .Consultant
    .Where(x => x.Team == teamname)
    .OrderBy(x => x.DisplayName)
    .ToList()
    .Select(x => new 
    {
        name = x.DisplayName
    });

    return Json(consultants, JsonRequestBehavior.AllowGet);   
}
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • I've fixed that id's match now. But my script is still not filling my second `dropdownlist` with arrays. It's instead empty. – ps__ May 15 '12 at 14:19
  • Did you look in FireBug? Do you see the AJAX request? What does the server respond? Make sure that your jQuery selectors return values. You could use FireBug to put breakpoints in your javascript and debug it step by step. – Darin Dimitrov May 15 '12 at 14:23
  • Thanks for your help. Once I changed to strongly typed collections it worked – ps__ May 15 '12 at 14:56