2017-06-19 16 views
0

asp.netでWebアプリケーションを開発しています。インデックスページで、AJAX呼び出しを実装して欠陥オブジェクトのリストを取得し、HTMLテーブルに取り込みました。Ajaxはasp.netのリストの未定義のオブジェクトを返します。

コントローラ「GetDefect」にJSON形式の不具合のリストを返すメソッドを記述しました.Javascript側で取得すると結果は未定義になります。

私は数時間を費やしていますが、まだ解を見つけることができません。他のStackOverflowの質問も検索しましたが、それを助けることはできませんでした。

モデルクラス

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 

namespace MvcApplication3.Models 
{ 
    public class Defect 
    { 
     private string ID; 
     private DateTime date_created; 
     private string updated_by; 
     private string created_by; 
     private string description; 




    public Defect(string ID, DateTime date_created,string updated_by,string ,created_by,string description) 
    { 
     this.ID = ID; 
     this.date_created = date_created; 
     this.updated_by = updated_by; 
     this.created_by = created_by; 
     this.description = description; 
    } 


} 

}

コントローラ

[HttpGet] 
     public JsonResult GetDefects() 
     { 
      IList<Defect> dataList = new List<Defect>(); 
      dataList.Add(new Defect("eththeth",DateTime.Now.Date,"ergerger","ergergerger","ergerg")); 
      dataList.Add(new Defect("wefwefwef", DateTime.Now.Date, "wew44r3", "gbnvfbnvbn v", "gbndfgnbfgnf")); 

      return Json(new { dataList = dataList }, JsonRequestBehavior.AllowGet); 

     } 

JSファイル

$(document).ready(function() { 
    GetFoodDetails(); 
}); 


function GetFoodDetails() { 
    $.ajax({ 
     type: "GET", 
     url: "Home/GetDefects", 
     contentType: "application/json;charset=utf-8", 
     dataType: "json", 
     success: function (data) { 
      console.log(data.dataList); 
      applychanges(data); 
     }, 
     error: function (response) { 
      alert('eror'); 
     } 
    }); 

} 

function applychanges(result) { 
    console.log(result); 
    var html = ''; 
    $.each(result, function (key, item) { 
     html += '<tr>'; 
     html += '<td>' + item.ID + '</td>'; 
     html += '<td>' + item.description + '</td>'; 
     html += '<td>' + item.defect_status + '</td>'; 
     html += '<td>' + item.date_created + '</td>'; 
     html += '<td>' + item.created_by + '</td>'; 
     html += '<td>' + item.location_lang + '</td>'; 
     html += '<td>' + item.location_long + '</td>'; 
     html += '<td><a href="#" onclick="return getbyID(' + item.ID + ')">Edit</a> | <a href="#" onclick="Delele(' + item.ID + ')">Delete</a></td>'; 
     html += '</tr>'; 
    }); 
    $('.tbody').html(html); 
} 

HTML(表)

<table class="table table-bordered table-hover"> 
      <thead> 
      <tr> 
       <th>ID</th> 
       <th>Date Raised</th> 
       <th>Date Due</th> 
       <th>Defect Status</th> 
       <th>Defect Remarks</th> 
       <th>Langitude</th> 
       <th>Longitude</th> 
      </tr> 
      </thead> 
      <tbody class="tbody"> 
      </tbody> 
     </table> 

two muppets

誰もが知っているなら、助けてください。事前に感謝

+1

、このいずれかをしてください試すことができます。開発ツール* Network *タブでそれを見ることができるはずです。そうでない場合は、Ajaxの成功ハンドラに 'console.log(JSON.stringify(data))'を追加してください。 – nnnnnn

+1

それらはすべてすべての「プライベート」フィールドであるため、それらをパブリックプロパティにします。 –

+0

@StephenMueckeそれは動作します! ありがとうございます。 –

答えて

1

プライベートフィールドはJavaScriptSerializerでシリアル化されていません。モデルにパブリックプロパティを作成します。

public class Defect 
{ 
    public string ID { get; set; } 
    public DateTime date_created { get; set; } 
    .... // etc 

それだけで収集

return Json(dataList, JsonRequestBehavior.AllowGet); 
1

を返すために、コントローラのメソッドを変更、または

success: function (data) { 
    applychanges(data.dataList); // change 

する必要がありますので、あなたの方法は、コレクションを期待しているとGetFoodDetailsを置き換えることによって、試してみてください以下。

function GetFoodDetails() { 
    $.get('/Home/GetDefects', null, function (data) { 
     $.each(data.dataList, function (i, dl) { 
      alert(dl.ID); 
     }); 
    }); 

} 

これが機能するかどうかは私にご連絡ください。コントローラの動作方法コードに変更はありません。

また、あなたは、[編集]あなたの質問のブラウザで受信したとしてJSONを示すためにも

function GetFoodDetails() { 
$.ajaxSetup({ 
      async: false 
     }); 
     $.ajax({ 
      type: 'GET', 
      url: '/Home/GetDetails', 
      success: function (data) { 
       alert(data.dataList); 
      } 
     }); 
} 
関連する問題