Multiple localized aspx layouts

Question

I want to localize an application, and currently use the App_LocalResource resx files for language changes. However, I want to change the layout of the controls on an ASPX page dependant on locale. I know it is possible to set visible from the resx file.

For example; my default (en-US) could have

 "firstname" : [textbox]  
"surname"   : [textbox]

where as de-DE I would want to swop the order

 "surname"   : [textbox]
"firstname" : [textbox]

The aspx pages will use the same CodeBehind.

I guess what Im looking for is something along the lines of having;

• default.aspx
• default.de-DE.aspx
• default.aspx.cs

Where the default.de-DE.aspx contains all the same controls etc as default.aspx and even has the same directive;

 <%@ Page CodeFile="Default.aspx.cs" Inherits="MyNamespace.Default" %>

Then the .NET framework picks up this one rather than default.aspx layout..

Answer 1

In a similar situation I've created a custom server control with a localizable "RenderOrder" property. It also exposes Surname and FirstName as properties.

A similar scenario sometimes is required for detailed address fields too.

Answer 2

I should vote for building a control that's the way you display dates and times which is heavily dependent on localization

• Resources and Localization in ASP.NET 2.0
• Custom ASP.NET Server Controls and Language Localization
• Good general article on localization

Answer 3

I would say the best way to handle this would be via CSS.

You can easily apply a different stylesheet, which can completely change the layout of your website, and thereby move all the controls around. This solution also allows you to easily do alternate renderings for mobile browsers, or printing, or any other reason and is very versatile.

As other s stated, you will obviously have other localization issuse such as translation or date/currency formats as well. But you will have to solve those via other means.

Here are some examples of the same website, with 100% the same HTML, where only the CSS has changed, rendering completely differently.

http://www.csszengarden.com/?cssfile=/212/212.css&page=0

http://www.csszengarden.com/?cssfile=/211/211.css&page=0

Assuming your simple case where you have just two controls that you want to flip :

<div>
<div class=class1>Control1</div>
<div class=class2>Control2</div>

</div>

Then based on the location, in your stylesheet use either floats, or absolute positioning (within the parent container) to reposition the two divs. 100% identical html, with two different layouts?

ASPX

<link rel="stylesheet" id="Stylesheet1" type="text/css" runat="server" />

ASPX.cs

Stylesheet1.Attributes("href") = ResolveUrl("~\styles\StyleSheet.css")

Answer 4

I have worked for quite some time on a project that does essentially what you are looking to do; We split it by folder is the only difference, so /en-US/Default.aspx and /de-DE/Default.aspx. The pages share a common code-behind for functionality. It works pretty well, with a few gotchas:

• Making sure the files are always updated together - This is necessary because of the shared code behind. If you update the code behind, all the referenced controls had better exist on the pages.
• Be careful about your control references - we've run into some issues where controls were referenced from the wrong folder, resulting in some interesting (and sometimes hard to diagnose) issues.

Personally I would recommend splitting it into folders instead of using the file naming structure because it also very easily allows you to provide locale specific images and CSS . Also it allows you to override the common behavior of a page by just adding the appropriate code behind (you could do this too, but then your class names will be strange due to the periods in the file names[eg. ApplicationNS.Default_de_de as opposed to ApplicationNS.en_us.Default]).