Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Make Your AJAX Apps Wiser Using Auto-Complete Functionality in Atlas : Page 3

The whole point of AJAX is to make things faster, so why not include functionality that completes your users' thoughts as they type? In Atlas you can easily implement auto-completion functionality using the AutoCompleteExtender control.


advertisement
Calling External Web Services
While the AutoCompleteExtender control does not by default allow you to connect to external Web services, you can actually circumvent this restriction by using a technique known as bridging, which is described in this documentation.

However, a much simpler way to call external Web services is to call them from within your own Web service. The AutoCompleteExtender control is useful not just for auto-completing a text entry; it is also useful if you want to get an instant result based on what you type in the TextBox. For example, you might have a site that translates sentences from one language to another. Using the AutoCompleteExtender control, you can translate real-time as the user types. In this section, I will show you how this can be done.

Using the same project created in the last section, add a new Web Reference to the following Web service: http://www.webservicex.com/TranslateService.asmx?WSDL (see Figure 9). Click the Add Reference button to add the Web reference.



Author's Note: This is a Web service that allows you to translate sentences from one language to another. However, it is sometimes unstable and hence may not work all the time. However, you can easily replace this with another translation Web service you may find on the Web.

In Default.aspx page, add a new AutoCompleteExtender control and a new TextBox control named TextBox2 and then enter the following string "Enter a string to translate" (see Figure 10).


Figure 9. Add a Web Reference to the Web service.
 
Figure 10. Add the second set of AutoCompleteExtender and TextBox controls.

In Source View, configure the AutoCompleteExtender control as follows:

<atlas:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server" ServiceMethod="Translate" ServicePath="WebService.asmx" MinimumPrefixLength="1"> <atlas:AutoCompleteProperties Enabled="true" TargetControlID="TextBox2" /> </atlas:AutoCompleteExtender> Enter a string to translate<br /> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

In the WebService.vb file, add the following Translate() Web method:

<WebMethod()> _ Public Function Translate( _ ByVal prefixText As String, _ ByVal count As Integer) _ As String() Dim result(3) As String Dim ws As New com.webservicex.www.TranslateService result(0) = ws.Translate( _ com.webservicex.www.Language.EnglishTOChinese, prefixText) result(1) = ws.Translate( _ com.webservicex.www.Language.EnglishTOJapanese, prefixText) result(2) = ws.Translate( _ com.webservicex.www.Language.EnglishTOFrench, prefixText) result(3) = ws.Translate( _ com.webservicex.www.Language.EnglishTOKorean, prefixText) Return result End Function

The Translate() Web method basically calls the translation Web service and translates whatever the user types into four different languages—Chinese, Japanese, French, and Korean.

Press F5 to test the application. Type a string to translate into the second TextBox and observe that as you type the translation is performed in real time (see Figure 11).


Figure 11. The translation is done in real time.
 
Figure 12. The translation will only take place if you end your sentence with a ".".

The speed at which the translation is performed is dependent on the network latency of the Web service as well as how many users are viewing your page at the moment. The downside to this application is that every time the user types a new character the entire string is sent to the Web service for translation, which is not a very sensible thing to do. To remedy this, it might be better to translate the sentence only if the user ends the sentence with a ".". This can be fixed easily by performing a check in the Web method:

<WebMethod()> _ Public Function Translate( _ ByVal prefixText As String, _ ByVal count As Integer) _ As String() If Not prefixText.EndsWith(".") Then Return Nothing End If Dim result(3) As String Dim ws As New com.webservicex.www.TranslateService result(0) = ws.Translate( _ com.webservicex.www.Language.EnglishTOChinese, prefixText) result(1) = ws.Translate( _ com.webservicex.www.Language.EnglishTOJapanese, prefixText) result(2) = ws.Translate( _ com.webservicex.www.Language.EnglishTOFrench, prefixText) result(3) = ws.Translate( _ com.webservicex.www.Language.EnglishTOKorean, prefixText) Return result End Function

Now the Web service will only be invoked whenever the user ends the sentence with a "." (see Figure 12).
Figure 13. This video shows both the country name suggestion and the translation feature in action. Click the play button twice to start the video.

In this article, you learned how to use the AutoCompleteExtender control to enhance the usability of your Web application, specifically by trying to offer suggestions on whatever the user is typing. You have also learned how to invoke external Web services by calling them in your own Web service. In future articles on Atlas, I will show you how to perform drag-and-drop on your Web pages using Atlas.



Wei-Meng Lee is a Microsoft MVP and founder of Developer Learning Solutions, a technology company specializing in hands-on training on the latest Microsoft technologies. He is an established developer and trainer specializing in .NET and wireless technologies. Wei-Meng speaks regularly at international conferences and has authored and coauthored numerous books on .NET, XML, and wireless technologies. He writes extensively on topics ranging from .NET to Mac OS X. He is also the author of the .NET Compact Framework Pocket Guide, ASP.NET 2.0: A Developer's Notebook (both from O'Reilly Media, Inc.), and Programming Sudoku (Apress). Here is Wei-Meng's blog.
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date