在 Core MVC ASP.NET 中使用 ajax jquery 根据另一个下拉列表更改下拉列表的值

Question

<div class="form-group">
    @Html.DropDownList("ddlCentre", ViewBag.Centre_Commercial as List<SelectListItem>,
                       " -- Sélectionnez Centre Commercial --", new { @class = "form-control" })
    <br />
    @Html.DropDownList("ddlLocal", new List<SelectListItem>(),
                       " -- Sélectionnez Local --", new { @class = "form-control" })

</div>

我有中心列表和本地列表：我想要的是当我选择除本地 DropDownListFor 本地之外的任何中心下拉列表时必须更改。 控制器动作：

[HttpPost]
        public JsonResult GetLocalsList(int id)
        {
            List<Local> lstLocal= new List<Local>();
            lstLocal = objLocal.GetLocalsData(id).ToList();
            return Json(lstLocal);

        }

并查看：

<div class="form-group">
    @Html.DropDownList("ddlCentre", ViewBag.Centre_Commercial as List<SelectListItem>,
                       " -- Sélectionnez Centre Commercial --", new { @class = "form-control" })
    <br />
    @Html.DropDownList("ddlLocal", new List<SelectListItem>(),
                       " -- Sélectionnez Local --", new { @class = "form-control" })

</div>
<script>
    $(document).ready(function () {
        var data = $(this).val();
        $.ajax({
            url: "@Url.Action("GetLocalsList")",
            type: "POST",
            contentType: 'application/x-www-form-urlencoded',
            data: data,
            dataType: "json",
            success: function (data) {
                console.log(data);
            $.each(data, function (index, row) {
                        $("#ddlLocal").append("<option value='" + row.id + "'>" + row.id + "</option>")
                    });
                   },
            error: function (req, status, error) {
                alert(error);
            }
        });
    });
    </script>

Answer 1

所以我这样做但对我不起作用：所以我的代码如下：

public IEnumerable<Local> GetLocalsData(int id)
        {
             List<Local> lstLocals = new List<Local>();
            using (SqlConnection con = new SqlConnection("Server=DSER\\SQLEXPRESS;database=databaseST;integrated security=yes"))
           {

                SqlCommand cmd = new SqlCommand("spGetLocal", con);
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@id",id);
                con.Open();
                SqlDataReader dr = cmd.ExecuteReader();
                while (dr.Read())
                {
                    Local loc = new Local();
                    loc.Id_local = Convert.ToInt32(dr[0]);
                    loc.metrage = Convert.ToInt32(dr[1].ToString());
                    loc.Prix_vente=Convert.ToInt32(dr[2].ToString());
                    loc.NumAct = Convert.ToInt32(dr[3].ToString());
                    loc.Num_Centre = Convert.ToInt32(dr[4].ToString());
                    loc.Type_local = dr[5].ToString();
                    lstLocals.Add(loc);

                }

            }

            return lstLocals;

在控制器上我有行动：

[HttpPost]
        public JsonResult GetLocalsList(int id)
        {
            List<Local> lstLocal= new List<Local>();
            lstLocal = objLocal.GetLocalsData(id).ToList();

            return Json(lstLocal);

        }

        and on the view:
<script>
        $("#ddlCentre").change(function () {
            $("#ddlLocal").empty().append('<option>-- Sélectionnez Local --</option>');
            var id = $(this).val();
            if (id != "")
        $.ajax({
            url: "@Url.Action("GetLocalsList")",
            type: "POST",
            data: 'Num_Centre=' + id,
            contentType: 'application/json',
            // data:"id_local="+id,
            dataType: "json",
            success: function (data) {
                var json = $.parseJSON(data); // create an object with the key of the array
                alert(json.html); 
                console.log(data);
            $.each(data, function (index, row) {
                        $("#ddlLocal").append("<option value='" + row.id + "'>" + row.id + "</option>")
                    });
                   },
            error: function (req, status, error) {
                alert(error);
            }
        });
    });
    </script>

没用？ 在此先感谢

Answer 2

如果你想根据另一个dropdwonlis来改变dropdownlist的值，你可以使用方法$(“”).change，如果你想通过ajax将数据传递给控制器​​，你可以喜欢下面的代码：

<div class="form-group">
    @Html.DropDownList("ddlCentre", ViewBag.Centre_Commercial as List<SelectListItem>,
                       " -- Sélectionnez Centre Commercial --", new { @class = "form-control" })
    <br />
    @Html.DropDownList("ddlLocal", new List<SelectListItem>(),
                       " -- Sélectionnez Local --", new { @class = "form-control" })

</div>
@section scripts{
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript">
        $("#ddlCentre").change(function () {
            $("#ddlLocal").empty().append('<option>-- Sélectionnez Local --</option>');
            var id = $(this).val();
            if (id != "") {
                $.ajax({
                url: "@Url.Action("GetLocalsList")",
                type: "POST",
                contentType: 'application/x-www-form-urlencoded',
                data: { 'id': id },
            dataType: "json",
            success: function (data) {
                console.log(data);
            $.each(data, function (index, row) {
                        $("#ddlLocal").append("<option value='" + row.id + "'>" + row.name + "</option>")
                    });
                   },
            error: function (req, status, error) {
                alert(error);
            }
        });
            }

        })
    </script>
}

这是我的控制器：

public static List<Local> Locals = new List<Local> { new Local { Id = "1", Name = "Local1", CenterId = "1" }, new Local { Id = "2", Name = "Local2", CenterId = "2" } };
    public static List<Center> Centers = new List<Center> { new Center { Id = "1", Name = "Center1" }, new Center { Id = "2", Name = "Center2" } };
    public IActionResult Index()
    {
        return View();
    }
    [HttpPost]
    public JsonResult GetLocalsList(int id)
    {

        List<Local> lstLocal = new List<Local>();
        lstLocal = Locals.Where(l =>l.CenterId==id.ToString()).ToList();
        return Json(lstLocal);

    }
    [HttpGet]
    public IActionResult GetLocalsList()
    {
        List<SelectListItem> lstLocal = new List<SelectListItem>();
        foreach (Center center in Centers) {
            lstLocal.Add(new SelectListItem { Value = center.Id, Text = center.Name });
        }
        ViewBag.ddlCentre = lstLocal;

        return View();

    }