Question

我觉得自己总是在寻求帮助，但我想这就是这里的意思。 C＃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>
}

这是jquery代码

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

我想要填充的是预定义列表。这只是课程列表

的一个示例

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

这是图片/ GetBreed，我认为这是我正在努力的一点点。我不确定返回数据的正确方法。 我该怎么做？？这是否正确？

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

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

感谢您的帮助！

Answer 1

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

<强>的Javascript

您可以通过以下方式获取所选动物类型：

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

您可以使用getJson方法，如下所示，请注意您也可以使用Url.Action填充网址，即@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
                         }));

   });

为了解释上面发生的事情，json对象作为参数传递，即{ animalType: animalType }。

清空级联菜单，从控制器返回的json数据循环，为选择列表添加一个选项。

<强>模型

以上假设使用Id和名称创建新模型，即

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

<强>控制器

然后更改控制器操作以返回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);
}

GetDogList和GetCatList只需要返回一个品种列表，即

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

使用Jquery填充子菜单

1 个答案: