Localization of a Site in MVC5 Using Resource File

This article provides an overview of localization of a site in ASP.NET MVC 5 using language-specific resource files.

When a user uses an English language as his preferred language, the default UI culture is en-us. If the user uses a French-based browser, its default UI culture is fr-ca. ASP.NET MVC 5 needs to recognize this UI culture and display its own language to the browser. This MVC 5 web site will implement this localization for English and French languages or any other language as below.

In this example I will explain how to localize the site in various languages using language-specific resource files.

Use the following procedure to create a sample of localizing a site:

  1. Open Visual Studio and select ASP.NET Web Application.

    Web Application

  2. Next Select MVC.

    Select MVC

  3. Add a Resource File In My Case named it ErrorMsg.resx.

    ErrorMsg

  4. Set the Access Modifier of the resource file to Public.

    resource file

  5. Add messages to the resource file as below:

    Add Messages in Resource

  6. Add another Resource File having values in another language. In my case I named it ErrorMsg.fr.resx. This resource file has messages in the French language.

    messages in French language

  7. Next do a change in the Web.config file as below.

    Web Config

  8. Right-click the Model and add a new item.

    Add New Item

  9. Add a class file named EmployeeModel.cs.
  10. Modify the code as below:
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.ComponentModel.DataAnnotations;  
    4. using System.Linq;  
    5. using System.Web;  
    6.   
    7.   
    8. namespace MVCDemo.Models  
    9. {  
    10.     public class EmployeeModel  
    11.     {  
    12.         [Required(ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "EmpName")]  
    13.         [RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "RegExEmpName")]  
    14.   
    15.         public string Name { getset; }  
    16.          [Required(ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "EmpEmail")]  
    17.          [RegularExpression(@"[\w-]+@([\w-]+\.)+[\w-]+", ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "RegExEmpMail")]          
    18.         public string Email { getset; }  
    19.         [Required(ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "Address")]  
    20.         public string Address { getset; }  
    21.         [Required(ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "Technology")]          
    22.         public string Technology { getset; }  
    23.          [Required(ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "Experience")]    
    24.          [RegularExpression(@"\d+(\.\d{1,2})?", ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "RegExEmpExperience")]     
    25.           
    26.         public decimal Experience { getset; }  
    27.          [Required(ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "ContactNo")]  
    28.          [RegularExpression(@"\d+", ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "RegExEmpContactNo")]            
    29.         public string ContactNo { getset; }  
    30.     }  

  11. Right-click the controller and add a new Controller.

    new controller

  12. Select MVC 5 Controller - Empty.

    MVC 5 Controller - Empty

  13. Add a name to the Controller as below EmployeeController.

    Add a name to Controller

  14. Modify the code of EmployeeController.cs as below:
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Web;  
    5. using System.Web.Mvc;  
    6.   
    7. namespace MVCDemo.Controllers  
    8. {  
    9.     public class EmployeeController : Controller  
    10.     {         
    11.         // GET: /Employee/  
    12.         public ActionResult Employee()  
    13.         {  
    14.             MVCDemo.Models.EmployeeModel empModel = new Models.EmployeeModel();  
    15.             return View(empModel);  
    16.         }  
    17.   
    18.         [HttpPost]  
    19.         public ActionResult Employee(MVCDemo.Models.EmployeeModel model)  
    20.         {  
    21.             if (ModelState.IsValid)  
    22.             {  
    23.                 //MVCDemo.Models.EmployeeModel empModel = new Models.EmployeeModel();  
    24.             }   
    25.             return View(model);  
    26.         }  
    27.     }  
  15. Right-click the view and add a view.

    add a view

  16. Name the view as Employee.cshtml.

  17. Modify The code of Employee.cshtml as below:
    1. @model MVCDemo.Models.EmployeeModel   
    2. @{  
    3.     ViewBag.Title = "Employee";  
    4. }   
    5. <h2>Employee</h2>       
    6. <form method="post">  
    7. @using (Html.BeginForm())  
    8. {  
    9.     @Html.AntiForgeryToken()  
    10.     @Html.ValidationSummary()  
    11.     <table>  
    12.         <tr>  
    13.             <td>Name:</td>  
    14.             <td>@Html.TextBox("Name") @Html.ValidationMessage("Name""*")</td>  
    15.         </tr>  
    16.         <tr>  
    17.             <td>Email:</td>  
    18.             <td>@Html.TextBox("Email") @Html.ValidationMessage("Email""*")</td>  
    19.         </tr>  
    20.         <tr>  
    21.             <td>Address:</td>  
    22.             <td>@Html.TextBox("Address")@Html.ValidationMessage("Address""*")</td>  
    23.         </tr>  
    24.         <tr>  
    25.             <td>Technology:</td>  
    26.             <td>@Html.TextBox("Technology")@Html.ValidationMessage("Technology""*")</td>  
    27.         </tr>  
    28.         <tr>  
    29.             <td>Experience:</td>  
    30.             <td>@Html.TextBox("Experience")@Html.ValidationMessage("Experience""*")</td>  
    31.         </tr>  
    32.         <tr>  
    33.   
    34.             <td>Contact No.: </td>  
    35.             <td>@Html.TextBox("ContactNo")@Html.ValidationMessage("ContactNo""*")</td>  
    36.         </tr>  
    37.         <tr>  
    38.             <td colspan="2"><input type="submit" value="Submit" /></td>  
    39.         </tr>  
    40.   
    41.     </table>  
    42. }   
    43. </form>   
    44. @section Scripts {  
    45. @Scripts.Render("~/Scripts/jquery.validate.js")  
    46. @Scripts.Render("~/Scripts/jquery.validate.unobtrusive.js")  
    47. @Scripts.Render("~/Scripts/MicrosoftAjax.debug.js")  
    48. @Scripts.Render("~/Scripts/MicrosoftMvcAjax.debug.js")  
    49. @Scripts.Render("~/Scripts/MicrosoftMvcValidation.debug.js")  
  18. Now click on Internet Explorer and run the program.

    View

  19. The UI will open as below:
  20. Click the submit button without making any entry in the some field of the form.

    Open

  21. Now go to the browser and change the language for Tool -> Internet Options.

    Internet Options

  22. Click the Add button.

    Add button

  23. Select the language depending on your resource file language and click ok.

    language

  24. Run you application and click the submit button.

    Run

Conclusion

In this article I have explained how to localize easily and properly a MVC 5 web site.