This is a migrated thread and some comments may be shown as answers.

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

0 Answers 263 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Shirley
Top achievements
Rank 1
Shirley asked on 14 Nov 2012, 11:42 AM
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>

No answers yet. Maybe you can help?

Tags
Data Source
Asked by
Shirley
Top achievements
Rank 1
Share this question
or