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.