jquery - 在 Core MVC ASP.NET 上使用 ajax jquery 基于另一个 dropdwonlis 更改下拉列表的值

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>

标签： jqueryajaxasp.net-mvcasp.net-core

Answer 1

so I do That but not worked for me :so my code in below:

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;

on controller I Have Action:

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

it's not worked ? thanks in advance