1. 程式人生 > >將class物件轉成json物件並通過ajax傳遞到前端

將class物件轉成json物件並通過ajax傳遞到前端

後臺程式碼:

    /// <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方法來讀取相應的時間值。