изменить значение раскрывающегося списка на основе другого dropdwonlis, используя ajax jquery на Core MVC ASP.NET

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>

У меня есть список центра и список локальных: то, что я хочу, это когда я выбираю Любой раскрывающийся список центра, кроме локального DropDownList, чтобы локальный должен был измениться. Действие контроллера:

[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, вы используете метод $ («»). 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();

    }