使用在

Question

任务非常基本：我必须创建2个下拉列表，首先是汽车品牌，第二个是其模型，例如“Opel” - ＆gt; “阿斯特拉”。应根据第1个选项中选择的选项填充第二个下拉列表。 我想将ViewModel提供给我的View，而不是ViewBag。

我搜索了各种类似的主题，借用了一些代码，仍然无法使其正常工作。

型号：

public class CarBrand
{
    public byte Id { get; set; }
    [Display(Name = "Car Brand Name")]
    public string Name { get; set; }
}
public class CarModel
{
    public byte Id { get; set; }
    [Display(Name = "Car Model Name")]
    public string Name { get; set; }
    public byte CarBrandId { get; set; }
}

视图模型：

public class CarsViewModel
{
    public IEnumerable<CarBrand> BrandList { get; set; }
    public CarBrand CarBrands { get; set; }
    public IEnumerable<CarModel> ModelList { get; set; }
    public CarModel CarModels { get; set; }
}

控制器

    public ActionResult Index()
    {
        var carBrands = GetCarBrands();
        var carModels = GetCarModelsOpel();
        var viewModel = new CarsViewModel
        {
            BrandList = carBrands,
            ModelList = carModels
        };

        return View(viewModel);
    }

    public JsonResult FetchModels(int brandId)
    {
        var carBrands = GetCarBrands();
        IEnumerable<CarModel> models = new List<CarModel>();
        switch (brandId)
        {
            case 1:
                models = GetCarModelsOpel();
                break;
            case 2:
                models = GetCarModelsVolksWagen();
                break;
            case 3:
                models = GetCarModelsBmw();
                break;
        }
        var viewModel = new CarsViewModel()
        {
            BrandList = carBrands,
            ModelList = models
        };
        return Json(viewModel, JsonRequestBehavior.AllowGet);
    }

查看

    @model CU.ViewModels.CarsViewModel
@using (Html.BeginForm("AddCar", "Cars"))
{
    <div class="form-group">
        @Html.LabelFor(m => m.CarBrands.Name)
        @Html.DropDownListFor(m => m.CarBrands.Id,
            new SelectList(Model.BrandList, "Id", "Name"), "Select Car Brand",
            new {id = "brand_dll", @class = "form-control"})
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.CarModels.Name)
        @Html.DropDownListFor(m => m.CarModels.Id,
            new SelectList(Model.ModelList, "Id", "Name"), "Select Car Model",
            new {id = "model_dll", @class = "form-control"})
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
}
@section scripts
{
    <script>
        var url = '@Url.Action("FetchModels", "Cars")';
        var models = $('#models_dll');
        $("#brand_dll").change(function() {
            var id = $(this).val();
            $.getJSON(url,
                { brandId: id },
                function(response) {
                    models.empty();
                    $.each(response,
                        function(index, item) {
                            models.append($('</option>').text(item));
                        });
                });
        });
    </script>

}

我没有收到任何错误或异常，但第二个下拉列表会保留从Index Action Method收到的信息，无论第一个选择的是什么。

我还在学习。任何帮助，将不胜感激。 感谢。

Answer 1

我认为您遇到的问题是由于您只附加了关闭选项标记而不是使用。

另一种方法是，我发现将控制器操作中的所有选项作为字符串返回并将其附加到选择html更容易，请参见下文：

 //POST: Quote/SubGroupByGroup
    [HttpPost]
    public ActionResult SubGroupByGroup(int _EquipmentGroupID)
    {
        string Options = "";
        DAL.GetEquipmentSubGroupsDropdown(_EquipmentGroupID).ForEach(delegate (EquipmentSubGroup SG)
        {
            Options += "<option value='" + SG.EquipmentGroupID + "'>" + SG.Code + "</option>";
        });

        return Content(Options);

    }

和JQuery方法

 $('#Equipment_EquipmentGroupID').change(function () {
        $.ajax({
            url: '@Url.Action("SubGroupByGroup", "Quote")',
            type: 'POST',
            data: { _EquipmentGroupID: $(this).val() },
            datatype: 'json',
            success: function (data) {
                $('#Equipment_EquipmentSubGroupID').html(data);
            }
        });
    })

我希望这会给你一些指导