Click here to Skip to main content
13,511,516 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


7 bookmarked
Posted 12 Jul 2011

Simplifying Asp.Net Core Ajax

, 12 Jul 2011
Rate this:
Please Sign up or sign in to vote.
Walkthrough of Asp.Net Core Ajax


This article demonstrates, how to implement Core Ajax in Asp.Net.


What is Ajax?

Ajax is an acronym for Asynchronous JavaScript and XML.

In Asp.Net programming, in general concept of Ajax is to get/post data from/to Server using JavaScript or “Ajax Extension” controls.

What is Core Ajax?

In Asp.Net for “Server Controls”, we can easily apply Ajax using “Ajax Extension” controls like “UpdatePanel” and “ScripManager”.

On the other hand, what if we want to get/post data from/to Server using pure JavaScript.

This is achievable using “XMLHttpRequest” object. In below article we will see two ways of implementation of Core Ajax. Though we are not going to use pure “XMLHttpRequest” object code, but these mechanisms internally use “XMLHttpRequest” object only.

In fact every Ajax mechanism internally uses “XMLHttpRequest”.

Using the Code

1) Asp.Net Ajax using JQuery

[Please refer “JqueryExample.aspx” in attached code.]

Create new Asp.Net Project.

Add reference of “jquery-1.4.1.min.js” or ”jquery-1.5.1.min.js” in your .aspx page.

<head  runat="server">
<title>JQuery AJAX Example</title>

<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>


Write JavaScript function "JqueryAjaxExample" to implement Ajax using JQuery.
<head  runat="server">
<title>JQuery AJAX Example</title>

<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

