如何根据先前选择的选项加载 ViewBag

Question

我正在开发 MVC 应用程序。我在创建视图 (create.cshtml) 中的表单有问题。表单具有三个选择元素（下拉列表）。第一个由 ViewBag.RodzajePojazdow 填充，它在 Controller 的“Create”方法中加载。

public IActionResult Create()
{
    ViewBag.RodzajePojazdow =
        (
            from rodzaj in _context.RodzajPojazdu
            orderby rodzaj.IdRodzaju
            select rodzaj
        ).ToList();
        ViewBag.MarkiSamochodow =
            (
                from markaSam in _context.MarkaSamochodu
                orderby markaSam.IdMarki
                select markaSam
            ).ToList();
        ViewBag.MarkiMotocykli =
            (
                from markaMot in _context.MarkaMotocykla
                orderby markaMot.IdMarki
                select markaMot
            ).ToList();

第二个选择元素（第二个下拉列表）中的选项应该根据第一个下拉列表中选择的选项来加载。 'ViewBag.MarkiSamochodow' 的内容应该加载到第二个选择元素（第二个下拉菜单）中，只有在第一个选择元素中（例如）选择了一个选项。如果在第一个选择元素中选择了 B 选项，则第二个选择元素（第二个下拉菜单）应由“ViewBag.MarkiMotocykli”的内容填充。

我在 CreateMethod 中使用 Json 来序列化我的 ViewBags

    string jsonMot = JsonConvert.SerializeObject(ViewBag.MarkiMotocykli);
    string jsonSam = JsonConvert.SerializeObject(ViewBag.MarkiSamochodow);
    ViewBag.jsonMarkiMotocykli = jsonMot;
    ViewBag.jsonMarkiSamochodow = jsonSam;

这是我的 HTML 表单的一部分：

    <div class="form-group">
        <label asp-for="IdRodzaju" class="control-label" for="wybierzRodzaj">Wybierz rodzaj pojazdu</label>
        <select asp-for="IdRodzaju" class="form-control" id="wybierzRodzaj" onchange="uzupelnijMarki()">
            @{
                foreach (var item in ViewBag.RodzajePojazdow)
                {
                    <option value="@item.IdRodzaju">@item.NazwaRodzaju</option>
                }
            }
        </select>
        @*<input asp-for="IdRodzaju" class="form-control" />*@
        <span asp-validation-for="IdRodzaju" class="text-danger"></span>
    </div>
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="MarkaPojazdu" class="control-label" for="wybierzMarke">Wybierz markę</label>
        <select asp-for="MarkaPojazdu" class="form-control" id="wybierzMarke">
            @*@{
                   --- If A option was choosen in previous select element do this:

                        foreach (var item in ViewBag.MarkiSamochodow)
                        {
                            <option value="@item.IdMarki">@item.NazwaMarki</option>
                        }
                   ---  If B option was choosen in previous select element do this: 

                        foreach (var item in ViewBag.MarkiMotocykli)
                        {
                            <option value="@item.IdMarki">@item.NazwaMarki</option>
                        }
                    }*@
        </select>

然后在 JS 中我尝试将 ViewBag 内容加载到第二个下拉列表中，但是 JSON.parse() 方法在此处无法正常工作

<script>
    function uzupelnijMarki() {
        var markiSamochodow = [];
        var markiMotocykli = [];
        var jsonMotocykle = '@ViewBag.jsonMarkiMotocykli';
        var jsonSamochody = '@ViewBag.jsonMarkiSamochodow';
        var markiSamochodow = JSON.parse(jsonSamochody);
        var markiMotocykli = JSON.parse(jsonMotocykle);

        var rodzaj = document.getElementById("wybierzRodzaj");
        //var markisel = document.getElementById("wybierzMarke");
        var seltype = rodzaj.options[rodzaj.selectedIndex].value;
        alert(' napis');
        if (seltype == 1) {
            $("#wybierzMarke").empty();
            markiSamochodow.forEach(function (obj) {
                $('#wybierzMarke').append($('<option></option>').val(obj.NazwaMarki).html(obj.IdMarki))
                });
        }
        if (seltype == 2) {
            $("#wybierzMarke").empty();
            markiMotocykli.forEach(function (obj) {
                $('#wybierzMarke').append($('<option></option>').val(obj.NazwaMarki).html(obj.IdMarki))
            });
        }
    }
</script>

是否有任何更简单的方法可以根据先前选择的选项填充第二个下拉列表？

谢谢，

Answer 1

按照以下步骤：

1. 第一个下拉列表由 ViewBag.RodzajePojazdow 填充，您做得很好。

2. 现在，通过 jquery/javascript 拦截 First dropwdown 的更改事件并进行 ajax 调用以调用控制器方法并将 First dropdown 选择的值传递给控制器​​方法方法，如下所示：

在第一个下拉菜单的更改事件上调用 javacript 函数

 onChange="PopulateSecondDropdown(this.options[this.selectedIndex].value);"

用于对 Controller/PopulateSecondDropdown 操作进行 ajax 调用的 Javascript 函数：

    function PopulateSecondDropdown(firstdropdwonvalue) {
        $.ajax({
            type: 'get',
            dataType: 'json',
            cache: false,
            url: '/Controller/PopulateSecondDropdown',
            data: { 'firstdropdwonvalue': firstdropdwonvalue },
            success: function (response) {
                if (response.length == 0) {
                    alert("no data found.");
                }
                else {                    
                    $.each(response, function (index, value) {
                        // bind second dropdwon with result here 
                    });
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
};

1. 控制器方法应该是这样的。我不确定 linq 是如何工作的，请验证一次 linq 查询：

   [HttpGet]
   public JsonResult PopulateSecondDropdown (string firstdropdwonvalue)
   {   
      // Use firstdropdwonvalue value to select list for second dropdown   
       return Json((
           from markaSam in _context.MarkaSamochodu
           orderby markaSam.IdMarki
           select markaSam
       ).ToList(), JsonRequestBehavior.AllowGet);
   }