Ajax請求不適用於級聯的下拉值更改

Question

嗨，我有一個層疊的下拉列表，並且它有變化，我需要通過從數據庫中獲取它的值來填充另一個字段。

不幸的是，當我嘗試填充下拉列表時，我的ajax始終會響應錯誤500。我不知道它有什么問題。

我正在使用本教程作為指導。

這是我的Javascript

<script>
$(function () {
    $('#selectedExperience_ExpertiseID').change(function () {
        var selectedExpertise = $('#selectedExperience_ExpertiseID :selected').val();
        selectedExpertise = selectedExpertise == "" ? 0 : selectedExpertise;
        //When select 'optionLabel' we need to reset it to default as well. So not need
        //travel back to server.
        if (selectedExpertise == "") {
            $('#selectedExperience_FunctionID').empty();
            $('#selectedExperience_FunctionID').append('<option value="">--Select a language--</option>');
            return;
        }

        //This is where the dropdownlist cascading main function
        $.ajax({
            type: "GET",
            url: "GetFunctionByID", //Your Action name in the DropDownListConstroller.cs
            async: false,
            data: { selectedExpertise: selectedExpertise },  //Parameter in this function, Is cast sensitive and also type must be string
            contentType: "application/json; charset=utf-8",
            dataType: "json"

        }).done(function (data) {
            //When succeed get data from server construct the dropdownlist here.
            if (data != null) {

                $('#selectedExperience_FunctionID').empty();
                $.each(data.function, function (index, data) {
                    $('#selectedExperience_FunctionID').append('<option value="' + data.Value + '">' + data.Text + '</option>');
                });
            }
        }).fail(function (response) {
            if (response.status != 0) {
                alert(response.status + " " + response.statusText);
            }
        });
    });
});
</script>

這是我的HTML

<div class="form-group">
        @Html.LabelFor(model => model.selectedExperience.ExpertiseID, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.selectedExperience.ExpertiseID, Model.expertise, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.selectedExperience.ExpertiseID, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.selectedExperience.FunctionID, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(model => model.selectedExperience.FunctionID, Model.function, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.selectedExperience.FunctionID, "", new { @class = "text-danger" })
        </div>
    </div>

請幫我。 我在此功能中停留了4天。

為我指明正確的方向。

謝謝！

Answer 1

我認為您的Ajax不會因此發送任何數據

數據：{selectedExpertise：selectedExpertise}將其更改為數據：{''selectedExpertise'：selectedExpertise}我認為對象名稱應加引號

Answer 2

首先，給兩個下拉列表都提供id，我沒有找到selectedExperience_ExpertiseID並檢查$ .each函數結果。此外，我修改了html的位。 請嘗試此代碼。 希望您的方法GetFunctionByID運行良好。 我有根據我的參考數據庫表和其列。

 <script type="text/javascript"> $(function () { $('#selectedExperience_ExpertiseID').change(function () { var selectedExpertise = $('#selectedExperience_ExpertiseID :selected').val(); selectedExpertise = selectedExpertise == "" ? 0 : selectedExpertise; //When select 'optionLabel' we need to reset it to default as well. So not need //travel back to server. if (selectedExpertise == "") { $('#selectedExperience_FunctionID').empty(); $('#selectedExperience_FunctionID').append('<option value="">--Select a language--</option>'); return; } //This is where the dropdownlist cascading main function $.ajax({ type: "GET", url: "/DropDownList/GetFunctionByID", //Your Action name in the DropDownListConstroller.cs async: false, data: { stateId: selectedExpertise }, //Parameter in this function, Is cast sensitive and also type must be string contentType: "application/json; charset=utf-8", dataType: "json" }).done(function (data) { //When succeed get data from server construct the dropdownlist here. if (data != null) { $('#selectedExperience_FunctionID').empty(); $.each(data, function (key, val) { $('#selectedExperience_FunctionID').append('<option value="' + val.value + '">' + val.Text + '</option>'); }); } }).fail(function (response) { if (response.status != 0) { alert(response.status + " " + response.statusText); } }); }); }); </script> 

 @model WebApplication6.Models.StudentModel @{ ViewBag.Title = "Index"; } <script src="~/Scripts/jquery-1.10.2.min.js"></script> <div class="form-group"> @Html.Label("Expertise", htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.DropDownListFor(model => model.StateNames, Model.StateNames, new { @class = "form-control", @id = "selectedExperience_ExpertiseID" }) @Html.ValidationMessageFor(model => model.StateNames, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.Label("Function", htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.DropDownListFor(model => model.DistrictNames, new List<SelectListItem>(), new { @class = "form-control", @id = "selectedExperience_FunctionID" }) @Html.ValidationMessageFor(model => model.DistrictNames, "", new { @class = "text-danger" }) </div> </div>