MVC5使用Angular.Js实现Crud

小咪咪 2021-06-26 16:06 379阅读 0赞

CelularModel.cs

  1. using System.ComponentModel.DataAnnotations;
  3. namespace Angular.App.Data.EntityConfig
  4. {
  5.     public class CelularModel
  6.     {
  7.         public int Id { get; set; }
  8.         [Required(ErrorMessage = "填写品牌领域")]
  9.         public string Marca { get; set; }
  10.         public string Modelo { get; set; }
  11.         public string Cor { get; set; }
  12.         public string TipoChip { get; set; }
  13.         public string MemoriaInterna { get; set; }
  15.     }
  16. }

CelularRepository.cs

  1. using Angular.App.Data.EntityConfig;
  2. using Dapper;
  3. using System;
  4. using System.Collections.Generic;
  5. using System.Data.Entity;
  6. using System.Linq;
  8. namespace Angular.App.Data.Repository
  9. {
  10.     public class CelularRepository
  11.     {
  12.         private readonly DataContext _context = new DataContext();
  14.         //获取芯片类型
  15.         public CelularModel ObterPorTipoChip(string tipoChip)
  16.         {
  17.             var sql = @"select * from celulares c" + "Where c.tipochip = @tipoChip";
  19.             using (var cn = _context.Database.Connection)
  20.             {
  21.                 cn.Open();
  22.                 var cliente = cn.Query<CelularModel>(sql);
  23.                 return cliente.FirstOrDefault();
  24.             }
  25.         }
  27.         //按品牌获取
  28.         public CelularModel ObterPorMarca(string marca)
  29.         {
  30.             var sql = @"select * from celulares c" + "Where c.marca = @marca";
  32.             using (var cn = _context.Database.Connection)
  33.             {
  34.                 cn.Open();
  35.                 var cliente = cn.Query<CelularModel>(sql);
  36.                 return cliente.FirstOrDefault();
  37.             }
  38.         }
  40.         //由Id
  41.         public CelularModel ObterPorId(int id)
  42.         {
  43.             var sql = @"select * from celulares c " + "Where c.id = @id";
  45.             using (var cn = _context.Database.Connection)
  46.             {
  47.                 cn.Open();
  48.                 var cliente = cn.Query<CelularModel>(sql, new { id = id });
  49.                 return cliente.FirstOrDefault();
  50.             }
  51.         }
  53.         public IQueryable<CelularModel> ObterTodos()
  54.         {
  55.             return _context.Celular;
  56.         }
  58.         //更新
  59.         public void Atualizar(CelularModel celular)
  60.         {
  61.             _context.Entry(celular).State = EntityState.Modified;
  62.             _context.SaveChanges();
  63.         }
  65.         //添加
  66.         public void Incluir(CelularModel celular)
  67.         {
  68.             _context.Celular.Add(celular);
  69.             _context.SaveChanges();
  70.         }
  72.         //删除
  73.         public void Excluir(int id)
  74.         {
  75.             _context.Celular.Remove(_context.Celular.Find(id));
  76.             _context.SaveChanges();
  77.         }
  79.         public void Dispose()
  80.         {
  81.             _context.Dispose();
  82.             GC.SuppressFinalize(this);
  83.         }
  84.     }
  85. }

ClienteService.cs

  1. using Angular.App.Data.EntityConfig;
  2. using Angular.App.Data.Repository;
  3. using System;
  4. using System.Collections.Generic;
  5. using System.Linq;
  7. namespace Angular.App.Application
  8. {
  9.     public class ClienteService
  10.     {
  11.         private CelularRepository _repository = new CelularRepository();
  13.         public CelularModel ObterPorTipoChip(string tipoChip)
  14.         {
  15.             return _repository.ObterPorTipoChip(tipoChip);
  16.         }
  18.         public CelularModel ObterPorId(int id)
  19.         {
  20.             return _repository.ObterPorId(id);
  21.         }
  23.         public IQueryable<CelularModel> ObterTodos()
  24.         {
  25.             return _repository.ObterTodos();
  26.         }
  28.         public void Atualizar(CelularModel celular)
  29.         {
  30.             _repository.Atualizar(celular);
  31.         }
  33.         public void Incluir(CelularModel celular)
  34.         {
  35.             _repository.Incluir(celular);
  36.         }
  38.         public void Excluir(int id)
  39.         {
  40.             _repository.Excluir(id);
  41.         }
  43.         public void Dispose()
  44.         {
  45.             _repository.Dispose();
  46.             GC.SuppressFinalize(this);
  47.         }
  49.     }
  50. }

