$ .Ajaxは動作しません

Question

多分それは簡単な質問でしたが、2日私はそれに取り組んだ。 それは別のビューに私のための仕事だったが、今私が欲しい が最初の変更により、第2のドロップダウンリストを表示しますが動作しない私のために動作しませんどのように私はクロムを使用

が を表示し、デバッグモードを使用することを検査することを解決することができ、これはコントロール

のコードでのブレークポイントは、デバッガは

@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> 
} 

を制御するために行かなかったし、私のコントロールが戻り都市の

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); 

       // For more information on how to enable account confirmation and password reset please visit https://go.microsoft.com/fwlink/?LinkID=320771 
       // Send an email with this 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 to debug locally 
       // TempData["ViewBagLink"] = callbackUrl; 

       ViewBag.Message = ""; 

       return View("Info"); 
       //return RedirectToAction("Index", "Home"); 
      } 
      AddErrors(result); 
     } 

     // If we got this far, something failed, redisplay form 
     return View(model); 
    } 

です私はショーのための2つの関連するドロップダウンリストをこれを使用するビューの

[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); 
    } 

<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> 

Answer 1

私はあなたのコードを持ついくつかの問題を参照してください。まず、あなたのajax呼び出しで、contentType contentType:'application/json; charset=utf-8',を指定します。しかし、あなたはdataプロパティでjavascriptオブジェクトを送信しようとしています。したがって、jQueryは要求ヘッダーにContent-Type:application/json; charset=UTF-8を、要求本体には要求ペイロードとしてprovinceId=1を送信します。サーバーコードはcontentTypeヘッダーを使用して、ポストされたフォームデータ/要求本文をアクションメソッドのパラメーターにバインド解除およびモデルバインドする方法を決定します。文字列化されたjsonバージョンのjavascriptオブジェクトを送信するときは、通常、コンテンツタイプをjsonとして指定します。 Modelバインダーは、これをメソッドparam（jsオブジェクトの構造と一致するビューモデルオブジェクト）にマップできます。

メソッドパラメーターは単純なintなので、アプリケーションとしてcontenttypeを指定する必要はありません/ json。その行を削除するだけで、サーバーのアクションメソッドにヒットします。また、データ型のparamも削除できます。

これは、ページに他のスクリプトエラー（ブラウザコンソールを確認）がない限り有効です。あなたは、ユーザーが選択した地域に基づいて都市を選択したいので、

$(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) } 
     }); 
    }); 
}); 

はまた、すべての都市をロードする必要はありません。あなたは、単にいくつかのサンプルカスケードドロップダウンコードのthis記事を参照してくださいCityId

にIdとNameセットでバニラのHTMLを使用してselect要素をレンダリングすることができます。

Answer 2

コードを次のように変更します。

スクリプト

@section Scripts { 
<script> 
$(document).on("change","#ProvinceId",function() { 
var pid = this.value; 
    $.ajax({ 
    url: '/Account/ReturnCity', 
    type: "POST", 
    dataType: "JSON", 
    data: { provinceId: pid }, 
    success: function (data) {      
     $("#CityId").html(""); // clear before appending new list 
     $.each(cities, function (i, city) { 
      $("#CityId").append(
       $('<option></option>').val(city.CityId).html(city.CityName)); 
     }); 
    } 
    }); 
)} 
</script> 
} 

コントローラ

public ActionResult ReturnCity(int provinceId) 
{ 
    _db.Configuration.ProxyCreationEnabled = false; 
    var data = _db.Cities.Where(x => x.ProvinceId == provinceId); 
    return Json(data , JsonRequestBehavior.AllowGet); 
}