ASP.NET MVC应用程序中实现国际化(结合使用AngularJS)

我们无法预知未来的路，只得集中精力走好脚下的每一步。该发生的总会发生，不管你是否为此焦虑。向前走，向前看，生活就这么简单。每一个坚强的人，都有一颗柔软的心，摆正心态，温柔自相随，哭给自己听，笑给别人看，这就是所谓的人生。

---

Model层:

public partial class EmployeeInfo
    {
        public int EmpNo { get; set; }
        public string EmpName { get; set; }
        public decimal Salary { get; set; }
        public string DeptName { get; set; }
        public string Designation { get; set; }
    }

EmployeeInfoAPIController.cs控制器

  public class EmployeeInfoAPIController : ApiController
    {
        private ApplicationDBEntities db = new ApplicationDBEntities();

        // GET: api/EmployeeInfoAPI
        public IQueryable<EmployeeInfo> GetEmployeeInfoes()
        {
            return db.EmployeeInfoes;
        }

        // GET: api/EmployeeInfoAPI/5
        [ResponseType(typeof(EmployeeInfo))]
        public IHttpActionResult GetEmployeeInfo(int id)
        {
            EmployeeInfo employeeInfo = db.EmployeeInfoes.Find(id);
            if (employeeInfo == null)
            {
                return NotFound();
            }

            return Ok(employeeInfo);
        }

        // PUT: api/EmployeeInfoAPI/5
        [ResponseType(typeof(void))]
        public IHttpActionResult PutEmployeeInfo(int id, EmployeeInfo employeeInfo)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            if (id != employeeInfo.EmpNo)
            {
                return BadRequest();
            }

            db.Entry(employeeInfo).State = EntityState.Modified;

            try
            {
                db.SaveChanges();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!EmployeeInfoExists(id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return StatusCode(HttpStatusCode.NoContent);
        }

        // POST: api/EmployeeInfoAPI
        [ResponseType(typeof(EmployeeInfo))]
        public IHttpActionResult PostEmployeeInfo(EmployeeInfo employeeInfo)
        {
            if (!ModelState.IsValid)
            {
                return BadRequest(ModelState);
            }

            db.EmployeeInfoes.Add(employeeInfo);
            db.SaveChanges();

            return CreatedAtRoute("DefaultApi", new { id = employeeInfo.EmpNo }, employeeInfo);
        }

        // DELETE: api/EmployeeInfoAPI/5
        [ResponseType(typeof(EmployeeInfo))]
        public IHttpActionResult DeleteEmployeeInfo(int id)
        {
            EmployeeInfo employeeInfo = db.EmployeeInfoes.Find(id);
            if (employeeInfo == null)
            {
                return NotFound();
            }

            db.EmployeeInfoes.Remove(employeeInfo);
            db.SaveChanges();

            return Ok(employeeInfo);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }

        private bool EmployeeInfoExists(int id)
        {
            return db.EmployeeInfoes.Count(e => e.EmpNo == id) > 0;
        }
    }

EmployeeInfoMVCController.cs控制器

  public class EmployeeInfoMVCController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }

ResourceAPIController.cs控制器

  public class ResourceAPIController : ApiController
    {
        [HttpGet]
        [Route("api/accessresources")]
        public IHttpActionResult GetResourceStringsFromResources()
        {
            //1.   
            ResourceSet resources = MVCInternattional.ResourceManager.GetResourceSet(CultureInfo.CurrentUICulture, true, true);
            Dictionary<string, string> resDictionary = new Dictionary<string, string>();
            //2.
            foreach (DictionaryEntry resource in resources)
            {
                resDictionary.Add(resource.Key.ToString(), resource.Value.ToString());
            }
            //3.
            return Ok(resDictionary);
        }
    }

资源文件如图:

---

logic.js

//1.
var app = angular.module('appmodule', []);
//2.
app.service('serv', function ($http) {
    this.getData = function () {
        var response = $http.get('http://localhost:54733/api/EmployeeInfoAPI');
        return response;
    };
    this.post = function (emp) {
        var response = $http({
            url: 'http://localhost:54733/api/EmployeeInfoAPI',
            method: 'post',
            data: emp,
            datatype:'json',
            contenttype:'application/json;utf-8'
        });
        return response;
    };
    this.getResources = function () {
        var response = $http.get('http://localhost:54733/api/accessresources');
        return response;
    };
});

