JSONオブジェクトを返すmvcコントローラへのajax呼び出しを使用して剃刀ビューで選択リストを作成する際に問題が発生する

Question

タイトルには私はこれに少し問題があると言います。私はJSONのハードコーディングに成功しましたが、いったんモデルを使い始めると間違っています。私は下記の日付を参照してください。 JS

アヤックス

$(document).ready(function() { 
    $.getJSON('/Programs/GetAll', function (data) { 

    //clear the current content of the select 
    $('#ProgramId').empty(); 

    //iterate over the data and append a select option 
    $.each(data, function (key, val) { 
    $('#ProgramId').append('<option id="' + key + '">' + val + '></option>');}) 
    }); 
}); 

コントローラ

[HttpGet] 
    public JsonResult GetAll() 
    { 
     var progams = _context.Program 
      .Select(a => new 
      { 
       id = a.Id.ToString(), 
       name = a.Name 
      }).ToList(); 

     return Json(progams); 
    } 

現在の結果

現在のオブジェクト

このハードコーディングはAjaxで動作し、 html。

[HttpGet] 
    public JsonResult Get() 
    { 
     Dictionary<string, string> programSelectList = new Dictionary<string, string>(); 
     programSelectList.Add("1", "Bob"); 
     programSelectList.Add("2", "Cratchett"); 
     return Json(programSelectList); 
     //return Json(_context.Program.ToJson()); 
    } 

私は何か基本的なものを紛失しており、いかなる助けも大変ありがとうございます。

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

Answer 1

あなたのajax呼び出しから返される応答は、それぞれidとnameというプロパティを持つ項目の配列です。だから$ .eachを使ってそれらをループすると、変数valはこれら2つのプロパティを持つ単一のjsオブジェクトになります。これらのプロパティにアクセスして、オプションvalueとtextを設定するだけです。

$.each(data, function (key, val) { 
    $('#ProgramId').append('<option value="' + val.id + '">' + val.name + '</option>'); 
}); 

また、あなたはおそらくGETアクションメソッドからJSONデータを返すときにJsonRequestBehaviorを指定する必要があります。

return Json(progams,JsonRequestBehavior.AllowGet);