Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

[How Do I:] Create a Multi-Lingual Site with Localization?

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
Welcome to this ASP.NET video tour of localization. The new code-free localization features in ASP.NET 2.0 make it really easy to translate your web apps and support many cultures with nothing but a few markup changes. I'm going to start with a new website. I'll call it localize. And, to begin with, we'll build a super-simple web page that consists of nothing but a button and a label. Let's go back and look at the source view. Okay, what we're going to do is make it so this page works both in English and in French. To do this, we want to add a new ASP.NET folder called ASP LocalResources, and if we add a specially named file in here, this resource file, as long as it looks like or has the same name as Default.aspx.resx, then the strings inside here will be substituted at run time for the English version of our page, or the default version of our page. Let me show you. So we have a button1 on our page. And the text value will say Hello. And we also have a label, whose text value will say English. If I copy this page and paste it right back into the folder, but rename it so it has FR at the end, that FR is the international code for the French language. And if I go in and simply change this to the French version, Bon jour, and—let's see, Alt+0231 is the c with the— Alt+0231, that's the c with a cedilla at the bottom, François, and let me save this. So now I have two XML files. There's the English version of the text and the French version. In fact, let me show you what it looks like. Down here at the bottom is where the relevant XML data is. What we need to do now is attach our two server controls to those values. And the way we do that is very easy. We use the new metatag. meta:resourceKey="Button1". And we do the same for the label. meta:resourceKey="Label1". Finally, we have to go to the end of our page declaration and add Culture="auto:— and by default, it will choose en-US". And also UICulture="auto". Okay, let's view the page and see if this all works. So my default language right now is English US. And just what we expect, the resources were chosen from that page, from the default.aspx.resx file. If I go and set my Internet Options to include new languages, like French, and then change the default order to make French higher priority, and choose OK and hit Refresh, I get the French version of the resource file. So so far, so good. Let's close this. And now let me show you— those resource files are particular to that page, default.aspx. If you want to have global localized resources, you can create a new folder called GlobalResources, and you follow the same kind of concept, where you create a resource file, and then inside here you would say— let's have a global resource for Welcome. In English, would be Welcome. And let's say we want to have some kind of default color. For English, we'll make it light blue. And the French version of this file— we copy that and paste it again, strip that off and put the FR tag and change the color to light green, and change Welcome to the French equivalent. Now to use the global resources, we can't do this implicit coding. Notice there's really no indication of what we're going to do here. ASP.NET is taking care of look at or examining the ambient language culture set by the browser, and that's passed in through an HTTP header. If we want to programmatically set these things— so let me add a Welcome label to go at the top. We'll put it in between this tag here. So drag a label on. And change this to Welcome. If we switch back to our design mode, I can bring up the properties for this control. And inside here is ths thing called an expression. So I use the expression dialog to set the text value equal to the resource coming from the global resource file, where the key was called Welcome. Now notice when I press OK, this text box right here has a little blue square. This indicates that that value for the text, for that label, is coming from—it's bound to that expression inside the XML file. This is a pretty powerful concept. It also means I could bind it to other things, like a background color. So again, let's go to the expressions and choose the background color for that button and tie it to Resources, Color. Now you can only do this trick here with the global resources. But these expressions are a pretty powerful way of doing more complex things. The implicit localization is meant for your basic values, like the text and the tool tip. And it's also on a per-file basis. So let's see how this looks. So there's our French version. That's good, and we got the French color. Now to get back to the US English, I swap the order and hit Refresh, and it works. We have a different banner text, but we've also changed the background color. Cool, so let's go to the next step and do something a little bit more complex. If I go to the—let's say this drop-down here, and put an HTML divider. And below that, I'll put a calendar control, followed by another label. We're going to see how the calendar and—we'll use this label control for currency—we'll see how these get localized correctly. So this will be our currency label. I think this part is really cool. So what we'll do is we'll change this page to support more languages and see how the calendar and the other implicit components support different languages. For now, first, let me show you the calendar. So here it is in English. If we change, go back and add—make French our high-priority language, hit Refresh, you'll see that it's localized the French calendar. So this is actually a really cool thing. I like the fact that all this works out of the box with ASP.NET components. However, it can get tedious testing all your languages by going through this dialog. So let's see, we need a combo box next to the label button. And I have that drop-down list already here on the Clipboard, because it's a little bit long. I threw in just a bunch of languages, English, German, two variations of English, two variations of French, and a couple of other languages. So now let's—before we continue, let me change that. I no longer need the word English. Let's call it Use this language. And the French translation of that would be— Okay. Save those two. So far, so good. So now we'll have a drop-down list, and when it's clicked, we want to handle it and change our overall ambient thread culture info. Now to do that, we're going to have to write a little bit of code. So far, we've been able to do some fairly complex things without writing any code. But now we need to do a little bit more work. We're going to be using a couple of libraries here. So System.threading, and System.globalization. And we're going to override a page method called InitializeCulture. And inside of here, this gets called fairly early on in the page construction. What we want to do is first examine and see if the language variable has been set from the drop-down combo. So we'll put that in a variable called lang. We'll set that equal to Request("Language1"). The reason I'm not doing Language1. get selected value is that the first time the page is loaded, that's not going to be set. And this is the simpler way to handle it. So I'll have—it's possible for the first time through, for this not to be set to anything, so I'll say if lang isnot nothing or lang <> ""— So, in other words, if it's been set, then I want to set my CurrentThread.CurrentUICulture equal to—set it equal to a new culture info, based on the language that's been selected. And I also have to set the CurrentCulture. Two different things. The UICulture is used for resources. And CurrentCulture is used for translation or mapping the dates and currencies. And this is a little bit more specific than just a language. We need a language and the locale. Or the language plus the location. And together, that's called a locale. And that is generated from the CultureInfo. Has a method on it that will create a specific culture from a generic language. So, in other words, if we just pass in en for English, by default this will translate into en-US. If we pass in fr, it'll translate it to fr-French versus French Canadian. And there are subtle differences between the two, and I'll show you. That's really it at this point. So we can do that, and let's go back and do one more thing. We want to set this label at the bottom of the page, right here. We want to set that equal to—do some kind of currency conversion or currency calculation. So we'll add a handler for when the page loads. I need a variable. dim money as Decimal = —I just need a big number. And now we'll set our label—I forget what I called it. Our currencyLabel. Set the currency label text equal to— now, if I just converted that money to a string, we would just get 65545.42. But let's say we want to treat that as a money type. It needs to be converted to the language and formatting that's appropriate to that particular locale, which is set up here. So we would do 0:c as the string formatter. And pass in our money. And that should be good. We'll save these two and view this in a browser. Okay, so remember, by default, our language was set to English. If we go and change this back to—I'm sorry. By default, our language was set to French. And you can see, not only do we get our correct localized resources, but the calendar and the format conversion worked. This is 65,000 Euros in French. And they use a comma as the decimal separator and a space for their thousands separator. If we go back and change our default to English, and hit Refresh, we get our localized version up here. And our thousands are separated by commas, decimals by a period. This also works as well. If I change it to English-UK, there's a subtle difference. In the U.K., dates start—the first day of the week starts on Monday. In English U.S., it's a Sunday. And, of course, they're using pounds, but we have the same decimal and thousands separators. If we go to French Canada, same idea here, but the calendar is slightly different for French or French Canadian. And finally, if we do things like Hindi or Thai, we see a more complex calculation. Again, all that is handled for us with very little code. And you can see that we can get local resources and global resources. And with a little bit of programming, we can even allow the user to choose their own.

Video Details

Duration: 13 minutes and 37 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 5
Posted by: neudesicasp on Aug 22, 2013

Learn how to create culture-aware and locale-specific web content with no additional code. Use the Resource Editor to create page-level and application-level resources.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.