$ .ajax success：値は常に定義されていません

Question

javascript関数UpdateFields（）で 'c'オブジェクトのメンバーの値が常に '未定義'になるのはなぜですか？

コントローラーlistCitiesにjson returnをトラップすると、私は期待していた値を持っています。 listCitiesは戻り時に正しく設定されます。

CityModel.cs

namespace AutoCompleteInMVCJson.Models 
{ 
    public class CityModel 
    { 
     public int Id { get; set; } 
     public string City { get; set; } 
     public string State { get; set; } 
     public string Zip { get; set; } 
    } 
} 

HomeController.cs

namespace AutoCompleteInMVCJson.Controllers 
{ 
    public class HomeController : Controller 
    { 

     [HttpGet] 
     public ActionResult Index() 
     { 
      return View(); 
     } 

     [HttpPost] 
     public JsonResult Index(string s) 
     { 

      List<CityModel> cities = new List<CityModel>() 
      { 
       new CityModel {Id=1, City="Cincinnati", State="Ohio", Zip="c-oh" }, 
       new CityModel {Id=2, City="Miami", State="Florida", Zip="33114" }, 
       new CityModel {Id=3, City="Miami", State="Florida", Zip="33125" }, 
       new CityModel {Id=4, City="Atlanta", State="Georgia", Zip="a-ga" }, 
       new CityModel {Id=5, City="Chicago", State="Illinois", Zip="c-il"}, 
       new CityModel {Id=6, City="Seattle", State="Washington", Zip="s-wa"}, 
       new CityModel {Id=7, City="Culabra", State="Puerto Rico", Zip="c-pr" }, 
       new CityModel {Id=8, City="Key West", State="Flordia", Zip="kw-fl" } 
      }; 

      var listCities = (
        from c in cities 
        where c.City.ToUpper().Contains(s.ToUpper()) 
        select new { c.Id, c.City, c.State, c.Zip } 
       ); 
      return Json(listCities, JsonRequestBehavior.AllowGet); 
     } 
    } 
} 

あなたは私は何を得ることができる場合index.cshtml @model AutoCompleteInMVCJson.Models.CityModel

@{ 
    ViewBag.Title = ""; 
} 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#City").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: "/Home/Index", 
        type: "POST", 
        dataType: "json", 
        data: { s: request.term }, 
        success: function (lst) { 
         response($.map(lst, function (c) { 
          return { label: c.Id + "//" + c.City + "//" + c.State + "//" + c.Zip, value: c.City }; 
         })) 
        } 
       }) 
      }, 
      messages: { noResults: "", results: function() { return (""); } } 
     }); 
    }) 
</script> 



@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 
    <div class="form-horizontal"> 
     <hr /> 
     <div class="form-group"> 
      <div class="col-md-12"> 
       @Html.TextBoxFor(m => m.Id, new { @class = "hidden" }) 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-12"> 
       @Html.TextBoxFor(m => m.City, new { @class = "form-control" }) 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-12"> 
       @Html.TextBox("State") 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-12"> 
       @Html.TextBox("Zip") 
      </div> 
     </div> 
    </div> 
} 


<script type="text/javascript"> 
    var x = document.getElementById('City'); 

    x.addEventListener("blur", UpDateFields, true); 

    function UpDateFields() { 
     $.ajax({ 
      url: "/Home/Index" 
      , type: 'post' 
      , data: { s: $('#City').val() } 
      , success: function (c) { 
       $('#Id').val(c.Id); 
       $('#State').val(c.State); 
       $('#Zip').val(c.Zip); 
       alert("//" + c.Id.val() + "//" + c.City + "//" + c.State + "//" + c.Zip + "//") 
      } 
     }); 
    } 
</script> 

ここでやろうと努力し、より良い方法で私はすべての耳にそれらを行うためにthougnts持っている。

ありがとうございました。

Answer 1

linqクエリは、一致するアイテムが1つしかない場合でも、常にリストを返すようになります。

2つのajax呼び出しを/ Home/Indexに設定します。あなたが正しく返されたJSONリストを扱う最初のケースでは：第2のケースで

success: function (lst) { 
         response($.map(lst, function (c) { 
          return { label: c.Id + "//" + c.City + "//" + c.State + "//" + c.Zip, value: c.City }; 
         })) 
        } 

あなたが戻ってくるものではありません、単一のJSONオブジェクトを、期待しています。

success: function (c) { 
       $('#Id').val(c.Id); 
       $('#State').val(c.State); 
       $('#Zip').val(c.Zip); 
       alert("//" + c.Id.val() + "//" + c.City + "//" + c.State + "//" + c.Zip + "//") 
      } 

2番目のケースでもリストを処理する必要があります。

メモ：POSTを使用して読み取り専用操作を処理するのはなぜですか？