Populating sub menu using Jquery

Question

I feel like a pain asking for help ALL the time but I guess that's what here is for. New to C# MVC and new to JQuery. I'm not entriely sure about the program flow of things when it comes to Jquery and MVC.

There really isn't that much on tutorials. This is what I want to happen. Select a type of animal (dog) and return list of breeds in sub menu.

@using(Html.BeginForm("", "Pictures", FormMethod.Get))
{
    Project1.Models.Animal animal = new Project1.Models.Animal();
    @:Filter Photos
    <span>
        Filter by animal
        @Html.DropDownList("animal", new List<SelectListItem> {
            new SelectListItem {Text="Select Animal", Value=""},
            new SelectListItem {Text="Dog", Value="dog"},
            new SelectListItem {Text="Cat", Value="cat"},
            })
    </span>

    //This is where I want jQuery to update the dropdownlist

    <span>
        Filter by breed
        @Html.DropDownList("breed", new SelectList(animal.DogBreeds), "Choose a breed")
    </span>

    //End of wanted dynamic jquery dropdownlist

    <span>
        <input type="submit" value="Filter" />
    </span>
}

Here is the jquery code

<script type="text/javascript">
    $(document).ready(function () {
        $("#animal").change(function () {
            var animalType = $("#animal option:selected").text();
            alert($("#animal option:selected").text());
            $.ajax({
                type: "POST",
                url: "Pictures/GetBreed",
                data: animal = animalType,
                success: function (data) {
                    $("#breed").html(data);
                }
            });
        });
    })
</script>

And what I want populating is a predefined list. This is just a sample of the list of course

public class Animal
{
    public List<string> DogBreeds = new List<string>()
    {
      "Affenpinscher","Afghan Hound","Airedale Terrier","Akita","Alapaha Blue Blood Bulldog",
       "Alaskan Malamute","American Bulldog","American Cocker Spaniel","Anatolian Shepherd",
       "Australian Cattle Dog","Australian Shepherd"
    };

public List<string> CatBreeds = new List<string>()
    {
       "Abyssinian","Aegean Cat","Australian Mist","American Curl"
    };
}

And here is Pictures/GetBreed, I think this is the bit i'm struggling with. I'm not sure of the correct way to return the data. What do I do!? IS this even the correct way?

    public ActionResult GetBreed()
    {
        string animal = Request["animal"];

        if (animal == "Dog")
            return dog list;
        elseif (animal == "Cat")
            return cat list;
        else
            return null;
    }

Thanks for any help!

Answer 1

MVC makes it very simply to pass json data between the client and your controller actions, you could take the following approach.

Javascript

You can get the selected animal type with the following:

var animalType = $('#animal').val()

You could use the getJson method as follows, please note you can also use Url.Action to populate the url i.e. @Url.Action("GetBreed"):

 $.getJSON("Pictures/GetBreed", { animalType: animalType }, function (animals) {

               // clear the select list                     
               var breedSelect = $('#breed');
               breedSelect.empty();

               $.each(animals, function (index, breed) {
                         breedSelect.append($('<option/>', {
                                  value: breed.Id,
                                  text: breed.Name
                         }));

   });

To explain what is happening in the above, a json object is passed as the argument i.e. { animalType: animalType }.

The cascading menu is emptied, the json data that is returned from the controller is looped adding an option to the select list.

Model

The above assumes a new model is created with an Id and a Name i.e.

public class Breed 
{
   public int Id { get; set;}
   public string Name { get; set; }
}

Controller

Then change your controller action to return json as follows:

public ActionResult GetBreed(string animalType)
{
    var breeds = new List<Breed>();

    if (animalType == "Dog")
        breeds = GetDogList();
    else if (animalType == "Cat")
        breeds = GetCatList();

    return Json(breeds, JsonRequestBehavior.AllowGet);
}

The GetDogList and GetCatList just need to return a list of the Breed objects i.e.

private List<Breed> GetDogList()
{
   var dogs = new List<Breed>();
   dogs.Add(new Breed { Id = 1, Name = "Collie" });
   ....
   return dogs;
}