Asp.net core mvc view Razor issue with return result on cascading dropdownlist Ajax

Question

I have small projetc asp.net core mvc when i created view Razor with dropdownlist cascading i used Jquer Ajax to get the result of first dropdownlist by call the action of controller i have nothing on the second dropdownlist i test the action of the controller I Get JsonResult: result such as

[{"id_local":1,"metrage":150.0,"prix_vente":950000.0,"numAct":1,"activite":null,"type_local":"Commerce","num_Centre":1,"centre_Commercial":null},{"id_local":4,"metrage":190.0,"prix_vente":850000.0,"numAct":1,"activite":null,"type_local":"Commerce","num_Centre":1,"centre_Commercial":null}]

view Razor in below my code:

@{
    ViewBag.Title =
        "Vue  Razor ";
}
<script src="~/lib/jquery/dist/jquery.js"></script>
<h2>Controle_WCS</h2>
<div class="row">
    <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>
</div>
@section scripts {





    <script>
        $(document).ready(function () {
        $("#ddlCentre").change(function () {
            //$("#ddlLocal").empty().append('<option>-- Sélectionnez Local --</option>');
            var id = $(this).val();
            alert('ID'+id); 
            if (id != "")
        $.ajax({
            url:"@Url.Action("GetLocalsList")",
            type:"POST",
            data:'Num_Centre='+id,
            cache: false,
            contentType: "application/json;charset=utf-8",
            // data:"id_local="+id,
            dataType:"json",
            success:function (data) {
                var json = $.parseJSON(data); // create an object with the key of the array
                alert(json); 
                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>


    }

Action Controller:

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

            return Json(lstLocal);

        }

Thanks in advance

Answer 1

Your GetLocalsList method is GET. So in the AJAX request, you have to change type to GET. The input parameter of GetLocalsList method is 'id', so you will have to change the data to 'id='+id. And when you are appending JSON result to ddlCentre, you are using row.id but your JsonResult seems to be id_local.

I made those changes to the AJAX request and tried a sample project. It is working for me.

$.ajax({
            url:"@Url.Action("GetLocalsList")",
            type:"GET",
            data:'id='+id,
            cache: false,
            contentType: "application/json;charset=utf-8",
            // data:"id_local="+id,
            dataType:"json",
            success:function (data) {
                console.log(data);
            $.each(data, function (index, row) {
                $("#ddlLocal").append("<option value='" + row.id_local + "'>" + row.id_local + "</option>")
            });
            },
            error: function (req, status, error) {
                alert(error);
            }
        });