Browse DevX
Sign up for e-mail newsletters from DevX


Internationalize Your ASP.NET Applications (Part 2 of 3) : Page 4

See how to use culture settings to localize images, database content, numbers, currencies, and dates in your ASP.NET applications.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

In a Windows Forms application, it would be natural to put images in resource files, but web applications typically serve images from image files using HTTP, so using resource files is not a viable solution; the server would need to write each image to disk as a GIF, PNG or JPEG before it could be served. For the same reason, you're unlikely to store the images in a database. In this solution you'll create a folder to store the images for each culture that the sample site supports. You'll then use the localization code to dynamically assign the correct URLs. For example, the URLs for the French and UK English versions of the sample site differ.

<img src="/appname/images/fr-FR/image.gif" width="&#133;" height=""> <img src="/appname/images/en-GB/image.gif" width="&#133;" height="">

To dynamically create these URLs , create another server control containing an HTML <img> tag. Name the new control "Image" and create one private imageName member variable to hold the base name of the image. Create a public property called "Name" that gets and sets the imageName member variable's value. At runtime, you want to be able to assign the <img> tag's href attribute value dynamically. To do that, override the CreateChildControls method and construct the control's href attribute by concatenating the "images" folder to the culture name and the ImageUrl property. To create a French version for example, if the base imageName property contained "image.gif", you would end up with the URL "/appname/images/fr-FR/image.gif". Here's the overridden CreateChildControls method.

protected override void CreateChildControls() { CultureInfo culture = Thread.CurrentThread.CurrentCulture; Image flag = new Image(); flag.ImageUrl = "images/" + culture.Name + "/" + imageName; flag.Width = imageWidth; flag.Height = imageHeight; Controls.Add(flag); }

Notice that the code uses properties for the width and height of the image, which were set by sizing the control in the designer. There are two limitations with this scheme. First, you must ensure an image is present across all the culture folders. Second, all the images for the cultures must be the same size.

In the article page, add two of these Image controls; one to display a flag relating to the culture, and the other to display a map of the geographic area identified with the culture.

<NewsSite:ImageControl runat="Server" id="FlagImage" ImageName="flag.gif" width="65" height="39"> </NewsSite:ImageControl> <NewsSite:ImageControl runat="Server" id="MapImage" ImageName="map.gif" width="39" height="39"> </NewsSite:ImageControl>

Note that you use the Image control in much the same way that you use the <img> tag—all you need to do is specify the image name and the dimensions of the image. To test the image localization, select a language from the drop-down list (see Figure 2) and then refresh the page in the browser to see the effect of the new language choice (see Figure 3).

Comment and Contribute






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



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