Question

您好我有一个级联下拉列表，并且有更改我需要通过从数据库中获取它的值来填充另一个字段。

不幸的是，当我尝试填充下拉列表时，我的ajax总是响应错误500.我不知道它有什么问题。

我使用此tutorial作为我的向导。

这是我的 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>

Ajax请求不适用于级联下拉列表值更改

2 个答案: