Client Centric Approach of AJAX using Toolkit
page 4 of 7
by Sandeep Acharya
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 32355/ 95

How to accomplish Client Centric – Example

Lets move step by step to get a complete hold on this.

Create an AJAX enabled website

          Create an AJAX Enabled web site for this example. Ajax enabled website is same as normal .net website but having few more additional tags in web.config.

Add Webservice and Javascript

          Add a webservice (MyService.asmx) to the project. Also add a JS file (Jscript.js) to do the client side activities. Basically we are going to call the Webmethods present in the websevice through java script.

Add ScriptManager

          Add a ScriptManager to the MasterPage with tags as shown below.

Listing 1

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="JScript.js" />
</Scripts>
<Services>
<asp:ServiceReference Path="MyService.asmx" InlineScript="true" />
</Services>
</asp:ScriptManager>

Do necessary changes to the webservice

          You need to add the ScriptService attribute to the webservice class. Then add your own webmethod. Here we have added a GetServerTime() method.

Listing 2

[WebMethod]
public string GetServerTime()
{
    return DateTime.Now.ToString();
}

Test the Webservice, see if it generates the client proxy

          After this you should be able to test whether your webservice is ready to receive calls from the javascript. Basically the webservice URL followed with “/js” or “/jsdebug” will allow you to download the resulting client proxy. This is possible because of the presence of Scriptservice Attribute for Webservice class.

         

          If you will save and open this file, you will find that there will be necessary client proxy entry for each of the webmethods present in webservice.

The following prompt ensures that the webservice is correct and ready to use.

 

Figure 1

Get the result by running the application

          After this, create a button and run the following javascript function on the button click.

Listing 3

// JScript File
function GetTime()
{
    MyService.GetServerTime(onSuccess,onFailed);
    return false;
}

          Here onSuccess and onFailed are the name of the functions (similar to delegates) that will be executed eventually at the success and failure of the AJAX Call. The definitions of them are given below.

 

Listing 4

function onSuccess(result)
{
    alert("Current time is: " + result);
}

 

Listing 5

function onFailed(result)
{
    alert("Error [" + result._statusCode + "] : " + result._message);
}

 

Finally it will look like this:

 


View Entire Article

User Comments

Title: 2012 NFL jerseys   
Name: NIKE NFL jerseys
Date: 2012-07-02 10:09:26 AM
Comment:
http://www.jersey2shop.com
http://www.cheapjersey2store.com
http://www.jerseycaptain.com
http://www.yourjerseyhome.com
We are professional jerseys manufacturer from china,wholesal.cheap nike nfl jerseys, mlb jerseys, nhl jerseys,nba jerseys and shoes
Cheap NFL,NBA,MLB,NHL
,heap jerseys,2012 nike nfl Jerseys,nba jersey and shorts,oklahoma city thunder jersey,official jeremy lin new york knicks jersey,NFL Jerseys Wholesale,blake griffin jersey blue,NFL jerseys For Sale online.All Our Jerseys Are Sewn On and Directly From Chinese Jerseys Factory
,Wholesale cheap jerseys,Cheap mlb jerseys,]Nike NFL Jerseys,Cheap China Wholesae,Wholesale jerseys From China,2012 nike nfl Jerseys,Jerseys From China,,2012 nike nfl Jerseys,Revolution 30 nba jerseys,jersey of nba chicago bulls direk rose ,nfl jerseys,green bay packers jerseys wholesale,Buffalo Bills nike nfl jerseys sale,good supplier soccer jerseys,cool base mlb jerseys,Revolution 30 nba jerseys,2012 stanley cup nhl jersey,
We are professional jerseys manufacturer from china,wholesal.cheap nike nfl jerseys, mlb jerseys, nhl jerseys,nba jerseys and shoes. www.yourjerseyhome.com
Title: mamu   
Name: nanda
Date: 2012-06-08 4:27:19 PM
Comment:
I just wondered for the date it was published
Title: The Author   
Name: Sandeep
Date: 2010-05-06 12:35:04 PM
Comment:
Yuvaraj,

you should click on the "View entire article" to see the whole article. And FYI...this format is a mandate from ASP Alliance. I m helpless if u r nt happy with the format.

Sandeep
(Author)
Title: my comment   
Name: Yuvaraj
Date: 2010-05-06 7:18:43 AM
Comment:
Firstly change your article format. It's really irritating. Just to read few lines or paragraphs, we need to go for new page, making new request is really non-sense.
Title: ajax coding   
Name: animesh
Date: 2010-02-22 8:22:33 AM
Comment:
give the notes
Title: For Sakhi   
Name: Sandeep Acharya
Date: 2010-01-20 1:32:09 PM
Comment:
Thanks Sakhi for your comment. Regarding JSerialisation, you first have to know what is serialization. Serialization is the way of converting an object to a stream of bytes. Now in JSerialization, u will be able to convert a serverside object to stream bytes and that can be received at client (Javascript) end. At clientside it will be treated as a JS object. Dont worry, this method (client centric) of AJAX supports JSerialization to full extent. So u can create instances of the server side classes at clientside. You can also return objects like Datatable, Datarow etc from your method and receive them as it is in your client side JS end. All these are possible just because of Jserialization. Hope it clears your doubt.

Thanks
Sandeep
Title: gr8 job   
Name: Hrishi4uonly
Date: 2010-01-20 10:36:18 AM
Comment:
very good keep it up mamu
Title: JSerializable   
Name: Sakhi
Date: 2010-01-20 4:40:01 AM
Comment:
Article is good. But can you tell me what is JSerialization?
Title: nice article   
Name: dave
Date: 2010-01-18 8:45:18 AM
Comment:
Very nicely demonstrated. Gr8 job man.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-03-05 2:10:35 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search