如何在 Net Core 5 中使用 onchange 执行操作？

Question

我的视图中有下一个：

                <select id="AreaSelect" class="custom-select" name="AreaClave">
                    @if (ViewBag.areasSelect != null)
                    {
                        <option value="NA" selected>ALL</option>
                        foreach (AreasCert areasItem in (List<AreasCert>)ViewBag.areasSelect)
                        {
                            <option value="@areasItem.AreaClave">@areasItem.AreaClave</option>
                        }
                    }
                </select>

我有一个 returns 多个 ViewBags 和一个包含信息的模型的操作：

        public ActionResult EmpOperaciones(CertsxOpxAreas certsxOpxAreas)
        {
            GetOpFromEmpleado(certsxOpxAreas);
            certsxOpxAreas.EmpidCoordinador = GetOpFromEmpleado(certsxOpxAreas)[1].EmpidCoordinador;

            ViewBag.areasSelect = AreaSelect();
            return View(certsxOpxAreas);
        }

        public List<AreasCert> AreaSelect()
        {
            SqlConnection con = (SqlConnection)_contextFRTFGRAL.Database.GetDbConnection();
            SqlCommand cmd = con.CreateCommand();
            List<AreasCert> areasSelect = new();

            // Realizamos una query para obtener todas las descripciones de las operaciones.
            con.Open();
            cmd.CommandText = "SELECT areaClave FROM cert.areasCerts " +
                "WHERE Activa = 1 " +
                "ORDER by areaClave ASC";
            using (SqlDataReader reader = cmd.ExecuteReader())
            {
                while (reader.Read())
                {
                    areasSelect.Add(new AreasCert
                    {
                        AreaClave = reader["areaClave"].ToString()
                    });
                }
            }
            con.Close();
            return areasSelect;
        }

我想创建另一个 select 菜单，其中包含基于用户 selection 的选项（即当用户 select 时显示区域 1 中的操作）我的第一个方法是这样的：

function AreasSelect() {
    d = document.getElementById("AreaSelect").value;
    window.location.href = "?Area=" + d;
}

并且在 select 项目上有一个 onchange 函数，但我认为这不是实现此目的的有效方法，有没有办法尽可能干净地做到这一点？

Answer 1

您可以使用 ajax 获取第二个 DropDown 值，然后设置第二个的 html DropDown.Here 是一个有效的演示：

操作

[HttpGet]
        public ActionResult EmpOperaciones()
        {
            ViewBag.areasSelect = AreaSelect();
            return View();
        }
        [HttpPost]
        public JsonResult EmpOperaciones(string Area)
        {
            
            return new JsonResult(new List<SelectListItem> { new SelectListItem {  Text="option1_"+Area,Value="option1"}, new SelectListItem { Text = "option2_" + Area, Value = "option2" }, new SelectListItem { Text = "option3_" + Area, Value = "option3" } });
        }

        public List<AreasCert> AreaSelect()
        {
            List<AreasCert> areasSelect = new List<AreasCert> { new AreasCert { AreaClave = "AreaClave1" }, new AreasCert { AreaClave = "AreaClave2" }, new AreasCert { AreaClave = "AreaClave3" } };

            
            return areasSelect;
        }

查看：

<select id="AreaSelect" class="custom-select" name="AreaClave" onchange="AreasSelect(this)">
    @if (ViewBag.areasSelect != null)
    {
        <option value="NA" selected>ALL</option>
        foreach (AreasCert areasItem in (List<AreasCert>)ViewBag.areasSelect)
        {
            <option value="@areasItem.AreaClave">@areasItem.AreaClave</option>
        }
    }
</select>
<select class="form-control" id="SecondDropDown" name="SecondDropDown">
    <option value="NA" selected>ALL</option>
</select>
@section scripts
{
    <script>
        function AreasSelect(t) {
            $.ajax({
                type: "POST",
                url: "",
                data: { "Area": $(t).val() },
                dataType:"json",
                success: function (data) {
                    var items = "<option value='NA'>ALL</option>";
                    $("#SecondDropDown").empty();
                    $.each(data, function (index, data) {
                        items += "<option value='" + data.value + "'>" + data.text + "</option>";
                    });
                    $('#SecondDropDown').html(items);
                },
                failure: function () {
                    alert("Failed!");
                }
            });
        }
    </script>


}

结果：

如何在 Net Core 5 中使用 onchange 执行操作？

How can I execute an action with onchange in Net Core 5?

c#

model-view-controller

controller

asp.net-core

.net-5