[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).
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]publicstaticstringCreateUserList(){List<object> user =newList<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(newJavaScriptSerializer().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(newJavaScriptSerializer().Serialize(user));
Step 2: Prepare HTML section
as below:
< fo rm id="form1"runat="server">jQuery Ajax: Create HTML Table withUser 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>
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.
