How to bind the json data returned from .ashx file to DataSource?

1 posts, 0 answers
  1. Shirley
    Shirley avatar
    1 posts
    Member since:
    Nov 2012

    Posted 14 Nov 2012 Link to this post

    When I created a grid, I tried to use a .ashx file as a datasource. No data displayed in IE.
    But when I save the .ashx result as a .json file and bind to the datasource. Grid displyed ok.
    Please help to find what is wrong with my code? Thank.
    internet-users.json :
    [{"Name":"System","Role":"a","Birthdate":"\/Date(259074000000)\/","ID":3},{"Name":"Moataieh","Role":"CHASSIS INSTALLATION","Birthdate":"\/Date(259074000000)\/","ID":26}]

    My JsonDataSrc.ashx is:
    I ran it in IE and IE displayed the same data as in internet-users.json
    <%@ WebHandler Language="C#" Class="GetData" %>
    using System;
    using System.Web;
    using System.Data.SqlClient;
    using System.Data;
    using System.Collections.Generic;
    using System.Web.Script.Serialization;
     
    public class GetData : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            string connectionString = @"Data Source=.;Initial Catalog=MyData;User ID=MyData;Password=;";
     
            context.Response.ContentType = "text/plain";
                List<Person> list = new List<Person>();
                using (SqlDataReader sdr = StockIMS.IDataAccessLayer.SqlHelper.ExecuteReader(connectionString, CommandType.Text, "SELECT top 2 isnull(Name,''), isnull([Job Role],'N/A') role,  isnull(Birthday,'1972-01-01'), [Person ID] id FROM [Staff Names]"))
                {
                    while (sdr.Read())
                    {
                        Person Personitem = new Person();
     
                        Personitem.Name=sdr[0].ToString();
                        Personitem.Role=sdr[1].ToString();
                        try
                        {
                            Personitem.Birthdate = Convert.ToDateTime(sdr[2].ToString());
                        }
                        catch { }
                                 
                        Personitem.ID =Convert.ToInt32( sdr[3].ToString());
                        list.Add(Personitem);
                    }
                    sdr.Close();
                }
                context.Response.Write(new JavaScriptSerializer().Serialize(list).ToString());//转为Json格式
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
    public class Person
    {
        private System.String _Name;
        private System.DateTime _Birthdate;
        private System.Int32  _ID;
        private System.String _Role;
     
        public Person()
        {
        }
        public string Name { get { return _Name; } set { _Name = value; } }
        public string Role { get { return _Role; } set { _Role = value; } }
        public DateTime Birthdate { get { return _Birthdate; } set { _Birthdate = value; } }
        public Int32 ID { get { return _ID; } set { _ID = value; } }
    }


    My index.html is:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Basic usage</title>
     
        <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
        <link href="../styles/kendo.common.min.css" rel="stylesheet">
        <link href="../styles/kendo.default.min.css" rel="stylesheet">
        <script src="../js/jquery.min.js"></script>   
        <script src="../js/kendo.web.min.js"></script>
        <script src="../content/shared/js/console.js"></script>
                    <script src="../content/shared/js/people.js"></script>
                <style >
                        body { font-size: 9pt; }
                        #dvGrid { width: 500px; }       
                        span.hi-lite { color: red; }       
                        #dvGrid th.k-header { text-align: center }   
                 </style>           
    </head>
    <body>   
    <a class="offline-button" href="index.html">Back</a>
     
            <div id="example" class="k-content">
                <div id="clientsDb">
     
                    <div id="dvgrid" style="height: 380px"></div>
     
                </div>
                <script>
                
                        $(document).ready(function() {
                  var dataSrc = new kendo.data.DataSource(
               {
                    transport:
                    {
                       read: {
                         type:"POST",                                                  
                          url:   "internet-users.json",// "JsonDataSrc.ashx",
                          dataType: "json"   
                    }               
                    },   
                    pageSize: 10,               
                    serverPaging: true,               
                   serverSorting: true           
                 });
                                              
                    var dateRegExp = /^\/Date\((.*?)\)\/$/;          
                     window.toDate = function (value)
                     {               
                            var date = dateRegExp.exec(value);
                            return new Date(parseInt(date[1]));           
                     }
                 
                   function createGrid() {
                   $("#dvgrid").kendoGrid
                   ({
                        dataSource: dataSrc,
                        autoBind: false,
                        sortable: {
                                    allowUnsort: false
                        },
                        columns: [ {
                            field: "Name",
                            width: 90,
                            title: "Name"
                        } ,{
                            width: 100,
                            field: "Role"
                        } , {
                            field: "Birthdate",
                            title: "Birth Date",
                         template: '#= kendo.toString(toDate(Birthdate), "yyyy/MM/dd")#'
                       } , {
                            width: 50,
                            field: "ID"
                       }
                       ]
                   }) ;
                   }  
                   createGrid() ; 
                   dataSrc.read();
                   });               
                </script>
            </div>
    </body>
    </html>
Back to Top