C# 使用Jquery填充子菜单

我一直想寻求帮助，但我想这就是为什么。 对MVC和JQuery来说都是新的。当涉及到Jquery和MVC时，我不太确定程序的流程

关于教程的内容真的没有那么多。这就是我想要发生的。选择一种动物狗，并返回子菜单中的品种列表

@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>
}

---

谢谢你的帮助

MVC使得在客户端和控制器操作之间传递json数据变得非常简单，您可以采用以下方法

Javascript

您可以通过以下方式获得选定的动物类型：

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

您可以按如下方式使用getJson方法，请注意，您也可以使用Url.Action来填充Url，即@Url.ActionGetBreed：

控制器

然后更改控制器操作以返回json，如下所示：

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);
}

---

啊，这让我走上了正确的道路。我真的不知道从那里去哪里。我来试试，谢谢你花时间解释=

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

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

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

 $.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
                         }));

   });

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

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);
}

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