Asp.net 核心 mvc 視圖 Razor 問題與級聯下拉列表 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:結果如

[{"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}]

在我的代碼下方查看 Razor：

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


    }

動作 Controller：

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

            return Json(lstLocal);

        }

提前致謝

Answer 1

您的 GetLocalsList 方法是 GET。 因此，在 AJAX 請求中，您必須將類型更改為 GET。 GetLocalsList 方法的輸入參數是 'id'，因此您必須將數據更改為 'id='+id。 當您將 JSON 結果附加到 ddlCentre 時，您使用的是 row.id，但您的 JsonResult 似乎是 id_local。

我對 AJAX 請求進行了這些更改，並嘗試了一個示例項目。 它對我有用。

$.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);
            }
        });