I search a lot in Google for a whole day but didn’t find any perfect example to populate data into gridview. Then I decided to do it myself and I find it easy at the end of the day.
In the example which I illustrated below follows the flow:
- On document ready method it initiates jQuery AJAX call.
- Response will be redirected to the ASPX page and in tern server will respond with JSON data.
- jQuery AJAX call back success method used to generates HTML Table with data.
- Add HTML to DIV.
Here is the code:
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script src="js/commons.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div id="divperson"> <strong>[Newly generated HTML will seat here]</strong> </div> </form> </body> </html>
Default.aspx.cs
public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { if (Request.QueryString["id"] == "person") GetString(); } } public void GetString() { JavaScriptSerializer _serializers = new JavaScriptSerializer(); string _personJSON = _serializers.Serialize(Person.GetPersonDetails()); Response.Clear(); Response.Write(_personJSON); Response.End(); } } <strong>//Person Class and Members</strong> public class Person { public string Name { get; set; } public string State { get; set; } public string PhoneNumber { get; set; } public Person(string name, string state, string phone) { Name = name; State = state; PhoneNumber = phone; } public static List<Person> GetPersonDetails() { List<Person> _person = new List<Person>(); _person.Add(new Person("Hitesh", "Gujarat", "123")); _person.Add(new Person("Urvish", "Maharastra", "345")); _person.Add(new Person("Deepak", "Madhya Pradesh", "456")); return _person; } }
I just created Person class, created some properties and a static method to generate list of Person class objects. You need to include System.Collections.Generic and System.Web.Script.Serialization name space for List Class and JavaScriptSerializer class respectively.
In Page_Load method, based on the querystring value the GetString() method will call and JSON response will be generated and submitted as response. You need to catch this response on client side to retrive values within JSON formatted data.
commons.js (a separate JS file)
$('document').ready(function(){ $.ajax({ type: "GET", data:({id:"person"}), url: "Default.aspx", dataType: "json", success:function(resultdata){ var person; var _html='<table border="1">'; _html += '<tr>'; _html += '<th>Name</th>'; _html += '<th>State</th>'; _html += '<th>Phone</th>'; _html += '</tr>'; for(index in resultdata) { _html +='<tr>' ; _html +='<td>' + resultdata[index].Name + '</td>'; _html +='<td>' + resultdata[index].State + '</td>'; _html +='<td>' + resultdata[index].PhoneNumber + '</td>'; _html +='</tr>' ; } _html +='</table>' ; $('#divperson').html(_html); } }); });
Nothing fancy, using jquery.ajax method I made a GET request to Default.aspx page with some data. Page has return JSON data which I parsed in jquery.ajax success method.
Before you attempt to run this code in your app, make sure you have included jquery-1.4.2.min.js file.
I’m very thrilled you took the time and wrote this post?
Pretty good, Thank you..
Nice
Very good post. Thank you!
Really Thanks.