Asp.mvc ~ 使用AngularJs构建SPA

来源：互联网发布：夜神模拟器for mac 编辑：程序博客网时间：2024/06/06 04:01

Asp.mvc ~ 使用AngularJs构建SPA

通常在web应用中，需要在一个页面完成多种功能（增删改查等），在这些操作中，常常需要进行对表单的数据初始化，数据提交，也就是从服务器上获取数据之后绑定到表单上，在提交数据时将每个表单中的数据赋值给我们数据模型。当我们数据模型发生改变，就又需要我们通过DOM操作来对页面进行重新的渲染。这是一个比较枯燥乏味的过程，大量的DOM操作也会使得我们的HTML页面代码难以维护，所以在此我们可以借助一些前端的 MVC 框架来完成这一系列操作，简化我们对数据与视图之间的转换过程。

Angular.js

Angular.js 是 Google 团队开发的 JavaScript 框架，它的功能十分强大，包含数据绑定，服务器间通信，视图管理，历史管理，定位，验证等。 Angular.js 本身就是一个前端的 MVC 框架，其中也包含控制器，模型，视图，路由等概念。

下面来看看如何使用 Angular.js在 asp.net mvc 项目中构建 Single Page Application, 这里只是单单使用 Angular.js 来完成数据绑定，也只是使用了 Angular.js 的一小部分功能。

新建 Web App : SPASample

在 Nuget 控制台中键入以下命令获取 Angularjs 开发包：

Install-Package Angulalrjs

在这里就写一个用户管理作为例子

新建 UserModel:

using System;using System.ComponentModel.DataAnnotations;namespace SPASample.Models{    public class UserModel    {        public string Id { get; set; }        [Required]        public string LoginName { get; set; }        [Required]        public string Password { get; set; }        [Required]        public string RealName { get; set; }        public string Birthday { get; set; }        public string Phone { get; set; }        public string Address { get; set; }        public string CreatedByUser { get; set; }        public string CreatedTime { get; set; }    }}

这里的 UserModel 作为我们数据传输的载体，由于使用的是静态数据，本次例子主要是为了展示 Angular.js 构建 SPA 的能力，所以侧重点便不在此。

新建 UserController :

