Filling ASP.NET Grid view with data by calling API URL

Question

My objective is to fill a table in ASP.NET Webform, by calling API url. But getting some serialization issues.

Any help would be much appreciated. I assume there is some issue with serialization and deserialization. But unable to resolve that. Anyhelp would be much appreciated.

Below is my JSON.

    "success": true,
    "message": "GOOD",
    "data": [
        {
            "A1": "aa1",
            "A2": "AONE",
            "file_name": "test.pdf",
            "file_type": "application/pdf",
            "created_datetime": "2023-01-10T16:20:01",
            "created_by": "guru",
            "active": true,
            "updated_by": null,
            "updated_datetime": null
        },
        {
            "A1": "aa",
            "A2": "AONE",
            "file_name": "test1.pdf",
            "file_type": "application/pdf",
            "created_datetime": "2023-01-10T16:20:01",
            "created_by": "guru",
            "active": true,
            "updated_by": null,
            "updated_datetime": null
        },
        {
            "A1": "aa1",
            "A2": "AONE",
            "file_name": "test2.pdf",
            "file_type": "application/pdf",
            "created_datetime": "2023-01-10T16:20:01",
            "created_by": "guru",
            "active": true,
            "updated_by": null,
            "updated_datetime": null
        }
    ]
}

below is my code to call API Url and to show the data in web page.

private async void BindGridView1()
    {
        

        string apiUrl = "http://mesappbeta/BE_API_HOME/api/SeriesBlacklist/Req_UploadedDocs?series=AE01400&series_type=RU";
        using (var client = new HttpClient())
        {
            
            client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
            HttpResponseMessage response = client.GetAsync(apiUrl).Result;
            if (response.IsSuccessStatusCode)
            {
                
                string json = JsonConvert.SerializeObject(response.Content.ReadAsStringAsync().Result);
                
                
                var data = new List<object> { json };                    
                DataTable dt = new DataTable();
                dt.Columns.Add("file_name");
                dt.Columns.Add("file_type");
                dt.Columns.Add("created_datetime");

                foreach(var item in data)
                {
                    dt.Rows.Add(item);
                }
                GridView2.DataSource = dt;
                GridView2.DataBind();
            }
        }
    }

getting output as below.

issue is "i am not able to get filename, type and created date " values from JSON. Complete JSON is showing in one cell. — Guru, Feb 13 '23 at 08:59

score 0 · Accepted Answer · answered Feb 13 '23 at 15:20

Try this code

    var json = response.Content.ReadAsStringAsync().Result;

    DataTable dt = JObject.Parse(json)["data"].ToObject<DataTable>();

   //  dt.Columns.Remove("A1");  // you can remove columns you don't need

    GridView2.DataSource = dt;
    GridView2.DataBind();

Guru · Answer 2 · 2023-02-17T04:27:28.790

Used https://json2csharp.com/ to convert my JSON into classes. And changed C# code as below

`private async void BindGridView1() {

    string apiUrl = "http://mesappbeta/BE_API_HOME/api/SeriesBlacklist/Req_UploadedDocs?series=AE01400&series_type=RU";
    using (var client = new HttpClient())
    {
        
        client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
        HttpResponseMessage response = client.GetAsync(apiUrl).Result;
        if (response.IsSuccessStatusCode)
        {
            
            string json = response.Content.ReadAsStringAsync().Result;
            
            
           Root data = JsonConvert.DeserializeObject<Root>(json);                    
            DataTable dt = new DataTable();
            dt.Columns.Add("file_name");
            dt.Columns.Add("file_type");
            dt.Columns.Add("created_datetime");

            foreach(var item in data)
            {
                dt.Rows.Add(item);
            }
            GridView2.DataSource = dt;
            GridView2.DataBind();
        }
    }
}`

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Feb 17 '23 at 00:53

Filling ASP.NET Grid view with data by calling API URL

2 Answers2