Tuesday, November 26, 2013

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.

Saturday, November 16, 2013

JQuery-AJAX: Change a HTML control name from server



I want to share a very basic and simple but a bit advance sample code on ASP.Net Ajax using JSON and JQuery. Now I want to change a control name or text based on server response data.

To demonstrate this thing I shall change my clicked button name based on server. This type of sample code is very easy to learn and you can use similar concept to develop solution for lots of requirement. Say you are developing some code where you have a button to 'Like' but after clicking on it the button  name will change to 'Unlike', or in a social network one user will start following some group or person; so when user will click on 'Follow' button will be changed to 'Following' etc.
Lets have a look in to the code:

HTML for this solution as below -
in put id="btnClick" type="button" value="Click Me!"

Here button 'btnClick' text will be changed. Next look into the back-end C# code.


[WebMethod]
public static string ChangeButtonNameJQuery(string btnName)
{     
      return btnName+ " - changed from Server";
}



Very simple Web Method or WebService in page 'ChangeButtonName.aspx'. To declare a page method as WebService we need to use namespace 'System.Web.Services', which I have used in using namespace section. Besure this method is 'static' type and its 'public'. Return type of webservice is string and invoking with one string parameter 'btnName'.

Now look at the jQuery code.



"js/jquery-1.9.1.js">
"text/javascript">
      $(document).ready(function () {
            $("#btnClick").click(function () {               
                
                $.ajax({
                    type: "POST",
                    url: "ChangeButtonName.aspx/ChangeButtonNameJQuery",
                    data: JSON.stringify({ btnName: $("#btnClick").val() }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {                       
                        $("#btnClick").val(msg.d);                       
                    }
                });
            });
        });

I have used here Jquery version 1.9.1 and calling my method when document becomes ready to execute which will call just after loading completion of page.



$(document).ready(function ()
{
}

the above code is doing this thing (to know details about Jquery Ajax calling from ASP.Net, read my 1st post on Jquery-Ajax). In my present code We are calling web method 'ChangeButtonNameJQuery' from current page (ChangeButtonName.aspx/ChangeButtonNameJQuery). Once successful web method execution client browser is getting response and invoking method 'success:' with response in object 'msg'. We can access server response from 'msg' property 'd' by using 'msg.d' and that I am setting to change button value, by


$("#btnClick").val(msg.d);

I hope you have enjoyed this post and has helped to learn little more on ASP.Net ajax using JQuery. Continue reading my next blog post to know more on Ajax using JQuery.

Thank you for visiting my blog. Happy coding.

Wednesday, November 13, 2013

JQuery-AJAX:Pass two parameters and concatenate two string at server side with ASP.Net

[Original Post from my another blog] - visit it for better design and reading friendly.

This is advance article of my previous post on JQuery-AJAX in ASP.Net JQuery-AJAX: Get Server Time using jQuery AJAX in ASP.Net. In earlier post I have describe how to get server time using ASP.Net with Jquery ajax technology. How I shall describe little bit advance things, that is how to pass two parameter from client and catch these values in server then concatenate in server and response result to client to show it.

Step 1: As previous declare a webmethod or webservice at backend.

[WebMethod]
    public static string ConcateName(string fname,string lname)
    {
        return fname +" "+lname;
    }

Note here I have passed two parameter with name 'fnale' and 'lname'. In JQuery you have to invoke method with exactly same name of parameter otherwise code will not run.

Step 2: Declare HTML control, tow text box, a button and a DIV to show server response. (visit my primary blog for better view of HTML and JQuery).

For 'First Name' input HTML id="txtFName" type="text".
Last Name: input id="txtLName" type="text" and a button.    
with id="btnClick" type="button" value="Concat Name".
And response in a DIV with id="dvResponse".

 Step 3: Write JQuery code in ASPX page as below:

        $(document).ready(function () {
            $("#btnClick").click(function () {
                //alert($("#txtFName").val());
                $.ajax({
                    type: "POST",
                    url: "ConcatName.aspx/ConcateName",
                    data: JSON.stringify({ fname: $("#txtFName").val(), lname:$("#txtLName").val() }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        $("#dvResponse").append(msg.d+"
"
);
                        //$("#dvResponse").html(msg.d);
                    }
                });
            });
        });
    
 Note here most important two lines as below:

url: "ConcatName.aspx/ConcateName",
data: JSON.stringify({ fname: $("#txtFName").val(), lname:$("#txtLName").val() }),


First line is describing which WebService should invoke and next line the parameter for webservice. Note here I have mentioned exactly same name of WebService parameter.

When you will run this code and type value in two text box and then click on button, browser will invoke server WebService and concatenate two name and then response to server. Which will catch by JQuery ajax part and result will be shown in DIV 'dvResponse'.
How you have enjoyed my post and it has helped for your learning on JQuery AJAX technology in ASP.Net-C#.

Tuesday, November 5, 2013

JQuery-AJAX: Get Server Time using jQuery AJAX in ASP.Net

[Original post from my blog http://onlyms.net//]

Friends, Now I want to share my codes with on ASP.Net AJAX by using jQuery. Earlier I have worked with UpdatePanel for AJAX work but it seems to this is not the best approach however its most easiest and simplest way for AJAX. So when you do not need maximum performance then definitely you can consider it to save time. But if you need maximum performance then my recommendation always jQuery AJAX. I shall share my blog post for AJAX work using jQuery and JSON with ASP.Net and C# with sample code which will help reader to learn this technology very easily.

In my first post I shall show how to get server time using jQuery with AJAX that means without page post back.


Step 1: Create a WebService which will response to client to inform server time. WebService as below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
public partial class GetTime : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    [WebMethod]
    public static string GetDate()
    {
        string str="[Response from Webservice]
Current Server Time is: "+ DateTime.Now.ToString() + "." + DateTime.Now.Millisecond.ToString();
        return str;
    }   
}

Nothing more require at back-end now I shall show at front end part of code.Full back-end code as below:
Note to declare a WebService first we have use namespace 'using System.Web.Services;' and then have declared method as '[WebMethod]'

Step 2: Declare a HTML button for clicking and a DIV to show server response.

Step 3: Set jQuery Part. Here first need to link jquery code which I am using version jquery-1.9.1.js and I have placed at my project at js folder. 

Step 4: Write jQuery code to access WebService. First look into the code next I am trying to clarify about these code.

JavaScript Script as below:
        $(document).ready(function () {
            $("#btGetDate").click(function () {               
                $.ajax({
                    type: "POST",
                    url: "GetserverTime.aspx/GetDate",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {                       
                        $("#dvDate").html(msg.d );
                    }
                });
            });
        });
This code will be activated when document becomes ready and when we will click on button 'btnGetDate' these next code will start execution using AJAX technology. Its sever calling type will be 'POST' and it will try to invoke 'GetDate' webservice will has created under 'GetserverTime.aspx' page and it's type will be JSON as describe next line.Once server response will receive successfully this code will go for next section 'success:function...' and jQuery will set server response at our declared DIV element 'dvDate'. From next post I shall not mention jQuery AJAX declaration in so detail and will discuss on main section only. Server response will show like below screenshot:

Get full source code with better alignment of blog from my blog.