using SPASample.Models;using System;using System.Collections.Generic;using System.Web.Mvc;using System.Linq;namespace SPASample.Controllers{    public class UserController : Controller    {        private static List<UserModel> _lstUsers;        static UserController()        {            _lstUsers = new List<UserModel>();            _lstUsers.Add(new UserModel            {                Id = Guid.NewGuid().ToString("N"),                LoginName = "cg001",                Password = "123456",                RealName = "Tom",                Birthday = "2015-01-01",                Phone = "13511111111",                Address = "xxxxxxx",                CreatedByUser = "System",                CreatedTime = DateTime.Now.ToString("yyyy-MM-dd@HH:mm:ss")            });            _lstUsers.Add(new UserModel            {                Id = Guid.NewGuid().ToString("N"),                LoginName = "cg002",                Password = "123456",                RealName = "Jack",                Birthday = "2015-02-01",                Phone = "13511111111",                Address = "xxxxxxx",                CreatedByUser = "System",                CreatedTime = DateTime.Now.ToString("yyyy-MM-dd@HH:mm:ss")            });            _lstUsers.Add(new UserModel            {                Id = Guid.NewGuid().ToString("N"),                LoginName = "cg003",                Password = "123456",                RealName = "Anne",                Birthday = "2015-01-02",                Phone = "13511111111",                Address = "xxxxxxx",                CreatedByUser = "System",                CreatedTime = DateTime.Now.ToString("yyyy-MM-dd@HH:mm:ss")            });        }        [HttpGet]        public ActionResult Index()        {            return View();        }        [HttpGet]        public ActionResult LoadUsers()        {            return Json(_lstUsers, JsonRequestBehavior.AllowGet);        }        [HttpPost]        public ActionResult AddOrUpdateUser(UserModel model)        {            if (ModelState.IsValid)            {                var user = _lstUsers.SingleOrDefault(x => x.Id == model.Id);                if (user == null)                {                    model.Id = Guid.NewGuid().ToString("N");                    model.CreatedTime = DateTime.Now.ToString("yyyy-MM-dd@HH:mm:ss");                    //这里可根据权限管理模块拉取当前操作人                    model.CreatedByUser = "System";                    _lstUsers.Add(model);                    return Json(new { status = "success", msg = "新增成功" }, JsonRequestBehavior.DenyGet);                }                _lstUsers.Remove(user);                _lstUsers.Add(model);                return Json(new { status = "success", msg = "更新成功" }, JsonRequestBehavior.DenyGet);            }            return Json(new { status = "error", msg = "更新失败， 请检查必须字段是否填写" }, JsonRequestBehavior.DenyGet);        }        [HttpDelete]        public ActionResult DeleteUser(string id)         {            var user = _lstUsers.SingleOrDefault(x => x.Id == id);            if (user == null)            {                return Json(new { status = "error", msg = "参数错误" }, JsonRequestBehavior.DenyGet);            }            _lstUsers.Remove(user);            return Json(new { status = "success", msg = "删除成功" }, JsonRequestBehavior.DenyGet);        }    }}

在 UserController 中新建一个 Index 的 Action, 添加 Index 视图来包含用户信息的列表，新增，编辑，删除操作。

其它几个 Action 也不复杂，主要作用分别为：

LoadUsers : 加载用户数据
AddOrUpdateUser：新增或更新用户数据
DeleteUser ：删除用户数据

新建 app.js

var app = angular.module('spa', []);app.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {    $scope.users = [];    $scope.editUser = {};    $scope.loadUsers = function () {        var url = '/User/LoadUsers';        $http.get(url, [])        .success(function (data, status, headers, config) {            $scope.users = data;        })        .error(function (data, status, headers, config) {        });    };    $scope.addUser = function ($index) {        $scope.editUser = {};    };    $scope.updateUser = function ($index) {        $scope.editUser = $scope.users[$index];    };    $scope.saveUser = function () {        var url = '/User/AddOrUpdateUser';        $http.post(url, $scope.editUser, [])        .success(function (data, status, headers, config) {            $scope.loadUsers();        })        .error(function (data, status, headers, config) {        });    };    $scope.deleteUser = function ($index) {        if (confirm('是否确定删除？')) {            var user = $scope.users[$index];            var url = '/User/DeleteUser?id=' + user.Id;            $http.delete(url, [])            .success(function (data, status, headers, config) {                $scope.loadUsers();            })            .error(function (data, status, headers, config) {            });        }    };    $scope.loadUsers();}]);

下面来分析这段代码：

var app = angular.module('spa', []);

使用 angular 对象创建 spa 模块

app.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {}]);

使用所创建的模块来添加控制器，并向控制器中注入 http这个service,这个服务主要的作用是为了实现客户端与服务端的通信,refer:[http://docs.angularjs.cn/api/ng/service/http#](

新建 Index.cshtml

@{ViewBag.Title = "使用 Angular.js 构建 Single Page Application";}<div ng-app="spa">    <div ng-controller="userCtrl">        <table class="table table-bordered table-condensed table-hover table-responsive table-striped">            <thead>                <tr>                    <th>序号</th>                    <th>编号</th>                    <th>姓名</th>                    <th>生日</th>                    <th>手机</th>                    <th>地址</th>                    <th>操作</th>                </tr>            </thead>            <tbody ng-repeat="user in users">                <tr>                    <td>{{ $index + 1 }}</td>                    <td>{{ user.Id }}</td>                    <td>{{ user.RealName }}</td>                    <td>{{ user.Birthday }}</td>                    <td>{{ user.Phone }}</td>                    <td>{{ user.Address }}</td>                    <td>                        <a ng-click="updateUser($index)" href="#" data-toggle="modal" data-target="#manageUser" class="btn btn-primary btn-sm">                            <i class="glyphicon glyphicon-edit"></i>                            编辑                        </a>                        <a ng-click="deleteUser($index)" class="btn btn-danger btn-sm">                            <i class="glyphicon glyphicon-trash"></i>                            删除                        </a>                    </td>                </tr>            </tbody>            <tbody>                <tr>                    <td colspan="7">                        <a ng-click="addUser()" href="#" data-toggle="modal" data-target="#manageUser" class="btn btn-primary btn-sm center-block" style="width:80px; display:block;">                            <i class="glyphicon glyphicon-plus"></i>                            新增                        </a>                    </td>                </tr>            </tbody>        </table>        <div class="modal fade" id="manageUser" tabindex="-1" role="dialog"             aria-labelledby="myModalLabel" aria-hidden="true">            <div class="modal-dialog">                <div class="modal-content">                    <div class="modal-header">                        <button type="button" class="close"                                data-dismiss="modal" aria-hidden="true">                            &times;                        </button>                        <h4 class="modal-title" id="myModalLabel">                            用户管理                        </h4>                    </div>                    <div class="modal-body">                        <div class="form-horizontal">                            <input type="hidden" ng-model="editUser.Id" />                            <div class="form-group">                                <label class="col-sm-2 control-label">登录名</label>                                <div class="col-sm-6">                                    <input type="text" class="form-control" ng-model="editUser.LoginName" />                                </div>                            </div>                            <div class="form-group">                                <label class="col-sm-2 control-label">密码</label>                                <div class="col-sm-6">                                    <input type="text" class="form-control" ng-model="editUser.Password" />                                </div>                            </div>                            <div class="form-group">                                <label class="col-sm-2 control-label">姓名</label>                                <div class="col-sm-6">                                    <input type="text" class="form-control" ng-model="editUser.RealName" />                                </div>                            </div>                            <div class="form-group">                                <label class="col-sm-2 control-label">生日</label>                                <div class="col-sm-6">                                    <input type="text" class="form-control" ng-model="editUser.Birthday" />                                </div>                            </div>                            <div class="form-group">                                <label class="col-sm-2 control-label">手机号码</label>                                <div class="col-sm-6">                                    <input type="text" class="form-control" ng-model="editUser.Phone" />                                </div>                            </div>                            <div class="form-group">                                <label class="col-sm-2 control-label">地址</label>                                <div class="col-sm-6">                                    <input type="text" class="form-control" ng-model="editUser.Address" />                                </div>                            </div>                        </div>                    </div>                    <div class="modal-footer">                        <button type="button" class="btn btn-default" data-dismiss="modal">                            关闭                        </button>                        <button type="button" ng-click="saveUser()" data-dismiss="modal" class="btn btn-primary">                            保存                        </button>                    </div>                </div>            </div>        </div>    </div></div><script src="~/Scripts/angularjs/angular.min.js"></script><script src="~/Scripts/application/app.js"></script>

这个视图可分为两个部分：

Table 这部分主要是包含数据的显示，使用新增，编辑按钮来更改 $scope.editUser 来完成对当前操作对象的控制，后面只需要对 Modal 中的保存按钮进行操作即可。
Modal 这部分主要包含数据的保存，主要是在各个空间中对用户信息各个字段的绑定上，以及保存按钮对当前操作用户的信息保存。

总结

在以上例子中，我们可以清晰的发现，使用 Angular.js 来完成对 Single Page Application 的构建是非常容易的，但是我们只是仅仅的使用到 Angular.js 的数据绑定，依赖注入等很少的一部分内容。后面我会继续研究使用 Angular.js SPA Template 来构建 SPA，里面会用到较为完整的 Angular.js 技能知识点。代码会在评论中献出~

1 0