Using Translation Services within ASP.NET MVC 3 and jQuery

Posted by: Malcolm Sheridan , on 3/25/2011, in Category ASP.NET MVC
Views: 62530
Abstract: The following article demonstrates how to use Microsoft’s Translation service within your ASP.NET MVC application using jQuery.

Every once in a while, you have text that you need to translate. I ran into this recently where the user would login, go to a specific page and be able to type in text and have it translated on the fly. After some research I found that Microsoft had a service called Microsoft Translation Service. This is an online service which can be accessed via AJAX, HTTP or SOAP. Because I wanted this to run on the client, I stuck with AJAX. I’m sure there are other services out there which can do this just as good, but I used Microsoft’s product and found it to be good. And here what I found.

Creating Your AppID

Before you can do anything you’ll need to create a Bing API AppID. The ID is passed as a parameter to the translation service to identity you. Without it you won’t be able to do anything. You’ll need to visit this site and follow the instructions to create the AppID.

Let’s get started. I’m using MVC 3 in this demo but there’s nothing stopping you taking the same code and dropping it into a Web Forms application.

The translation service can run purely through JavaScript. This is a bonus as I don’t want to touch server code. The URL of the service is:

http://api.microsofttranslator.com/V2/ajax.svc/Translate

The parameters that you pass to the service are outlined below.

  • text – the text to be translated
  • to – the target language
  • appid – your AppID to uniquely identify yourself
  • oncomplete – the JavaScript function that is invoked once the service has returned successfully

The entire JavaScript is below. I’ve used closures in this example as I always try to use this technique when working with JavaScript. Find out more about closures here.

asp translation jquery

Once the DOM has finished loading, I’m setting up the functions to handle the event when the user submits the form. I’m doing this as I want to send the form via Ajax and want to avoid the page refresh.

asp translation ajax

When the user submits the form, the JavaScript function text.translate is invoked. This calls the translation service and passes the data to it. This injects a script tag into the head of the document. If you’re using Firebug, you’ll see the script tag that is injected into the page whilst the service is being called.

script tag inject

Once the service has finished, the injected script tag is removed from the DOM and the oncomplete function is invoked and the results are displayed to the user.

It didn’t take long to get this working. This was an easy way for the users to translate text when they needed it on the fly. Thanks Microsoft!!

The entire source code of this article can be downloaded over here

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, a Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Being an ASP.NET guy, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with jQuery and JavaScript. He also writes technical articles on ASP.NET for SitePoint and other various websites. Follow him on twitter @malcolmsheridan


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by knb on Sunday, March 27, 2011 3:33 AM
Good one! In the same context, have you used the Facebook Connect translation services in an MVC 3 app?
Comment posted by Malcolm Sheridan on Sunday, March 27, 2011 8:10 PM
@knb

I have not.  I didn't know that existed to be honest.  Perhaps you could write an article on how to use it?
Comment posted by karl_km on Monday, March 28, 2011 6:29 AM
me too! we have been evaluating different translation services to include in our cms and I am now planning to include the Bing service you just described.
Comment posted by Jamie Carruthers on Monday, March 28, 2011 2:39 PM
Very nice demo. One question however: Why do you inject the script instead of using jQuery.ajax() and JSONP?

$.ajax({
    url: 'http://api.microsofttranslator.com/V2/ajax.svc/Translate?' + txt + lang + appId + func,
    dataType: 'JSONP'
});
Comment posted by Malcolm Sheridan on Monday, March 28, 2011 10:28 PM
@Jamie

Thanks.  I tried that but from memory I couldn't get it to work.  It didn't work without the oncomplete event.  If you try and get it to work, let me know as I would love to know what was happening.
Comment posted by Toxter on Tuesday, March 29, 2011 2:25 AM
Hi, on your Firebug screenshot we can see your appId :)
Comment posted by Carol on Tuesday, March 29, 2011 4:35 AM
Toxter: Thanks for the input. We have removed the appid from the screenshot.
Comment posted by Malcolm Sheridan on Tuesday, March 29, 2011 5:13 AM
@Toxter

Whooops! Thanks Carol & Toxter :)
Comment posted by Jamie Carruthers on Wednesday, March 30, 2011 1:50 PM
Malcolm, all I changed was adding the jquery.ajax() call:

var txt = "text=" + text;
var lang = "&to=" + language;
var appId = "&appid=XXXXXXXXXXXXXXXXXXXXXXX"; // Add your AppId here
var func = "&oncomplete=text.translated";

$.ajax({
    url: 'http://api.microsofttranslator.com/V2/ajax.svc/Translate?' + txt + lang + appId + func,
    dataType: 'JSONP'
});

I evaluated the response in Chrome and the following is returned:

    text.translated("Salve, mondo!");

which is executed by the browser immediately (Chrome, FF3.5 & IE9). I am using jQuery 1.5.1.
Comment posted by Malcolm Sheridan on Wednesday, March 30, 2011 5:49 PM
@Jaime

Thanks for sharing that.  Appreciate it.

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel