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.
   
   
   
   
2. Next Select MVC.
   
   
   
   
3. Add a Resource File In My Case named it ErrorMsg.resx.
   
   
   
   
4. Set the Access Modifier of the resource file to Public.
   
   
   
   
5. Add messages to the resource file as below:
   
   
   
   
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.
   
   
   
   
7. Next do a change in the Web.config file as below.
   
   
   
   
8. Right-click the Model and add a new item.
   
   
   
   
9. Add a class file named EmployeeModel.cs.
10. Modify the code as below:
    

    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.Linq;
    using System.Web;
    
    
    namespace MVCDemo.Models
    {
        public class EmployeeModel
        {
            [Required(ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "EmpName")]
            [RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "RegExEmpName")]
    
            public string Name { get; set; }
             [Required(ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "EmpEmail")]
             [RegularExpression(@"[\w-]+@([\w-]+\.)+[\w-]+", ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "RegExEmpMail")]
            public string Email { get; set; }
            [Required(ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "Address")]
            public string Address { get; set; }
            [Required(ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "Technology")]
            public string Technology { get; set; }
             [Required(ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "Experience")]
             [RegularExpression(@"\d+(\.\d{1,2})?", ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "RegExEmpExperience")]
    
            public decimal Experience { get; set; }
             [Required(ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "ContactNo")]
             [RegularExpression(@"\d+", ErrorMessageResourceType = typeof(ERRORMSG), ErrorMessageResourceName = "RegExEmpContactNo")]
            public string ContactNo { get; set; }
        }
    }

11. Right-click the controller and add a new Controller.
    
    
    
    
12. Select MVC 5 Controller - Empty.
    
    
    
    
13. Add a name to the Controller as below EmployeeController.
    
    
    
    
14. Modify the code of EmployeeController.cs as below:
    

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    
    namespace MVCDemo.Controllers
    {
        public class EmployeeController : Controller
        {
            // GET: /Employee/
            public ActionResult Employee()
            {
                MVCDemo.Models.EmployeeModel empModel = new Models.EmployeeModel();
                return View(empModel);
            }
    
            [HttpPost]
            public ActionResult Employee(MVCDemo.Models.EmployeeModel model)
            {
                if (ModelState.IsValid)
                {
                    //MVCDemo.Models.EmployeeModel empModel = new Models.EmployeeModel();
                }
                return View(model);
            }
        }
    }

15. Right-click the view and add a view.
    
    
    
    
16. Name the view as Employee.cshtml.
    
    
17. Modify The code of Employee.cshtml as below:
    

    @model MVCDemo.Models.EmployeeModel
    @{
        ViewBag.Title = "Employee";
    }
    <h2>Employee</h2>
    <form method="post">
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary()
        <table>
            <tr>
                <td>Name:</td>
                <td>@Html.TextBox("Name") @Html.ValidationMessage("Name", "*")</td>
            </tr>
            <tr>
                <td>Email:</td>
                <td>@Html.TextBox("Email") @Html.ValidationMessage("Email", "*")</td>
            </tr>
            <tr>
                <td>Address:</td>
                <td>@Html.TextBox("Address")@Html.ValidationMessage("Address", "*")</td>
            </tr>
            <tr>
                <td>Technology:</td>
                <td>@Html.TextBox("Technology")@Html.ValidationMessage("Technology", "*")</td>
            </tr>
            <tr>
                <td>Experience:</td>
                <td>@Html.TextBox("Experience")@Html.ValidationMessage("Experience", "*")</td>
            </tr>
            <tr>
    
                <td>Contact No.: </td>
                <td>@Html.TextBox("ContactNo")@Html.ValidationMessage("ContactNo", "*")</td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="Submit" /></td>
            </tr>
    
        </table>
    }
    </form>
    @section Scripts {
    @Scripts.Render("~/Scripts/jquery.validate.js")
    @Scripts.Render("~/Scripts/jquery.validate.unobtrusive.js")
    @Scripts.Render("~/Scripts/MicrosoftAjax.debug.js")
    @Scripts.Render("~/Scripts/MicrosoftMvcAjax.debug.js")
    @Scripts.Render("~/Scripts/MicrosoftMvcValidation.debug.js")
    }

18. Now click on Internet Explorer and run the program.
    
    
    
    
19. The UI will open as below:
    
20. Click the submit button without making any entry in the some field of the form.
    
    
    
    
21. Now go to the browser and change the language for Tool -> Internet Options.
    
    
    
    
22. Click the Add button.
    
    
    
    
23. Select the language depending on your resource file language and click ok.
    
    
    
    
24. Run you application and click the submit button.
    
    
    

Conclusion

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