將class物件轉成json物件並通過ajax傳遞到前端
阿新 • • 發佈:2019-02-02
後臺程式碼:
/// <summary> /// 測試用的類 /// </summary> public class Product { public int productId { get; set; } public string productName { get; set; } } /// <summary> /// 測試將各種物件轉換成json物件,並返回 /// </summary> public class HomeController : Controller { public ActionResult Index() { return View(); } /// <summary> /// 將例項化類物件轉成json物件並返回 /// </summary> /// <returns></returns> public JsonResult GetProduct() { Product p = new Product { productId = 1, productName = "aaa" }; JsonResult jr = Json(p); return jr; } /// <summary> /// 將一組例項化類物件轉成json物件並返回 /// </summary> /// <returns></returns> public JsonResult GetProducts() { List<Product> ps = new List<Product>{ new Product{productId=111,productName="aaa"}, new Product{productId=333,productName="ccc"} }; JsonResult jr = Json(ps); return jr; } /// <summary> /// 將例項化的自定義無名物件轉成json物件並返回 /// </summary> /// <returns></returns> public JsonResult GetJson() { Product p = new Product { productId = 111, productName = "aaa" }; List<Product> ps = new List<Product> { new Product{productId=222,productName="bbb"}, new Product{productId=333,productName="ccc"} }; JsonResult jr = Json(new { msg = "this msg is from GetJson", product = p, products = ps }); return jr; } /// <summary> /// 將datatable轉成json物件並返回 /// </summary> /// <returns></returns> public JsonResult GetDataTable() { DataTable dt = new DataTable(); dt.Columns.Add("id"); dt.Columns.Add("datetime"); DataRow dr = null; dr = dt.NewRow(); dr[0] = 111; dr[1] = DateTime.Now; dt.Rows.Add(dr); dr = dt.NewRow(); dr[0] = 222; dr[1] = DateTime.Now.AddDays(1); dt.Rows.Add(dr); string datatableJsonStr = DataTableToJsonStr(dt); JsonResult jr = Json(datatableJsonStr); return jr; } /// <summary> /// datatable轉成json字串 /// </summary> /// <param name="dt"></param> /// <returns></returns> public string DataTableToJsonStr(DataTable dt) { JavaScriptSerializer jss = new JavaScriptSerializer(); jss.MaxJsonLength = int.MaxValue; ArrayList arrayList = new ArrayList(); Dictionary<string, object> dic = null; foreach (DataRow dr in dt.Rows) { dic = new Dictionary<string, object>(); foreach (DataColumn dc in dt.Columns) { dic.Add(dc.ColumnName, dr[dc.ColumnName].ToString()); } arrayList.Add(dic); } return jss.Serialize(arrayList); } }
前端程式碼:
<script type="text/javascript"> $(function () { //獲取單個例項化物件,並訪問其屬性 $.ajax({ url: "/Home/GetProduct", dataType: "json", cache: false, data: null, type: "POST", success: function (data) { alert(data.productId + data.productName); } }); //獲取一組例項化物件,並訪問各個物件的屬性 $.ajax({ url: "Home/GetProducts", dataType: "json", cache: false, data: null, type: "Post", success: function (data) { alert(data[0].productId + data[0].productName); alert(data[1].productId + data[1].productName); } }); //獲取例項化的自定義無名物件,並訪問各個屬性和物件 $.ajax({ url: "/Home/GetJson", datatype: "json", cache: false, data: null, type: "post", success: function (data) { alert(data.msg); alert(data.product.productId + data.product.productName); alert(data.products[0].productId + data.products[0].productName); alert(data.products[1].productId + data.products[1].productName); } }); //獲取datatable物件,並訪問其中的值 $.ajax({ url: "/Home/GetDataTable", dataType: "json", type: "post", data: null, cache: false, success: function (data) { alert(data); var rst = $.parseJSON(data); alert(rst[0].id + rst[0].datetime); alert(rst[1].id + rst[1].datetime); } }); }); </script>
將class物件轉成json物件並傳遞到前端時,當class物件的屬性為DateTime時,前端獲取到的時間格式將是如下: /Date(123456789)/ 這是原始的時間,js不能直接轉成時間變數,所以我們先要把裡面的數值取出來,再轉成時間變數,然後再讀取相應的時間值,如下: <script type="text/javascript"> var t = "/Date(123456789)/"; t = t.replace("/Date(", "").replace(")/", ""); t = new Date(parseInt(t)); alert(t.toLocaleDateString()); //結果:1970年7月2日 alert(t.toLocaleTimeString()); //結果:下午6:17:36 alert(t.toLocaleString()); //結果:1970年7月2日 下午6:17:36 </script> 我們也可以通過各種get方法來讀取相應的時間值。