ASP.NET WebPages Building Multilingual Websites

Building multilingual websites in ASP.NET WebPages can be quite challenging, however if you take a structured and organised approach it is possible to do quite easily. This is a topic which keeps cropping up on the ASP.NET forums and the main approach to building a multilingual website is through ASP.NET globalisation and localization. Here we will show you a different approach which has these benefits:

  • Data is stored in a database
  • Pages are easily indexable by search engines
  • URLs follow a certain format

Creating a multilingual website

The process is quite simple: Create a table which stores the pages and then have a column called Language (or something similar) and store that page language. Then using WebPages routing we can easily access pages using a logical URL like the following: http://localhost:45922/en-gb/welcome.

  1. Launch WebMatrix
  2. Create a website based on the Starter Site template and name it Multilingual
  3. Click on Databases
  4. Click the StarterSite database and click on New Query

​

Execute the following code:

CREATE TABLE Pages
(
Id int NOT NULL PRIMARY KEY,
Name nvarchar(250) NOT NULL,
Body ntext NOT NULL,
Language nvarchar(100) NOT NULL,
MetaInfo nvarchar(250) NOT NULL
)

Then create two more queries and insert this dummy data:

INSERT INTO Pages (Id, Name, Body, Language, MetaInfo) VALUES (1, 'Welcome', 
'Parish so enable innate in formed missed. Hand two was eat busy fail. Stand smart grave would in so. Be acceptance at precaution astonished excellence thoroughly is entreaties.',

'en-gb', '<link title="Welcome"
      type="text/html"
      rel="alternate"
      hreflang="fr" 
      href="/fr/accueil">')
INSERT INTO Pages (Id, Name, Body, Language, MetaInfo) VALUES (2, 'Accueil','Justice net donnent toi erigent ifs. Empilait ras heureuse capitale havresac nul etroites. Encore ahuris bourse oh xv gamins de decele','fr', '<link title="Welcome"

      type="text/html"
      rel="alternate"
      hreflang="en" 
      href="/en-gb/welcome">')
  1. In the _SiteLayout file above the <head> tag insert the following section:
RenderSection("MetaInfo", false)
  1. Next in the Default.cshtml page remove all the content and insert the following:
    Layout = "~/_SiteLayout.cshtml";

    var Language = Context.GetRouteValue("Language");

    var PageName = Context.GetRouteValue("PageName");

    var db = Database.Open("StarterSite");

    var data = db.QuerySingle("SELECT * FROM Pages Where Language=@0 AND Name=@1", Language, PageName);

    Page.Title = data.Name;

}

<h1>@data.Name</h1>

@Html.Raw(data.Body)

@section MetaInfo
{
    @Html.Raw(data.MetaInfo)
}
  1. Click on Nuget and install the WebPages Route handler file
  2. In the _AppStart.cshtml insert the following:
    @using System.Web.Routing
 
@{
    WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", "Email", autoCreateTables: true);
 
    RouteTable.Routes.MapWebPageRoute("{Language}/{PageName}", "~/default.cshtml", new {Language = "en-gb", PageName="welcome"});
 
}

This process might seem quite confusing and difficult but it’s quite simple. First of all, in the _AppStart we define a new URL structure, and the pattern we want is {PageLanguage}/{PageName}, which is similar to many websites like Microsoft.com. We also set the default values so when a user enters the main website, like http://mysite.com/, the default language is en-gb and the default page is welcome.

In the default.cshtml page we get the two routes from the URL and pass these into our SQL query, which will load the data. If the routes are null the default values apply. Also notice how we set our Page.Title to the page name and also set the Meta information.

The MetaInfo column in the table is used to store <link> tags to alternative documents, in this case different languages. This will allow search engines to index those pages as well. If you launch the website you should be able to get to the same page but in two different languages.

http://localhost:xxxx/en-gb/welcome

http://localhost:xxxx/fr/accueil

Conclusion

As you can see, this process is quite simple and allows you to create a multilingual website easily. However this process only changes the body content and not the whole layout, so the menu and footer are still in English. A way around this would be to store the layout file in the database as well. Another issue is that if your website has many language options then it might be ideal to link pages (using a different table) and automate the process of inserting the link tags in the <head> section of the HTML document.