DataContext.cs

  1. using System.Data.Entity;
  2. using System.Data.Entity.ModelConfiguration.Conventions;
  3. using Angular.App.Data.EntityConfig;
  5. namespace Angular.App.Data
  6. {
  7.     public class DataContext : DbContext
  8.     {
  9.         public DataContext()
  10.             : base("DefaultConnection")
  11.         {
  13.         }
  15.         public DbSet<CelularModel> Celular { get; set; }
  17.         protected override void OnModelCreating(DbModelBuilder modelBuilder)
  18.         {
  19.             modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
  20.             modelBuilder.Conventions.Remove<OneToManyCascadeDeleteConvention>();
  21.             modelBuilder.Conventions.Remove<ManyToManyCascadeDeleteConvention>();
  23.             modelBuilder.Configurations.Add(new CelularConfiguration());
  24.         }
  25.     }
  26. }

CelularConfiguration.cs

  1. using System.Data.Entity.ModelConfiguration;
  3. namespace Angular.App.Data.EntityConfig
  4. {
  5.     public class CelularConfiguration: EntityTypeConfiguration<CelularModel>
  6.     {
  7.         public CelularConfiguration()
  8.         {
  9.             HasKey(c => c.Id);
  10.             Property(c => c.Marca).IsRequired().HasMaxLength(50);
  11.             Property(c => c.Modelo).IsRequired().HasMaxLength(50);
  12.             Property(c => c.Cor).IsRequired().HasMaxLength(30);
  13.             Property(c => c.TipoChip).IsRequired().HasMaxLength(30);
  14.             Property(c => c.MemoriaInterna).IsRequired().HasMaxLength(3);
  16.             ToTable("Celulares");
  17.         }
  18.     }
  19. }

CelularController.cs

  1. using Angular.App.Application;
  2. using Angular.App.Data.EntityConfig;
  3. using System;
  4. using System.Collections.Generic;
  5. using System.Linq;
  6. using System.Net;
  7. using System.Net.Http;
  8. using System.Web.Http;
  10. namespace Angular.App.UI.Controllers
  11. {
  12.     [RoutePrefix("api/v1/public")]
  13.     public class CelularController : ApiController
  14.     {
  15.         private ClienteService _db = new ClienteService();
  17.         [HttpGet]
  18.         [Route("celulares")]
  19.         //获取所有手机
  20.         public IQueryable<CelularModel> ObterTodosCelulares()
  21.         {
  22.             return _db.ObterTodos();
  23.         }
  25.         [HttpGet]
  26.         [Route("celular/{id:int}")]
  28.         //通过ID获取手机
  29.         public HttpResponseMessage ObterCelularPorId(int id)
  30.         {
  31.             if (id <= 0)
  32.                 return Request.CreateResponse(HttpStatusCode.BadRequest);
  34.             return Request.CreateResponse(HttpStatusCode.OK, _db.ObterPorId(id));
  35.         }
  37.         [HttpPut]
  38.         [Route("putCelular")]
  39.         //更新手机
  40.         public HttpResponseMessage AtualizarCelular(CelularModel celular)
  41.         {
  42.             if (celular == null)
  43.                 return Request.CreateResponse(HttpStatusCode.BadRequest);
  45.             _db.Atualizar(celular);
  47.             return Request.CreateResponse(HttpStatusCode.OK);
  48.         }
  50.         [HttpPost]
  51.         [Route("postCelular")]
  52.         //添加手机
  53.         public HttpResponseMessage AdicionarCelular(CelularModel celular)
  54.         {
  55.             if (celular == null)
  56.                 return Request.CreateResponse(HttpStatusCode.BadRequest);
  58.             _db.Incluir(celular);
  60.             return Request.CreateResponse(HttpStatusCode.OK);
  61.         }
  63.         [HttpDelete]
  64.         [Route("deleteCelular/{id:int}")]
  66.         //删除手机
  67.         public HttpResponseMessage RemoverCelular(int id)
  68.         {
  69.             if (id <= 0)
  70.                 return Request.CreateResponse(HttpStatusCode.BadRequest);
  72.             _db.Excluir(id);
  73.             return Request.CreateResponse(HttpStatusCode.OK);
  74.         }
  75.     }
  76. }

