c# - $.Ajax not work -

maybe simple question 2 day worked on it. work me in view, not work me want show second dropdownlist change of first not work how can resolve that

i use chrome inspect show , use debug mode , breakpoints , debugger didn't go control

@section scripts { @scripts.render("~/bundles/jqueryval") <script>      $(document).ready(function() {         $(document).on("change","#provinceid",function() {             var pid = this.value;             $.ajax({                   type: "post",                 url:'@url.action("returncity", "account")',                 datatype:"json",                 data:{provinceid:pid},                 contenttype:'application/json; charset=utf-8',                   success: function(data) {                     $('#cityid').empty();                     $.each(data,                         function (index, item) {                             $('#cityid').append($('<option></option>').text(item.name).val(item.id));                          });                 }, error: function (data)                 { alert(data) }              });         });         });  </script> }   

and control

 public actionresult register()     {         //return partialview("_login");         viewbag.provinceid = new selectlist(_db.provinces, "id", "name");         viewbag.cityid = new selectlist(_db.cities, "id", "name",_db.cities.where(x => x.provinceid == 1));          return view("");     }      //     // post: /account/register     [httppost]     [allowanonymous]     [validateantiforgerytoken]     public async task<actionresult> register(registerviewmodel model)     {         if (modelstate.isvalid)         {             var user = new applicationuser { username = model.email, email = model.email,countryid = 55,provinceid = model.provinceid,cityid = model.cityid};             var result = await usermanager.createasync(user, model.password);             if (result.succeeded)             {                 migrateshoppingcart(model.email);                 await signinmanager.signinasync(user, ispersistent: false, rememberbrowser: false);                  // more information on how enable account confirmation , password reset please visit https://go.microsoft.com/fwlink/?linkid=320771                 // send email link                 string code = await usermanager.generateemailconfirmationtokenasync(user.id);                 var callbackurl = url.action("confirmemail", "account", new { userid = user.id, code = code }, protocol: request.url.scheme);                 await usermanager.sendemailasync(user.id, "" + callbackurl + "\">link</a>");                  // uncomment debug locally                  // tempdata["viewbaglink"] = callbackurl;                  viewbag.message = "";                  return view("info");                 //return redirecttoaction("index", "home");             }             adderrors(result);         }          // if got far, failed, redisplay form         return view(model);     } 

for return city code in control

[httppost]     public jsonresult returncity(int provinceid)     {         _db.configuration.proxycreationenabled = false;         var data = _db.cities.where(x => x.provinceid == provinceid);         return json(data.tolist(), jsonrequestbehavior.allowget);     } 

in view use show 2 related dropdownlist

<div class="form-group">                             @html.labelfor(model => model.provinceid, "استان", htmlattributes: new { @class = "control-label col-md-4" })                             <div class="col-md-8">                                 @*@html.dropdownlistfor(model=>model.provinceid, (selectlist)viewbag.provinceid, "select", new { htmlattributes = new { @class = "form-control" }})*@                                 @html.dropdownlist("provinceid", "select")                                 @html.validationmessagefor(model => model.provinceid, "", new { @class = "text-danger" })                             </div>                         </div>                          <div class="form-group">                             @html.labelfor(model => model.cityid,"city", htmlattributes: new { @class = "control-label col-md-4" })                             <div class="col-md-8">                                 @*@html.dropdownlistfor(model => model.cityid, (selectlist)viewbag.cityid, "select", new { htmlattributes = new { @class = "form-control" } })*@                                 @html.dropdownlist("cityid", "select")                                 @html.validationmessagefor(model => model.cityid, "", new { @class = "text-danger" })                             </div>                         </div> 

i see few issues code. first, in ajax call, specify contenttype contenttype:'application/json; charset=utf-8',. trying send javascript object in data property. jquery send content-type:application/json; charset=utf-8 in request header , provinceid=1 request payload in request body. server code uses contenttype header determine how deserialize , model bind posted form data/request body parameter of action method. specify content type json when send stringified json version of javascript object. model binder able map method param (a view model object matching structure of js object)

since method parameter simple int, not need specify contenttype application/json. remove line , hit action method in server . can remove datatype param well.

this should work long not have other script error in page(check browser console).

$(document).ready(function() {     $(document).on("change","#provinceid",function() {         var pid = this.value;         $.ajax({               type: "post",             url:'@url.action("returncity", "account")',             data:{provinceid:pid},             success: function(data) {                 $('#cityid').empty();                 $.each(data,                     function (index, item) {                         $('#cityid').append($('<option></option>')                                         .text(item.name).val(item.id));                     });             }, error: function (data)             { alert(data) }          });     }); }); 

also since want user select city based on selected province, there no need load cities. can render select element using vanilla html id , name set cityid

see this post sample cascading dropdown code.