Post
Ask Question

How To Convert And Bind JSON String In To ASP.NET GridView With C#

Requirement

If we don't know about JSON string/objects and how many columns there are or the column names, then we won't be able to create a C# class for an object deserializeObject, and I mean wrapper class. Here, the requirement is to bind GridView from JSON object without AJAX/jQuery and loop in C# also without wrapper class.

  1. Create a Web Application in Visual Studio.

    ASP.NET
  1. Right click on the project and add a Web form by clicking Web Form.

    ASP.NET

  2. Afterwards, open a Windows popup. In this, enter your Web Form name and click Add button.

    ASP.NET
  1. Open your Web form .aspx source/design part and go to ToolBox. Drag and drop ASP.NET GridView control in to the Web form and set GridView style, as per your requirement.

    ASP.NET
  1. Here, a way to bind GridView from JSON is given below.

    1. Use dynamic keyword with JsonConvert.DeserializeObject. Here, you need to import Newtonsoft.Json.
    2. Use DataTable with JsonConvert.DeserializeObject. Here, you need to import, using System.Data.

      ASP.NET

Dynamic

This is a data type, dynamic data type introduced since .NET Framework 4.0. The dynamic data type allows you to perform any operation and will be resolved at the run time. It does not require explicit type casting for any operation at run-time, because it identifies the types at run-time only. Dynamic type can be passed as a function argument and function can also return an object type. It is useful when coding , using reflection or dynamic language support or with the COM objects, because we need to write less code. [http://www.c-sharpcorner.com/blogs/variable-object-and-dynamic-data-type-in-c-sharp1]

DataTable

In .NET, it's a class, which represents a table of in-memory data.

CODE

.ASPX 

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BindJosn2Grid.aspx.cs" Inherits="BindJSON2ASPDOTGridView.BindJosn2Grid" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <div>  
  12.         <h2>Bind GridView From JSON Object (Converted In to Dynamic Object [dynamic keyword])</h2>  
  13.         <asp:GridView ID="grdJSON2Grid" runat="server" BackColor="White" BorderColor="#3399ff"  
  14.             BorderStyle="Dotted" BorderWidth="1px" CellPadding="3" GridLines="Both"></asp:GridView>  
  15.   
  16.         <br />  
  17.         <br />  
  18.          <h2>Bind GridView From JSON Object (Converted In to DataTable Object [DataTable])</h2>  
  19.         <asp:GridView ID="grdJSON2Grid2" runat="server" BackColor="White" BorderColor="#3399ff"  
  20.             BorderStyle="Dotted" BorderWidth="1px" CellPadding="3" GridLines="Both"></asp:GridView>  
  21.     </div>  
  22.     </form>  
  23. </body>  
  24. </html>   

.CS 

  1. protected void Page_Load(object sender, EventArgs e)  
  2.         {  
  3.             //Random json string, No fix number of columns or rows and no fix column name.   
  4.             string myDynamicJSON = "[{'Member ID':'00012','First Name':'Vicki','Last Name':'Jordan','Registered Email':'vicki.j @tacinc.com.au','Mobile':'03 6332 3800','MailSuburb':'','MailState':'','MailPostcode':'','Engagement':'attended an APNA event in the past and ventured onto our online education portal APNA Online Learning','Group':'Non-member'},{'Member ID':'15072','First Name':'Vicki','Last Name':'Jordan','Registered Email':'vicki.j @tacinc.com.au','Mobile':'03 6332 3800','MailSuburb':'','MailState':'','MailPostcode':'','Engagement':'attended an APNA event in the past and ventured onto our online education portal APNA Online Learning','Group':'Non-member'}]";  
  5.   
  6.             //Using dynamic keyword with JsonConvert.DeserializeObject, here you need to import Newtonsoft.Json  
  7.             dynamic myObject = JsonConvert.DeserializeObject(myDynamicJSON);  
  8.               
  9.             //Binding gridview from dynamic object   
  10.             grdJSON2Grid.DataSource = myObject;  
  11.             grdJSON2Grid.DataBind();  
  12.   
  13.             //Using DataTable with JsonConvert.DeserializeObject, here you need to import using System.Data;  
  14.             DataTable myObjectDT = JsonConvert.DeserializeObject<DataTable>(myDynamicJSON);  
  15.   
  16.             //Binding gridview from dynamic object   
  17.             grdJSON2Grid2.DataSource = myObjectDT;  
  18.             grdJSON2Grid2.DataBind();  
  19.           
  20.         }  


Similar Articles