カスケードドロップダウン値の変更でAjaxリクエストが機能しない

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} データに 変更を 私はそこにすべきだと思います私はselectedExperience_ExpertiseIDを見つけて、$ .each関数の結果をチェックしdidntは、両方のdropdownlistsにIDを与え、

Answer 2

まずオブジェクト名の前後に引用符を可能 また、私は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>