HomeController.cs

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  7. namespace Angular.App.UI.Controllers
  8. {
  9.     public class HomeController : Controller
  10.     {
  11.         public ActionResult Index()
  12.         {
  13.             return View();
  14.         }
  16.     }
  17. }

Index.cshtml

  1. @{ ViewBag.Title = "Home Page"; } <div ng-controller="crudController"> <div class="divList"> <p><b><i>所有的手机</i></b></p> <table class="table table-hover table-responsive"> <tr> <td><b>Id</b></td> <td><b>品牌</b></td> <td><b>型号</b></td> <td><b>颜色</b></td> <td><b>芯片</b></td> <td><b>内存</b></td> </tr> <tbody> <tr ng-repeat="celular in celulares"> <td>{ { celular.Id}}</td> <td>{ { celular.Marca}}</td> <td>{ { celular.Modelo}}</td> <td>{ { celular.Cor}}</td> <td>{ { celular.TipoChip}}</td> <td>{ { celular.MemoriaInterna}}</td> <td> <span ng-click="obterCelularPorId(celular)" class="btn btn-primary">修改</span> <span ng-click="removerCelular(celular)" class="btn btn-danger">清除</span> </td> </tr> </tbody> </table> </div> <span ng-click="incluirCelularDiv()" class="btn btn-default">添加手机</span> <div ng-show="divCelular"> <p class="divHead"></p> <table class="table"> <tr> <td><b><i>{ { Acao}}手机</i></b></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><b>Id</b></td> <td> <input type="text" disabled="disabled" ng-model="celularId" class="form-control" /> </td> <td><b>品牌</b></td> <td> <input type="text" ng-model="Marca" class="form-control" /> </td> </tr> <tr> <td><b>型号</b></td> <td> <input type="text" ng-model="Modelo" class="form-control" /> </td> <td><b>颜色</b></td> <td> <input type="text" ng-model="Cor" class="form-control" /> </td> </tr> <tr> <td><b>内存</b></td> <td> <input type="text" ng-model="MemoriaInterna" class="form-control" /> </td> <td><b>芯片类型</b></td> <td> <input type="text" ng-model="TipoChip" class="form-control" /> </td> </tr> <tr> <td></td> <td> <input type="button" class="btn btn-default" value="保存" ng-click="AdicionarAtualizarCelular()" /> <input type="button" class="btn btn-danger" value="取消" ng-click="Cancelar()" /> </td> </tr> </table> </div> </div> <script src="~/Scripts/angular.js"></script> <script src="~/Scripts/toastr.js"></script> <script type="text/javascript"> var app = angular.module("crudApp", []); app.service("crudService", function ($http) { this.ObterTodosCelulares = function () { return $http.get('/api/v1/public/celulares'); } this.ObterCelularPorId = function (id) { return $http.get('/api/v1/public/celular/' + id); } this.AtualizarCelular = function (celular) { var response = $http({ method: 'put', url: '/api/v1/public/putCelular', data: JSON.stringify(celular), dataType: "json" }); return response; } this.AdicionarCelular = function (celular) { var response = $http({ method: 'post', url: '/api/v1/public/postCelular', data: JSON.stringify(celular), dataType: "json" }); return response; } this.RemoverCelular = function (id) { return $http.delete('/api/v1/public/deleteCelular/' + id); } }); app.controller("crudController", function ($scope, crudService) { $scope.divCelular = false; obterTodosCelulares(); function obterTodosCelulares() { var celularesData = crudService.ObterTodosCelulares(); celularesData.then(function (celular) { $scope.celulares = celular.data; }, function () { toastr["error"]("提取手机时出错", "手机商店") }) } $scope.removerCelular = function (celular) { var celularData = crudService.RemoverCelular(celular.Id); celularData.then(function (data) { if (data.status == 200) { toastr["success"]("手机删除成功!", "Celulares Store") } obterTodosCelulares(); }, function () { toastr["error"]("删除时出错", "手机商店") }) } $scope.obterCelularPorId = function (celular) { var celularData = crudService.ObterCelularPorId(celular.Id); celularData.then(function (_celular) { $scope.celular = _celular.data; $scope.celularId = celular.Id; $scope.Marca = celular.Marca; $scope.Modelo = celular.Modelo; $scope.Cor = celular.Cor; $scope.TipoChip = celular.TipoChip; $scope.MemoriaInterna = celular.MemoriaInterna; $scope.Action = "AtualizarCelular"; $scope.divCelular = true; }, function () { toastr["error"]("加载您的手机时出错", "Celulares Store") }); } $scope.AdicionarAtualizarCelular = function () { var celular = { Marca: $scope.Marca, Modelo: $scope.Modelo, Cor: $scope.Cor, TipoChip: $scope.TipoChip, MemoriaInterna: $scope.MemoriaInterna }; var valorAcao = $scope.Action; if (valorAcao == "AtualizarCelular") { celular.Id = $scope.celularId; var celularData = crudService.AtualizarCelular(celular); celularData.then(function (data) { obterTodosCelulares(); $scope.divCelular = false; if (data.status == 200) { toastr["success"]("手机改变成功!", "Celulares Store"); } }, function () { toastr["error"]("错误更新!", "Celulares Store"); }); } else { var celularData = crudService.AdicionarCelular(celular); celularData.then(function (data) { obterTodosCelulares(); if (data.status == 200) { toastr["success"]("手机成功注册!", "Celulares Store"); } $scope.divCelular = false; }, function () { toastr["error"]("错误包括!", "Celulares Store"); }); } } $scope.incluirCelularDiv = function () { limparCampos(); $scope.Action = "AdicionarCelular"; $scope.divCelular = true; } $scope.Cancelar = function () { $scope.divCelular = false; }; function limparCampos() { $scope.celularId = ""; $scope.Marca = ""; $scope.Modelo = ""; $scope.Cor = ""; $scope.TipoChip = ""; $scope.MemoriaInterna = ""; } }); </script>

