Cascading Dropdown-Liste mit jquery Ajax in asp.net mvc

Question

Ich bin nur ein Anfänger mit MVC und JQuery. Ich versuche, eine einfache kaskadierende Dropdown-Liste mit Land, Staat und Stadt als drei Dropdown-Listen zu erstellen. Ich habe einen JQuery Ajax als ein Skript verwendet, um Drop-Change-Ereignis zu behandeln.

Code eingeben hier

Länder Belastung von Datenbank normal und korrekt an in Drop-Down-laden, aber Städte selbst nicht geladen ich viel ausgetestet haben, aber nicht Lösung finden konnten.

Kann mir jemand dabei helfen.

Im Folgenden sind die im Steuerteil definierten Funktionen

public JsonResult GetCityByStateId(int stateId) 
     { 
      using (MyDbContext db = new MyDbContext()) 
      { 
       List<tblCity> lstCities = new List<tblCity>(); 
       lstCities = db.tblCities.Where(x => x.StateId == stateId).ToList(); 


       var lstToReturn = lstCities.Select(s => new { id = s.Id, Name = s.Name }); 
       return Json(lstToReturn, JsonRequestBehavior.AllowGet); 

      } 
     } 


    public JsonResult GetStatesByCountryId(int countryId) 
     { 
      using (MyDbContext db = new MyDbContext()) 
      { 
       List<tblState> lstStates = new List<tblState>(); 
       lstStates = db.tblStates.Where(x => x.CountryId == countryId).ToList(); 

       var lstToReturn = lstStates.Select(s => new { id = s.Id, Name = s.Name }); 
       return Json(lstToReturn, JsonRequestBehavior.AllowGet); 


      } 
     } 

Hier ist meine Ansicht

<div class="row"> 
         <div class="col-sm-12 col-md-6"> 

          <div class="form-group" style="margin-left:10px;"> 
           <label>Country</label> 
           <select id="CountryId" name="CountryId" required class="form-control show-tick"> 
            <option value="-1">Select Country</option> 
            @if (lstCountry.Count > 0 && lstCountry != null) 
            { 
             foreach (var item in lstCountry) 
             { 
              <option value="@item.Id">@item.Name</option> 
             } 
            } 
           </select> 

          </div> 

         </div> 

         <div class="col-sm-12 col-md-6"> 

          <div class="form-group" style="margin-right:10px;"> 
           <label>Province</label> 
           <select id="SateId" required name="SateId" class="form-control"></select> 
          </div> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-12 col-md-6"> 

          <div class="form-group" style="margin-left:10px;"> 
           <label>City</label> 
           <select id="CityId" name="CityId" class="form-control" required></select> 
          </div> 
         </div> 
        </div> 

Und unten, dass mein Skript ist

$(document).ready(function() { 

    var ddlcountries = $('#CountryId'); 
    var ddlstates = $('#SateId'); 
    var ddlCities = $('#CityId'); 

    var txtConfirmPassword = $('#ConfirmPassword'); 
    var txtPassword = $('#Password'); 

    txtConfirmPassword.change(function() { 
     if (!(txtPassword.val() == txtConfirmPassword.val())) { 
      $('#lblPassword').text('Password & Confirm password does not match'); 
      $('#lblPassword').css('color', 'red'); 
     } 
    }) 

    ddlcountries.change(function() { 
     if ($(this).val() == '-1') { 
      ddlstates.empty(); 
      ddlCities.empty(); 
      ddlstates.append($('<option/>', { value: -1, text: 'Select States' })); 
      ddlCities.append($('<option/>', { value: -1, text: 'Select City' })); 
      ddlcountries.val('-1'); 
      ddlstates.val('-1'); 
      ddlCities.val('-1'); 
      ddlstates.prop('disabled', true); 
      ddlCities.prop('disabled', true); 

     } 
     else { 
      alert(ddlcountries.val()); 
      $.ajax({ 
       url: '/Employer/GetStatesByCountryId', 
       method: 'post', 
       data: { countryId: $(this).val() }, 
       dataType: 'json', 
       success: function (data) { 
        ddlstates.empty(); 
        ddlstates.append($('<option/>', { value: -1, text: 'Select States' })) 
        ddlstates.prop('disabled', false); 
        $(data).each(function (index, item) { 
         ddlstates.append($('<option/>', { value: item.Id, text: item.Name })) 
        }) 
       } 
      }); 

     } 
    }) 

    ddlstates.change(function() { 
     if ($(this).val() == '-1') { 
      alert(ddlstates.val()); 
      ddlCities.empty(); 
      ddlCities.append($('<option/>', { value: -1, text: 'Select City' })); 
      ddlCities.val('-1'); 
      ddlCities.prop('disabled', true); 

     } 
     else { 
      alert(ddlstates.val()); 
      $.ajax({ 
       url: '/Employer/GetCityByStateId', 
       method: 'post', 
       data: { stateId: $(this).val() }, 
       dataType: 'json', 
       success: function (data) { 
        ddlCities.empty(); 
        ddlCities.append($('<option/>', { value: -1, text: 'Select City' })) 
        $(data).each(function (index, item) { 
         ddlCities.append($('<option/>', { value: item.Id, text: item.Name })) 
        }) 
        ddlCities.prop('disabled', false); 
        ddlCities.val('-1'); 
       }, 
       error: function (err) { 
        alert(err + ' ' + $(this).val()); 
       } 
      }); 

     } 
    }) 



}) 

Wenn ich mein Land Dropdown ändern und warnt seinen Wert es gibt mir den richtigen Wert, aber im selben Fall, wenn dies für Staaten Drop-Down-i Get Text (Staaten Namen) von Dropdown, so ist, wo ich falsch bin, aber bitte lösen Sie mein Problem im Voraus ..........

Answer 1

von Ihrem Kommentar darüber nicht feuern Ich rate Ihr Problem ist mit die URL von hier https://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.action(v=vs.118).aspx würde ich Sie

url: '/Employer/GetStatesByCountryId', 

zu

url: '@Url.Action("GetStatesByCountryId", "Employer")', 

ändern vorschlagen, die eine URL mit Ihrem Server-Standort an der Vorderseite hinzugefügt