MVC + Web API + AngularJs 搭建简单的 CURD 框架

　　GitHub 地址：

简介

　　AngularJS[1] 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

　　布局页的引用

        @*angularJs*@            @*angularJs 自定义的配置*@                @*angularJs 自定义的控制器*@

　　app.js

var app = angular.module('myApp', ['ngRoute', 'demoService', ]);

　　app-route.js

//路由配置app.config(['$routeProvider', function ($routeProvider) {    $routeProvider    .when('/', { templateUrl: '../Scripts/core/views/demo/index.html', controller: 'demoController' })    .when('/home', { templateUrl: '../Scripts/core/views/demo/index.html', controller: 'demoController' })    .when('/add', { templateUrl: '../Scripts/core/views/demo/edit.html', controller: 'demoEditController' })    .when('/edit/:id', { templateUrl: '../Scripts/core/views/demo/edit.html', controller: 'demoEditController' })    .when('/error', { templateUrl: '../Scripts/Views/Error.html', controller: 'errorController' })    .otherwise({ redirectTo: '/error' });}]);

　　app-service.js

//服务var demoService = angular.module('demoService', []);//请求服务demoService.factory('requestService', function ($http, $q) {    var params = {        method: '',        url: '',        headers: { 'Content-Type': 'application/json' },        data: {}    }    var request = {        //增        add: function (data) {            params.method = "post";            params.url = "../api/demo/add";            params.data = data;            return requestService($http, $q, params);        },        //删        del: function (id) {            params.method = "delete";            params.url = "../api/demo/del?id=" + id;            return requestService($http, $q, params);        },        //改        update: function (data) {            params.method = "put";            params.url = "../api/demo/update";            params.data = data;            return requestService($http, $q, params);        },        //查        get: function (id) {            params.method = "get";            params.url = "../api/demo/get?id=" + id;            return requestService($http, $q, params);        },        //分页        details: function (key, pageIndex) {            params.method = "get";            params.url = "../api/demo/details?key=" + key + "&pageIndex=" + pageIndex;            return requestService($http, $q, params);        }    };    return request;});//请求服务function requestService($http, $q, request) {    return $http(request);};

　　demoController.js

app.controller('demoController', function ($scope, $http, $location, $routeParams, requestService) {    console.log('demoController');    var currentPageIndex = 1;    $scope.list = [];    //删除    $scope.del = function (id) {        requestService.del(id)            .then(function (result) {                var data = result.data;                console.log(data);            });    };    $scope.demoKey = $scope.demoKey ? $scope.demoKey : "";    $scope.details = function (key, pageIndex) {        requestService.details(key, pageIndex)            .then(function (result) {                var data = result.data;                $scope.list = data;            });        console.log($scope.list);    };    $scope.details("", currentPageIndex);    //查询    $scope.search = function () {        $scope.list = [];        $scope.details($scope.demoKey, currentPageIndex);    };    //新增    $scope.add = function () {        $location.url('/add');    };    //编辑    $scope.edit = function (id) {        $location.url('/edit/' + id);    };    //下一页    $scope.nextPage = function () {        currentPageIndex++;        $scope.details($scope.demoKey, currentPageIndex);    };    //上一页    $scope.prePage = function () {        if (currentPageIndex > 1) {            currentPageIndex--;        }        $scope.details($scope.demoKey, currentPageIndex);    };});//demoEditControllerapp.controller('demoEditController',    function ($scope, $http, $location, $routeParams, requestService) {        console.log('demoEditController');        $scope.demo = {            Id: '',            Name: '',            Price: 0        };        var id = $routeParams.id;        $scope.get = function () {            requestService.get(id).then(function (result) {                console.log(result);                $scope.demo = result.data;            });        }        if (id != null) { $scope.get(); }        $scope.save = function () {            if (id) {                $scope.demo.Id = id;                requestService.update($scope.demo).then(function (result) {                    console.log(result);                    var data = result.data;                    console.log("更新成功");                    console.log(data);                });            } else {                requestService.add($scope.demo).then(function (result) {                    console.log(result);                    var data = result.data;                    console.log("添加成功");                    console.log(data);                });            };        };    });

　　index.html


         
      
     
         
              
                   
        {
   {item.Name}}
            
        单价：￥{
   {item.Price}}
            
        删除            
        编辑

　　edit.html

　　API：Demo 控制器

#regionusing System;using System.Collections.Generic;using System.Linq;using System.Web.Http;using Wen.MvcSinglePage.Models.Api;#endregionnamespace Wen.MvcSinglePage.Controllers.Api{    public class DemoController : ApiController    {        private IList
      
        _demos = new List
       
        ();        public DemoController()        {            InitDemo();        }        /// 
                /// 添加        /// 
        /// 
                /// 
                [HttpPost]        public DemoViewModel Add([FromBody] DemoViewModel demo)        {            _demos.Add(demo);            return demo;        }        /// 
                /// 获取        /// 
        /// 
                [HttpGet]        public DemoViewModel Get(int id)        {            return _demos.FirstOrDefault(x => x.Id == id);        }        /// 
                /// 删除        /// 
        /// 
                /// 
                [HttpDelete]        public int Del(int id = 0)        {            var demo = _demos.FirstOrDefault(x => x.Id == id);            if (demo != null)                _demos.Remove(demo);            return id;        }        /// 
                /// 更新        /// 
        /// 
                /// 
                [HttpPut]        public DemoViewModel Update([FromBody] DemoViewModel demo)        {            var entity = _demos.FirstOrDefault(x => x.Id == demo.Id);            if (entity == null) return demo;            entity.Name = demo.Name;            entity.Price = demo.Price;            return demo;        }        /// 
                /// 详情（分页）        /// 
        /// 
                /// 
                /// 
                [HttpGet]        public IEnumerable
        
          Details(string key, int pageIndex)        {            const int pageSize = 5;            if (!string.IsNullOrEmpty(key))            {                _demos = _demos.Where(x => x.Name.Contains(key)).ToList();            }            return _demos.Skip(pageSize * (pageIndex - 1)).Take(pageSize);        }        /// 
                 /// 初始化 Demo        /// 
        private void InitDemo()        {            var random = new Random();            for (var i = 0; i < 100; i++)            {                _demos.Add(new DemoViewModel                {                    Id = i,                    Name = $"商品：{i}",                    Price = random.Next()                });            }        }    }}

DemoController.cs

GitHub 地址：

【博主】反骨仔

【出处】http://www.cnblogs.com/liqingwen/p/6713612.html

【参考】http://www.cnblogs.com/wolf-sun/p/5279175.html

转载于:https://www.cnblogs.com/liqingwen/p/6713612.html

你可能感兴趣的文章