_Layout.cshtml

  1. <!DOCTYPE html>
  2. <html ng-app="crudApp">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>@ViewBag.Title - My ASP.NET Application</title>
  7.     @Styles.Render("~/Content/css")
  8.     @Styles.Render("~/Content/toastr")
  9.     @Scripts.Render("~/bundles/modernizr")
  12.     @Scripts.Render("~/bundles/jquery")
  13.     @*@Scripts.Render("~/bundles/angular")
  14.         @Scripts.Render("~/bundles/customJs")
  15.         @Scripts.Render("~/bundles/toastrjs")*@
  16.     @Scripts.Render("~/bundles/bootstrap")
  17.     @RenderSection("scripts", required: false)
  18. </head>
  19. <body>
  20.     <div class="navbar navbar-inverse navbar-fixed-top">
  21.         <div class="container">
  22.             <div class="navbar-header">
  23.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  24.                     <span class="icon-bar"></span>
  25.                     <span class="icon-bar"></span>
  26.                     <span class="icon-bar"></span>
  27.                 </button>
  28.                 @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
  29.             </div>
  30.             <div class="navbar-collapse collapse">
  31.                 <ul class="nav navbar-nav">
  32.                     <li>@Html.ActionLink("Home", "Index", "Home")</li>
  33.                     <li>@Html.ActionLink("About", "About", "Home")</li>
  34.                     <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
  35.                 </ul>
  36.             </div>
  37.         </div>
  38.     </div>
  39.     <div class="container body-content">
  40.         @RenderBody()
  41.         <hr />
  42.         <footer>
  43.             <p>© @DateTime.Now.Year - My ASP.NET Application</p>
  44.         </footer>
  45.     </div>
  47. </body>
  48. </html>

运行如图:

这里写图片描述

发表评论

表情：
评论列表 （有 0 条评论，379人围观）

还没有评论，来说两句吧...

相关阅读