jQuery Ajax: Create HTML Table with User details at Client based on Server Data

[This post initially posted on my MS Technical blog here. Visit http://onlyms.net for better readability]. 

I am sharing information on JQuery-AJAX on ASP.Net in incremental order to learn it properly. In last post on this topic I shared information about how to change some HTML control based on server data using jQuery. Now I shall share information how to create a user data list or table with some data which is coming from server. Here I am taking example of some user data with one image. In my project I am using one sample JPG image with IMG folder in project (available in 1st post attached project on that topic). 

Step 1: Create back-end server code to provide data. Look carefully at below server code to prepare a web-service [webmethod] method.

[WebMethod]public static string CreateUserList(){        List<object> user = new List<object>();        user.Add(new { Id = "10", Name = "A", Image = "img/sample.jpg" });        user.Add(new { Id = "20", Name = "B", Image = "img/sample.jpg" });        user.Add(new { Id = "30", Name = "C", Image = "img/sample.jpg" });        user.Add(new { Id = "40", Name = "D", Image = "img/sample.jpg" });
        return (new JavaScriptSerializer().Serialize(user));
}

In the above code I am creating a List object with property ID, Name and Image. For my case ID and Name is different but all are same image. In real life project you can change it with some different image name. I am adding these user data into List object and finally I am serializing the array/list to send it to client as JSON data format.  Using below line of code:

return (new JavaScriptSerializer().Serialize(user));

Step 2: Prepare HTML section as below:

< fo rm id="form1" runat="server">    
        jQuery Ajax: Create HTML Table with User details at client based on server data.

        
        < t able id="tblList">
        
        "btnClick" type="button" value="Click Me!" />    

In this HTML code I have declared a HTML Table where I shall append rows to design a table with server provided user data. The button will be used to invoke server method using JQuery. HTML section is extremely easy and simple.

Step 3: Invoke server webmethod/web service using JQuery AJAX.





"server">
"js/jquery-1.9.1.js">

< scr ipt type="text/javasc ript">    $(document).ready(function () {
        $("#btnClick").click(function () {
            $.ajax({                type: "POST",                url: "ArrayToList.aspx/CreateUserList",             
                contentType: "application/json; charset=utf-8",                dataType: "json",
                success: function (msg) {
                    var user = eval(msg.d);                    $.each(user, function () {                        $("#tb lList").app end("
User Id: "
+ thi s.Id + ",Name:"
+ this.Name + "< i m g al t= '' hei ght ='100' sr c='"
+ this.Image + "' /></ t r>");                    });                }            });        });    });
</ he ad>




Here I am coping full HEAD section where I have called JQuery 1.9.1 and then have written JQuery code (to know more about these part on each step by step from here). Here I am calling 'CreateUserList' web method and on successful AJAX call 'Success:' will executed where main table design will performed.
All JSON data will come at client as serialized and it will be parsed by eval() method based on message's properly. Next it will start looping with 'each' method will concatenate string with column value like 'this.Id','this.Name','this.Image'. Here need to note that Id, Name and Image was the column/parameter name in List. Finally this concatenated string is adding or appending at as row in declared table.

The whole thing will look like below image in browser.

Get source code from below attached files.
Thank you for reading my blow, please comeback again for next post, how to create a user search list as like facebook.