How to show Indian currency symbol in MVC WebGrid

₹ is the new Indian Rupee currency sign.it was presented to the public by the Government of India on 15 July 2010. When you try to show ₹ currnecy symbol using Culture and UCulture, you get the default currency symbol ‘Rs’ not ₹ then you need to set customize the symbol. Same problem occurs when you want to show this symbol in WebGrid in MVC projects.

Suppose you have a WebGrid that shows the employee data including the Salary and we need to show ₹ symbol with the Salary of each employee in WebGrid. You could do so by using the following code samples.

Indian currency symbol in mvc

Figure 1: Indian Currency symbol in MVC WebGrid

Assume you have a model like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MvcApplication1.Models
{
    public class Employee
    {
        public List<SelectListItem> Department_List { get; set; }
        public List<Employee> Employee_Grid { get; set; }
        public int EmployeeId { get; set; }
        public string EmpName { get; set; }
        public Nullable<int> Age { get; set; }
        public Nullable<decimal> Salary { get; set; }
        public Nullable<int> Department_id { get; set; }
        public string Department { get; set; }
    }
 
}

On the view i am using the unicode code ₹ to display the ₹ with the salary. For it i am using the format templated razor delegate. You can use format for display any htmlhelper element. In the below code i am using the htmlstring(string val) element that is constructing by ₹ and Salary value. See below:
grid1.Column("EmpName",format: (item) => new HtmlString("₹ " + Convert.ToString( item.Salary)), header: "Notes")))

The full code is:

@model MvcApplication1.Models.Employee
@{
    ViewBag.Title = "Index";
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
 
<table>
    <tr>
        <td>
            <div id="EmployeeViewGrid">
            @{  
                var grid1 = new WebGrid(source: Model.Employee_Grid, canPage: true, rowsPerPage: 5, ajaxUpdateContainerId: "gridContent");
 
        @grid1.GetHtml(mode: WebGridPagerModes.All, tableStyle: "webGrid",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            selectedRowStyle: "select",
            rowStyle: "description",
            htmlAttributes: new { id = "positionGrid" },
            fillEmptyRows: false,
 
            columns: grid1.Columns(
 
             grid1.Column("EmployeeId", header: "EmployeeId"),
             grid1.Column("EmpName", header: "EmpName"),
             grid1.Column("Age", header: "Age"),
             grid1.Column("Salary", header: "Salary"),
             grid1.Column("EmpName",format: (item) => new HtmlString("&#x20B9; " + Convert.ToString( item.Salary)), header: "Notes")))
            }
            </div>   
        </td>
    </tr>
</table>

And controller is :

 public class EmployeeController : Controller
    {
        private EmployeeDatabaseEntities1 db = new EmployeeDatabaseEntities1();
 
        //
        // GET: /Employee/
 
        public ActionResult Index()
        {
 
            Employee _model = new Employee();
 
 
            var qq = (from e in db.tbl_Employee
                      select new Employee
                      {
                          Department_id = e.Department_id,
                          EmployeeId = e.EmployeeId,
                          EmpName = e.EmpName,
                          Age = e.Age,
                          Salary = e.Salary
                      }).ToList();
 
            _model.Employee_Grid = qq;
            return View("Index", _model);
        }
}