<script language="javascript" type="text/javascript" >
     function JqueryAjaxExample() {
            type: "GET",
            url: "JqueryExampleAjax.aspx",
            success: function (serverDate) {

    function JqueryAjaxExampleResponse(serverDate) {



In this function we have specified below settings.

“type” - Request is of type “GET”

“url” – URL to call server side execution is "JqueryExampleAjax.aspx"

“success” – JavaScript function which should execute after successful completion of this Ajax Request. We want JavaScript function “JqueryAjaxExampleResponse” should execute after successful completion of this Ajax Request.

Implementation of function “JqueryAjaxExampleResponse” is as below.

It will show alert of server date received from server side.

function JqueryAjaxExampleResponse(serverDate) {

Now on Page Load of “JqueryExampleAjax.aspx” Page, write current system date to response.
public partial class JqueryExampleAjax : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)

Call function “JqueryAjaxExample” on click of some HTML input button.
<input id="btnServerTime" type="button" value="Show Server Time"  onclick="JqueryAjaxExample();" />

Let’s run the application and click on above HTML button.

This will show Date & Time of Server in alert message.


2) Asp.Net Ajax using “ICallbackEventHandler”

[Please refer “CallBackExample.aspx” in attached code.]

Let’s assume the scenario in which we want to trigger server side event of same page using JavaScript.

We can do this by using “ICallbackEventHandler” and JavaScript code.

Register the script on Page load, which will specify that JavaScript function “GetServerDate” will invoke event of server side. This will also register JavaScript function “GetServerResponseFunction” as a Call Back function.

protected void Page_Load(object sender, EventArgs e)
            if (!IsPostBack)

string registerCallBack = Page.ClientScript.GetCallbackEventReference(this, "arg", "GetServerResponseFunction", "context");

                string registerCallBackscript;
registerCallBackscript = "function GetServerDate(arg, context)" + "{ " + registerCallBack + ";}";

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "GetServerTime", registerCallBackscript, true);

Now write JavaScript function “GetDateFromServer” which will call “GetServerDate”.

Function “GetServerDate” will call server side event.

function GetDateFromServer() {

            var dateFormat = '';

            if (document.getElementById("shortDate").checked) {
                dateFormat = 'shortDate';
            else if (document.getElementById("longDate").checked) {
                dateFormat = 'longDate';

            GetServerDate(dateFormat, '');

Let’s declare and implement JavaScript function “GetServerResponseFunction”. This will simply alert the server date received from server side.
function GetServerResponseFunction(serverDate) {

Implementation of “ICallbackEventHandler”

Now Inherit class of your page by interface “ICallbackEventHandler” as below.

public partial class CallBackExample : System.Web.UI.Page, ICallbackEventHandler

Interface “ICallbackEventHandler” provides below events.
public void RaiseCallbackEvent(string eventArgument)

private void GetCallbackResult(string format)

Event “RaiseCallbackEvent” will invoke from JavaScript function “GetServerDate”.

Event “GetCallbackResult” will invoke after event “RaiseCallbackEvent”. JavaScript function “GetServerResponseFunction” will invoke after this as a call back function.

Let’s do implementation of these events as below. “RaiseCallbackEvent” will set value of string variable “serverDateTime” based on eventArgument. This eventArgument contains argument value passed from JavaScript function “GetServerDate”.

Event “GetCallbackResult” will return value of string variable “serverDateTime” to Client side. This will be input for call back JavaScript function “GetServerResponseFunction”.

string serverDateTime = "";

public void RaiseCallbackEvent(string eventArgument)
   if (eventArgument != null)
     if (string.Compare(eventArgument, "shortDate") == 0)
        serverDateTime = System.DateTime.Now.ToShortDateString();
      else if (string.Compare(eventArgument, "longDate") == 0)
        serverDateTime = System.DateTime.Now.ToLongDateString();


public string GetCallbackResult()
     return serverDateTime;

In aspx add two radio buttons for Format of the Date. Also add HTML input button to call JavaScript function “GetDateFromServer”.
Short Format:  <input id="shortDate" type="radio" checked="checked" name="DateFormat" style="width:20px;" />

Long Format:  <input id="longDate" type="radio" name="DateFormat" style="width:20px;"  />

   <input id="btnServerDate" type="button" value="Show Server Date"  onclick="GetDateFromServer();" />

Below diagram elaborates flow of function calls.


Now run the application, select “Short Format” option and click on button.

Result will be as below.


Now select “Long Format” option and click on button.

Result will be as below.


Have a Happy Asp.Net Ajax Programming.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Technical Lead
United States United States
Full Stack Technology Professional

Hands-on experience with -
. Asp.Net, MVC, C#, Ajax
. JavaScript, Jquery, AngularJS
. Xamarin
. SharePoint
. VBScript

Tested flavors of -
. Java, Perl, Python, NodeJS, Android, IOS(little bit)

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
aspnet_regiis -i11-Oct-12 5:38
memberaspnet_regiis -i11-Oct-12 5:38 
GeneralRe: My vote of 5 Pin
RaisKazi11-Oct-12 5:50
memberRaisKazi11-Oct-12 5:50 
GeneralReason for my vote of 5 Excellent! Pin
Marcio_Coelho12-Dec-11 3:42
memberMarcio_Coelho12-Dec-11 3:42 
GeneralRe: Thank you so much Marcio. :) Pin
RaisKazi12-Dec-11 5:45
memberRaisKazi12-Dec-11 5:45 
GeneralReason for my vote of 5 Nice one, BTW came by Q/A section(Yo... Pin
thatraja6-Nov-11 21:39
mvpthatraja6-Nov-11 21:39 
GeneralRe: Thank you Raja. :) Pin
RaisKazi6-Nov-11 21:43
memberRaisKazi6-Nov-11 21:43 
GeneralIs this not excessive for a tip, and more suited to article? Pin
DaveAuld17-Jul-11 0:21
mentorDaveAuld17-Jul-11 0:21 
GeneralRe: Thanks Dave. Initially I wanted to Publish this as an Articl... Pin
RaisKazi17-Jul-11 3:00
memberRaisKazi17-Jul-11 3:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180417.1 | Last Updated 12 Jul 2011
Article Copyright 2011 by RaisKazi
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid