Contribute
ASP.NET

Multilingual MVC Application With Customized JS Bundles Based on User Language

About

Here, you will learn about multilingual MVC application implementation flow, the creation of customized JavaScript bundles with translated alert messages based on user language, custom HTML helper classes, how to set user language in a cookie based on his login, displaying resource translation values in a form and how to maintain names and values in resource files.

Scenario

You will implement an MVC application to be displayed in various languages based on the user selected language. The form content is being displayed from the resource file based on the name and respective language and it would need to display the alert kind of information from customized bundled JavaScript based on user language whenever the user has done a form submission or input validation and so on.

RoadMap

When implementing the previous sample MVC application, you will learn the following concepts.

  1. Resource File creation with key, value pair combination for required language.

  2. Resource Key value display in a form based on user language.

  3. Cookie implementation in MVC.

  4. Bundling and Minification.

  5. Custom HTML helper class.

  6. Customized Bundle creation.

  7. Translate the JavaScript alert messages into user selected language.

  8. Localized JavaScripts minified and bundled, It helps to increase the performance of form.

Step 1

Create a new project named “MultilingualMVCApp” and choose the template “MVC” then it creates an MVC template project.

Step 2

Add a new application folder named “App_GlobalResources” to maintain the resource files with key/value pair combinations for various languages. Right-click on the Project “MultiLingualMVCApp” and select on “Add” and then select “Add ASP.NET Folder” and then click on “App_GlobalResources” like the following.

Step 3

Create a resource file named “Notifications.resx” for the default language English by following the following screenshots. Right-click on the “App_GlobalResources” folder, select “Add” and then click on “Resource file” and specify the name as “Notifications” and then click on the “Ok” button.

Click on "Resources File" and provide the name as "Notifications" as shown in the following screenshot.


In the similar way, create another resource file named “Notifications.fr.resx” under the App_GlobalResources file. After completion of these aforesaid procedure, the Solution Explorer looks like the following.

Step 4

In this step, you will add sample resource keys with translation values for English and French languages. For that double click on the “Notifications.resx” file, then the displayed file has three columns named Name, Value and Comments.

Name: This name field is treated as the Resource Key value and it should be unique in the file and not be empty.

You can now enter the sample key and respective values as shown in the following screenshot for the default language (English).

In the same way, you can add the same key values, whichever were specified in the “Notifications.resx” with respective translated values for the French language in the “Notifications.fr.resx” file is as follows.

Note: Here, I have used the Google translator to translate the sample English content to French content.

In the same way, you can add various resource files for different languages as said and you can add multiple resource types to the resx files (like strings, images, icons and so on) based on your needs.


Step 5

You can now create one controller named “DemoController” with the following procedure.  Right-click on the “Controllers” folder and select the “Add” option and click on the “Controller” link.

Click on the "Controller.." link and select the option “MVC 5 Controller – Empty” and then click on the “Add” button.

Then, specify the name as “DemoController” then click on the “Add” button.

Now, the controller is created with the default action named “Index” like the following.