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

【问题标题】：How can I execute an action with onchange in Net Core 5?如何在 Net Core 5 中使用 onchange 执行操作？
【发布时间】：2021-09-02 20:41:14
【问题描述】：

我的视图中有下一个：

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

我有一个返回多个 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;
        }

我想根据用户的选择创建另一个带有选项的选择菜单（即当用户选择时在 area1 中显示操作）我的第一个方法是有这样的东西：

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

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

【问题讨论】：

如果我理解正确，你应该看看这个 QA stackoverflow.com/questions/22955839/… 它解释了如何使用 jquery 在 aspx.cs 中填充下拉列表调用 ac# 方法，或者这个更专注于 MVC：stackoverflow.com/questions/14339089/…

标签： c# asp.net-core model-view-controller controller .net-5

【解决方案1】：

您可以使用 ajax 获取第二个 DropDown 值，然后设置第二个 DropDown 的 html。这是一个工作演示：

动作

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


}

结果：

【讨论】：