//3.
app.controller('ctrl', function ($scope, serv) {
    $scope.Employee = {
        EmpNo: 0,
        EmpName: '',
        Salary: 0,
        DeptName: '',
        Designation:''
    };

    $scope.resourcesData = {};

    $scope.Employees = [];
    $scope.Message = '';

    load();
    function load() {
        var promise = serv.getData();
        promise.then(function (resp) {
            $scope.Employees = resp.data;
            $scope.Message = '成功了...';
            getResources();

        }, function (err) {
            $scope.Message = '失败了...' + err.status;
        });
    };

    function getResources() {
        var promise = serv.getResources();
        promise.then(function (resp) {
            $scope.resourcesData = resp.data;
        }, function (err) {
            $scope.Message = '失败了...' + err.status;
        });
    };


    $scope.clear = function () {
        $scope.Employee.EmpNo = 0;
        $scope.Employee.EmpName = '';
        $scope.Employee.Salary = 0;
        $scope.Employee.DeptName = '';
        $scope.Employee.Designation = '';
    };

    $scope.save = function () {
        var promise = crudserv.post($scope.Employee);
        promise.then(function (resp) {
            $scope.Employee.EmpNo = resp.data.EmpNo;
            $scope.Message = '成功完成';
            loadData();
        }, function (err) {
            $scope.Message = '失败 ' + err.status;
        });
    };
});

EmployeeInfoMVC视图文件夹下Index.cshtml

@{
    ViewBag.Title = "Index";
}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/angular.min.js"></script>

<script src="~/MyScript/logic.js"></script>
<body ng-app="appmodule">
    <h2>{{resourcesData.EmployeeInformationLabel}}</h2>


    <table class="table table-striped table-bordered table-condensed" 
           ng-controller="ctrl">
        <tr>
            <td>
                <table class="table table-striped table-bordered table-condensed">
                    <tr>
                        <td>{{resourcesData.EmpNoLabel}}</td>
                        <td>
                            <input type="text" ng-model="Employee.EmpNo" />
                        </td>
                    </tr>
                    <tr>
                        <td>{{resourcesData.EmpNameLabel}}</td>
                        <td>
                            <input type="text" ng-model="Employee.EmpName" />
                        </td>
                    </tr>
                    <tr>
                        <td>{{resourcesData.SalaryLabel}}</td>
                        <td>
                            <input type="text" ng-model="Employee.Salary" />
                        </td>
                    </tr>
                    <tr>
                        <td>{{resourcesData.DeptNameLabel}}</td>
                        <td>
                            <input type="text" ng-model="Employee.DeptName" />
                        </td>
                    </tr>
                    <tr>
                        <td>{{resourcesData.DesignationLabel}}</td>
                        <td>
                            <input type="text" ng-model="Employee.Designation" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="button" value="{{resourcesData.ClearLabel}}" ng-click="clear()" />
                        </td>
                        <td>
                            <input type="button" value="{{resourcesData.SaveLabel}}" ng-click="save()" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table class="table table-striped table-bordered table-condensed">
                    <thead>
                        <tr>
                            <td>{{resourcesData.EmpNoLabel}}</td>
                            <td>{{resourcesData.EmpNameLabel}}</td>
                            <td>{{resourcesData.SalaryLabel}}</td>
                            <td>{{resourcesData.DeptNameLabel}}</td>
                            <td>{{resourcesData.DesignationLabel}}</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="Emp in Employees">
                            <td>{{Emp.EmpNo}}</td>
                            <td>{{Emp.EmpName}}</td>
                            <td>{{Emp.Salary |currency}}</td>
                            <td>{{Emp.DeptName}}</td>
                            <td>{{Emp.Designation}}</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
</body>

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title -我的ASP.NET应用程序</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - 我的ASP.NET应用程序</p>
        </footer>
    </div>
    @{
        var culture = HttpContext.Current.Request.UserLanguages[0].ToString();
    }

    <script src="~/Scripts/jquery-2.2.0.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="@Url.Content("~/Scripts/i18n/angular-locale_" + culture + ".js")"></script>
</body>
</html>

运行结果如图: