chapter 10 – ajax dr. stephanos mavromoustakos. chapter overview ajax (asynchronous javascript and...

45
Chapter 10 – AJAX Dr. Stephanos Mavromoustakos

Upload: alexis-strickland

Post on 29-Dec-2015

222 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Chapter 10 – AJAXDr. Stephanos Mavromoustakos

Page 2: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Chapter OverviewAJAX (Asynchronous JavaScript And XML)Ajax allows your client-side web pages to exchange data

with the server through asynchronous calls. The most important thing about Ajax is flicker-free page of the post-back to the server without refreshing the entire page.

This chapter will cover:Using the UpdatePanel control to avoid page flickerUnderstanding the ScriptManager control that enables

AjaxUsing the UpdateProgress control to notify users about

progress of the Ajax operationUsing triggers and the Timer control to trigger the

update of UpdatePanel controlsCreating Web Services that are accessible by your client-

side script

Page 3: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Creating Flicker-Free PagesYou will need the UpdatePanel server control

and the ScriptManager control.If you’re going to use Ajax in many of your ASPX

pages, you can place the ScriptManager in the Master page, so it’s available in all pages.

The Ajax-related server controls are in the AJAX Extensions category of the Toolbox (if you don’t see the controls in the Toolbox, right-click the Ajax Extensions category of the Toolbox and select Choose Items. Then select the controls from the list)

Page 4: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice - Adding an UpdatePanel to a PageIn this exercise, you add a Label and a Button control to a page.

Whenever you click the button in the browser, the Text property of the Label is updated with the current date and time at the server. To avoid the page flicker, you wrap the controls in an UpdatePanel to see how that control affects the behavior

Open your project and in the Demos folder, create a new file called UpdatePanel.aspx. Make sure it’s based on the central base page you created previously. Give the page a Title of UpdatePanel Demo

Switch the new page into Design View and drag a Label control and a Button control into the cpMainContent placeholder. If there is no space, simply put it on top of the label. The Button is then placed before the Label but if you now drag the Label on top of the Button again, the two change places. You can also, click the Label once to select it, then press ENTER a couple of times to create some space

Use the Properties to clear the Text property of the Label control. You can do this also by right-click the Text property in the Properties Grid and choose Reset. Your code should be:

<asp:Label ID="Label1" runat="server"></asp:Label> <br /> <br /> <asp:Button ID="Button1" runat="server" Text="Button" />

Page 5: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Adding an UpdatePanel to a PageDouble-click the grey area in Design View for the Load event handler and add the following code:

Label1.Text = System.DateTime.Now.ToString()Save all your changes and press Ctrl+F5. The Label displays the current date and time. Click the Button control few times. Note that each time you click, the page flickers, displaying the updated date and time.

Close the browser and go back to VWD in the Markup of UpdatePanel.aspx. From the AJAX Extensions, drag an UpdatePanel into the code, right before the Label control.

Page 6: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Adding an UpdatePanel to a Page

Page 7: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Adding an UpdatePanel to a PageBetween the opening and closing tags of the UpdatePanel,

add a <ContentTemplate> element. Cut both the closing </ContentTemplate> and the closing </UpdatePanel> tags and paste them below the Button. You should end up with this code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="Label1" runat="server"></asp:Label> <br /> <br /> <asp:Button ID="Button1" runat="server“ Text="Button" />

</ContentTemplate></asp:UpdatePanel>

Page 8: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Adding an UpdatePanel to a PageRight before the opening tag of the UpdatePanel, drag a ScriptManager from the AJAX Extensions category of the Toolbox:

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

Save your changes and then request the page in the browser again. Click the Button few times. Note that there is no page flicker now. It’s as if only the label is updated on the page.

Page 9: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

How it WorksBy wrapping the content in an UpdatePanel

you define a region in your page that you want to refresh without affecting the entire page.

The ScriptManager serves as the bridge between the client page and the Ajax framework and takes care of things like registering the correct JavaScript files that are used in the browser.

Page 10: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Providing Feedback to UsersWhen the UpdatePanel is busy you can provide

feedback to users with the UpdateProgress control.

You can put text like “Please Wait” or an animated image to let the user something is happening.

Page 11: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Flicker-free Pages – Putting it All TogetherIn this exercise, you modify the user control

ContactForm.ascx, wrapping the control in an UpdatePanel so the page doesn’t perform a full postback when you enter a message and click the Send button. The show users the page is busy when the message is being sent, you add an UpdateProgress panel to the control. Inside this control you place an animated GIF image that is available in the code download of your book (you can also go to www.ajaxload.info to create your own animated image)

Page 12: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Flicker-free Pages – Putting it All TogetherOpen the user control ContactForm.ascx and in the

Markup View wrap the entire <table> element and Label1 at the bottom of the control in an UpdatePanel with a <ContentTemplate>. You can type it or drag the control from the Ajax Extensions. You should end up with this code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate><table class="style1" runat="server" id="FormTable">

<asp:Label ID="lblMessage" runat="server" Text="Message Sent" Visible="false"></asp:Label>

</ContentTemplate></asp:UpdatePanel>

Page 13: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Flicker-free Pages – Putting it All TogetherSave the changes and then open the file

MasterPage.master. Between the opening <form> tag and the <div> for the PageWrapper, add a ScriptManager control by dragging it from the Toolbox into the source of the control. You should end up with this code:

<form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager> <div id="PageWrapper">Save the changes and then close itOpen the UpdatePanel.aspx and remove the ScriptManager element. Save the changes and close the page.

Page 14: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Flicker-free Pages – Putting it All TogetherOpen the Contact.aspx in the browser and fill

in the form. As soon as you click the Send button, the form is replaced with a label stating that the message is sent.

To keep the user updated on the progress while the message is delivered to the mail server, you should add an UpdateProgress control to the page. Inside this control, you add an animated image and some text informing the user the message is being sent. To add the image, locate the file in C:\BegASPNET\Source\Chapter 10\App_Themes\Monochrome\Images. Drag the file PleaseWait.gif into the Images folder of the Monochrome theme under App_Themes of VWD. Repeat this, but now drag PleaseWait.gif from the DarkGrey folder into the Dark Grey theme of VWD.

The figure shows how both images should end up

Page 15: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Flicker-free Pages – Putting it All TogetherOpen the Monochrome.css file, scroll all the way down

to the end, and add the following rule:.PleaseWait{ height: 32px; width: 500px; background-image: url(Images/PleaseWait.gif);

background-repeat: no-repeat; padding-left: 40px; line-height: 32px;}Copy the exact same rule into the DarkGrey.css file

for the DarkGrey theme

Page 16: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Flicker-free Pages – Putting it All TogetherSwitch back to the ContactForm.aspx and below

the closing tag of the UpdatePanel at the end of the file, drag an UpdateProgress control. Set its AssociatedUpdatePanelID to UpdatePanel1

Between the <UpdateProgress> tags create a <ProgressTemplate> and within this template, create a <div> element with its class attribute set to PleaseWait. Inside the <div> element, type some text to inform your users that they should hold on for a while. You should end up with this code:

Page 17: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Flicker-free Pages – Putting it All Together<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">

<ProgressTemplate> <div class="PleaseWait">Please Wait... </div> </ProgressTemplate></asp:UpdateProgress>To emulate a long delay while sending out the message so

you can see the UpdateProgress control, add the following code, just after the lines that change the visibility of the lblMessage and FormTable:

System.Threading.Thread.Sleep(5000)Save all your changes and open again the Contact.aspx in

the browser. After you press the Send button this time, you should see the animated image below the form and the text that the message is sent.

Page 18: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Flicker-free Pages – Putting it All Together

Page 19: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Using the Timer ControlThe Timer control is great for executing server-

side code on a repetitive basis. For example, you can use it to update the contents of an UpdatePanel every 5 seconds. The contents of this UpdatePanel could come from a variety of sources, such as a database to show new content added to the site, the membership services to display the number of users that are currently online, or even external web services with information like stock quotes or the lowest prices for specific products your users may be interested in.

If you set its Interval property to 60,000 is for 1 minute

Page 20: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice - Using the Timer Control in an ASPX PageIn this exercise, you see how to use the Timer control

to update a region of the page. The Timer will tick every 5 seconds and then update a label. Besides the Timer, the page also has a regular button that when clicked allows you to refresh the screen on demand.

Create a new page under the Demos folder based on your custom template and call it Timer.aspx. Give the page a Title of Timer Demo.

From the page UpdatePanel.aspx copy the code of the entire UpdatePanel control and then paste it within the Content control for the cpMainContent block of the Timer.aspx page. Remove the button from the ContentTemplate. Finally, add three line breaks <br/> after the UpdatePanel to create some room. You should end up with this code:

Page 21: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice - Using the Timer Control in an ASPX Page<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate> <asp:Label ID="Label1" runat="server"></asp:Label>

<br /> <br /></ContentTemplate> </asp:UpdatePanel> <br /><br /> <br /></asp:Content>Still in the Markup View, drag a Timer control from

the Ajax Extensions right below the UpdatePanel and the line breaks

Page 22: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice - Using the Timer Control in an ASPX PageDrag a Button below the Timer. Make sure both

the Timer and the Button end up outside UpdatePanel control by checking that the code looks like this:

<br /><br /> <br /> <asp:Timer ID="Timer1" runat="server" Interval="5000">

</asp:Timer> <asp:Button ID="Button1" runat="server" Text="Button" />

</asp:Content>Switch to Design View and set the Timer’s

Interval property to 5000 so it ticks every 5 seconds

Switch the Properties Grid to the Events Category. Double-click the Tick event as shown

Page 23: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice - Using the Timer Control in an ASPX PageIn the Code Behind, create a method (a Sub)

called UpdateLabel that sets the Text of Label1 equal to the current date and time. You should end up with the following code:

Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick

UpdateLabel()End SubPrivate Sub UpdateLabel() Label1.Text = DateTime.Now.ToString()End Sub

Page 24: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice - Using the Timer Control in an ASPX PageGo back into Design View, and double-click the

Button to set up its Click handler. Inside this handler, call the same UpdateLabel method:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

UpdateLabel() End SubReturn to Design View and select the UpdatePanel. Then open its Properties Grid (F4) and click the button with the ellipses for the Triggers property.

Page 25: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice - Using the Timer Control in an ASPX Page In the dialog box that follows, click the Add

button to insert a new AsyncPostBack trigger. Set its ControlID to Timer1 and the EventName to Tick by choosing the right items from the drop-down lists. Repeat this step, but now add a trigger on Button1 for its Click event.

Save all your changes and then request Timer.aspx in your browser. Note that the Label is updated with the current date and time every 5 seconds. When you click the button, the Label is updated immediately.

Page 26: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice - Using the Timer Control in an ASPX Page

Page 27: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Web ServicesWeb services is the ability to access data from other

sources at your web site, such as Google Search, Google Maps, Amazon, and Microsoft’s Virtual Earth

Web services is ideal to exchange data between different systems.

Creating web services is a similar process as creating ordinary methods. The difference is that you need to add to each method a WebMethod attribute

Besides the WebMethod attribute to mark the method as a Web Method, you generally place this method in a file with an .asmx extension and inside a class that inherits from System.Web.Services.WebService.

Page 28: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Creating a Web ServiceIn this exercise, you will create a simple Hello

World Web Service. This service accepts your name as an input parameter and returns a friendly, personalized greeting.

Create a new folder called WebServices in the root of your site to group all Web Services in the site in a single folder

Next, right-click this folder and choose Add New Item. Click the Web Service item and call the service NameService.asmx

Click Add to add the service to the site

Page 29: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Creating a Web ServiceNotice how the .asmx file is added to the

WebServices folder while the Code Behind file is placed in the site’s App_Code folder.

Open the NameService file in the App_Code folder and change the code for the HelloWorld method so it accepts a string and returns a personalized greeting. You should end up with code like this:

<WebMethod()> _ Public Function HelloWorld(ByVal yourName As String) As String

Return String.Format("Hello {0}", yourName)

End Function

Page 30: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Creating a Web ServiceSave all your changes, right-click NameService.asmx in the

Solution Explorer, and choose View in Browser. Once the browser is done loading, you get a page that lists all the public Web Services defined in the NameService.asmx. In this exercise, you see only HelloWorld

Page 31: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Creating a Web ServiceClick the HelloWorld link and you’ll be taken to a

page where you can test out the service. Type your name in the yourName field and then click Invoke.

Page 32: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Creating a Web ServiceA new window opens showing the XML that

has been returned by the Web Service.

Page 33: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

How it WorksThe String.Format method takes a string

that can contain numeric placeholders wrapped in a pair of curly braces ({}). Then for each numeric value, you supply a string value as subsequent parameters. In the previous example there is only one placeholder, but you can easily extend the call to the Format method with more parameters. For example, if you wanted to format a string with a first and last name, you’d use this code:

Return String.Format("Hello {0} {1}", firstName, lastName)

Page 34: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Using Web Services in your Ajax Web SiteYou need to add an attribute to the Web Service to

mark it as a service that can be called by a script. Then you register the service in the ScriptManager and write a few lines of JavaScript to invoke the service and receive its return value. This only works for services that are defined within your own web site as you’ll see next. If you want to call services that are not on the same domain as the page that calls them, you need to write additional code.

In the following section you’ll see how to configure your Web Services so they can be called by client-side script. In the Practical that follows you see how to use this knowledge and call a Web Service from a client page.

Page 35: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Configuring the Web ServiceBefore we marked a method as a Web Method

by adding an attribute. This exposes the method to the outside world. To make a Web Service visible by client-side script also, you need to add an attribute to the service class. If you look at the NameService class in the App_Code, you see that the template already added the attribute for you, cut commented it out:

' <System.Web.Script.Services.ScriptService()> _

Simply remove the comment tags to expose the entire service as a client-script service.

Page 36: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Configuring the ScriptManagerScriptManager control is a required component in almost

all Ajax-related operations. After you add the ScriptManager, you must tell the ScriptManager that you want to expose your Web Service to a client script. There are two ways to do this:

1.In the ScriptManager in the master page2.In a content page that uses the Web Service, using the ScriptManagerProxy class

If you wanted, for example, to make the NameService.asmx available in all pages, you’d add the following code to the master page inside the ScriptManager tag:

<services><asp:ServiceReferene Path=“~/WebServices/NameService.asmx” />

</services>

Page 37: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Configuring the ScriptManagerIf you are using a master page that has its own ScriptManager you need to use a ScriptManagerProxy control. Since you can only have one ScriptManager in a page, you can’t add another one in a content page that uses your master page with the ScriptManager.

Therefore, you need the ScriptManagerProxy to serve as a bridge between the content page and the ScriptManager in the master page, giving you great flexibility as to where you register your services.

Page 38: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Configuring the ScriptManagerWhen you have the ScriptManagerProxy in place, you

add the exact same <services> element to it as before with the ScriptManger itself:

<asp:ScriptManagerProxy ID=“ScriptManagerProxy1 runat=“server”><services>

<asp:ServiceReferene Path=“~/WebServices/NameService.asmx” /></services>

</asp:ScriptManagerProxy>The ScriptManagerProxy control makes it easy to

register Web Services and JavaScript files that are use in just a few content pages only

Page 39: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Calling Web Services from Client CodeIn this exercise, you register your Web Service in a ScriptManagerProxy control so it becomes available in one page only. In addition, you modify the service so its methods are accessible by script. Finally, you write some client-side JavaScript code that access the service and then displays its return value.

First you need to add the ScriptService attribute to your service class to mark it as callable by client-side script. To do this, open the file NameService.vb from the App-Code folder and uncomment the line that defines the attribute. You should end up with this code:

Page 40: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Calling Web Services from Client Code<System.Web.Script.Services.ScriptService()> _While you’re at it, you can change if you want the Namespace

property of the WebService attribute. For example, you can put your own www.yourdomain.com. Currently it is:

<WebService(Namespace:="http://tempuri.org/")> _

Add a new page in the Demos folder and call it WebServices.aspx. Make sure you base this page on your central BasePage template and give it a Title like Web Services Demo. Once you add the page, drag a ScriptManagerProxy control from the Toolbox into the markup of the cpMainContent placeholder.

Page 41: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Calling Web Services from Client CodeWithin the ScriptManagerProxy element, add a <services>

element that in turn contains a ServiceReference with its Path set to the NameService you created earlier. You should end up with the following code:

<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">

<Services> <asp:ServiceReference Path="~/WebServices/NameService.asmx" />

</Services> </asp:ScriptManagerProxy></asp:Content>

Page 42: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Calling Web Services from Client CodeRight below the closing tag of the

<ScriptManagerProxy>, add an Input (Text) and an Input (Button) by dragging them from the HTML category of the Toolbox. Set the id of the text box to txtYourName and the id of the button to btnSayHello. Set the value of the button to Say Hello. You should end up with this markup:

</asp:ScriptManagerProxy> <input id="txtYourName" type="text" /> <input id="btnSayHello" type="button" value="Say Hello" />

Page 43: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Calling Web Services from Client Code Below these two lines, add a client-side JavaScript block with the

following code: <input id="btnSayHello" type="button" value="Say Hello" />

<script type="text/javascript"> function HelloWorld() { var yourName = $get('txtYourName').Value; NameService.HelloWorld(yourName,

HelloWorldCallback); } function HelloWorldCallback(result) { alert(result); } $addHandler($get('btnSayHello'), 'click',

HelloWorld); </script>

Page 44: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Calling Web Services from Client CodeSave all your changes and request WebServices.aspx in your

browser. Enter your name and click the Say Hello button.

Page 45: Chapter 10 – AJAX Dr. Stephanos Mavromoustakos. Chapter Overview AJAX (Asynchronous JavaScript And XML) Ajax allows your client-side web pages to exchange

Practice – Calling Web Services from Client CodeIf you get an error instead of this message box, or

you see a small yellow triangle in the bottom-left of the screen, or get nothing, make sure you typed the JavaScript exactly as in the code snippet. Note that JavaScript is case sensitive, also make sure that you added the JavaScript block after the input box and button. Finally, make sure that the path to your Web Service matches the actual path of your .asmx service file