CRUD，分页，排序，搜索与AngularJS在MVC

• 下载source - 53.1 MB

介绍 在选择最新的技术时，有几个因素会起作用，包括这些技术将如何与我们的项目集成。这篇文章解决了开始使用AngularJS和MVC的乞丐的问题。这篇文章告诉使用语言的每个方面，为什么和如何使用。 从数据库开始 首先创建名为TestData的数据库。在创建数据库之后，创建一个包含Employee、指定和Department名称的表。 将Id列设置为主键并自动增加Id。数据库的工作在这里完成。 从下面给出的链接下载请求的js和css文件 从这里下载angular Js min文件。从这里下载引导css和js。从这里下载bootstrap.theme.min.css。 在进行之前要熟悉这些东西 模块用于分离应用程序的逻辑。var app = angular。模块(“myApp”,[' angularUtils.directives.dirPagination ']);在这段代码中，我们使用angular声明了应用程序myApp模块。模块，并在数组中传递依赖模块，像这样，我们传递用于分页的依赖模块。我们在html页面中使用ng-app指令来使用这个模块。AngularJS主要通过控制器来控制数据和数据流。当页面每次加载时，Controller.js文件也加载，加载时调用的方法将被执行。控制器包含包含函数、方法和属性的javascript对象。每个控制器接受$scope作为引用应用程序的参数。我们在html页面中使用ng-controller来使用控制器。服务是执行控制器指定的特定任务的javascript函数。AngularJs有很多内置的服务，比如$http，$location，$route，$window。每个服务将执行特定的任务。例如:$http用于对服务器的ajax调用。来自控制器的方法调用来自服务的方法。服务处理服务器代码并调用ajax url中指定的操作结果，然后响应回服务。然后，服务返回响应给controller.js，而controller.js处理视图并在页面上显示数据。 从代码开始。 打开VS2012，创建新的ASP。Net MVC4 Web应用程序，并给出名称BootstrapAngularMvc。转到visual studio的解决方案资源管理器中的Models文件夹。右键单击模型文件夹，找到ADD >ADO。NET实体数据模型。选择ADO。NET实体数据模型。提供名称DBModel。之后将出现弹出 选择generate from database并单击next。 在下面的框中，指定实体名称为SahilEntities，然后单击New connection。 选择Sql server身份验证并填写诸如服务器名、用户名、密码等凭据，然后从数据库列表中选择您的TestData数据库。 选中表格的复选框并单击finish。 然后转到controller文件夹并创建EmployeeController。和编写代码 隐藏,收缩,复制Codeusing系统; 使用System.Collections.Generic; 使用来; 使用包含; 使用System.Web.Mvc; 使用BootstrapAngularMvc.Models; 名称空间BootstrapAngularMvc.Controllers { 公共类EmployeeController: Controller { 公共ActionResult员工() { 返回视图(); } //从数据库中获取所有记录。 公共JsonResult getAll () { 使用(SahilEntities dataContext = new SahilEntities()) { var employeeList =(来自dataContext.Employees中的E) 在dataContext中加入dep。部门在E。DepartmentID = dep.Id 在dataContext中加入dsg。名称在E。DesignationID = dsg.Id orderby E.Id 选择新 { E.Id, E.name, E.DOB, E.Gender, E.Email, E.Mobile, E.Address, E.JoiningDate, dep.DepartmentName, E.DepartmentID, dsg.DesignationName, E.DesignationID }).ToList (); var JsonResult = Json(employeeList, JsonRequestBehavior.AllowGet); JsonResult。MaxJsonLength = int.MaxValue; 返回JsonResult; } } } } 在App_Start文件夹中找到RouteConfig.cs并改变默认的控制器和动作。 隐藏,复制Codeusing系统; 使用System.Collections.Generic; 使用来; 使用包含; 使用System.Web.Mvc; 使用System.Web.Routing; 名称空间BootstrapAngularMvc { 公开课RouteConfig { 公共静态void寄存器路由(路由集合路由) { routes.IgnoreRoute(“{资源}.axd / {* pathInfo} "); routes.MapRoute ( 名称:“默认”, url:“{控制器}/{行动}/ {id}”, new {controller = "Employee"， action = "Employee"， id = UrlParameter。可选} ); } } } 添加3个文件->模块。js，控制器。js，服务。js在内容文件夹。 隐藏,复制代码模块。js编写给定的代码。 var app = angular。模块(“myApp”,[]); 隐藏,复制代码控制器。js编写给定的代码。 应用程序。controller("myCntrl"， function ($scope, myService) { GetAllEmployees (); //用于根据列进行排序 美元的范围。function (keyname) { 美元的范围。sortKey = keyname; 美元的范围。反向= ! scope.reverse美元; } //获取所有记录 函数GetAllEmployees () { var getData = myService.getEmployees(); getData。然后(函数(emp) { 美元的范围。员工= emp.data; }， function (emp) { alert("记录收集失败!”); }); } }); 隐藏,js编写给定的代码。 应用.service("myService"， function ($http) { / /得到所有员工 这一点。getEmployees = function () { 返回http.get美元(“/员工/ getAll”); }; }); 右键单击EmployeeController的Employee操作并选择AddView选项。 添加一个视图并查看下面给出的代码链接。看到视图。cshtml文件。 从分页 下载dirpage .js并保存到项目的内容文件夹中。用Module.js更新代码。 隐藏,复制Codevar app = angular。模块(“myApp”,[' angularUtils.directives.dirPagination ']); 改变CSS 在content文件夹中找到site.css，将html、正文、正文中的背景颜色改为“#fff”。 从AngularJS的CRUD操作开始 在Employee控制器中添加代码。下面给出的代码中的第一个方法使用类Employee作为参数，通过controller.js从视图中获取数据。第二个方法使用EmployeeID作为参数，该参数来自被单击的行。同样，update方法也将Employee类作为参数，并更新被编辑的记录。其他两种方法填充指定和部门的下拉列表。 隐藏,收缩,复制码——员工记录插入码——> (雇员Emp) { if (Emp != null) { 使用(SahilEntities dataContext = new SahilEntities()) { Employee = new Employee(); employee.name = Emp.name; 员工。罗伯特= Convert.ToDateTime (Emp.DOB) .ToString(“yyyy / MM / dd”); 员工。性别= Emp.Gender; 员工。电子邮件= Emp.Email; 员工。移动= Emp.Mobile; 员工。地址= Emp.Address; 员工。JoiningDate = Convert.ToDateTime (Emp.JoiningDate) .ToString(“yyyy / MM / dd”); 员工。DepartmentID = Emp.DepartmentID; 员工。DesignationID = Emp.DesignationID; dataContext.Employees.Add(员工); dataContext.SaveChanges (); 返回“员工添加成功”; } } 其他的 { 还“新增员工不成功!”; } } -通过ID获取雇员-> 公共JsonResult getEmployeeByNo(字符串EmpNo) { 试一试 { 使用(SahilEntities dataContext = new SahilEntities()) { = Convert.ToInt32(EmpNo); var employeeList = dataContext.Employees.Find(no); 返回Json (employeeList JsonRequestBehavior.AllowGet); } } 捕捉exp(异常) { 返回Json("Error in getting record !"， JsonRequestBehavior.AllowGet); } } >——员工记录更新码——> UpdateEmployee(雇员Emp) { if (Emp != null) { 使用(SahilEntities dataContext = new SahilEntities()) { int no = Convert.ToInt32(empty . id); var employeeList = dataContext.Employees。在(x =比;x。Id = = no) .FirstOrDefault (); employeeList.name = Emp.name; employeeList。罗伯特= Convert.ToDateTime (Emp.DOB) .ToString(“yyyy / MM / dd”); employeeList。性别= Emp.Gender; employeeList。电子邮件= Emp.Email; employeeList。移动= Emp.Mobile; employeeList。地址= Emp.Address; employeeList。JoiningDate = Convert.ToDateTime (Emp.JoiningDate) .ToString(“yyyy / MM / dd”); employeeList。DepartmentID = Emp.DepartmentID; employeeList。DesignationID = Emp.DesignationID; dataContext.SaveChanges (); 返回“员工更新成功”; } } 其他的 { 返回“无效的员工”; } } —绑定名称的下拉列表—> 公共JsonResult GetDesignations () { 使用(SahilEntities context = new SahilEntities()) { var desg = context. desigons . tolist (); 返回Json (desg JsonRequestBehavior.AllowGet); } } <——绑定部门的下拉列表——> 公共JsonResult GetDepartments () { 使用(SahilEntities data = new SahilEntities()) { var deps = data.Departments.ToList(); 返回Json (deps JsonRequestBehavior.AllowGet); } } 或者说是ite代码在控制器。js i.e.，如下所示。在控制器中，$scope用于连接控制器和视图。它是应用程序控制器和视图之间的粘合剂。在控制器中，我们将值传递给$作用域，并在视图中使用ng-bind或{{}}。AddEmployeeDiv打开用于添加员工的模态弹出窗口，并填充指定和部门的下拉框。alertmsg在保存或更新数据或在保存操作中发生任何错误后显示消息。EditEmployee方法调用服务中的方法来编辑记录。基于编辑或添加的操作，AddUpdateEmployee方法调用服务方法来插入或删除employee。ClearFields方法的目的是使文本框在任何操作之后为空。 隐藏,收缩,复制代码<——这是用来打开弹出窗口添加记录。——比; 美元的范围。AddEmployeeDiv = function () { 明显差异(); 美元的范围。Action =“添加”; GetDepartments (); GetDesignations (); } —保存、更新消息的警告弹出。——比; 美元的范围。alertmsg = function () { $ (" # alertModal ") .modal(隐藏的); }; —绑定下拉列表进行指定。——比; 函数GetDesignations () { var desg = myService.GetDesignations(); desg。然后(函数(dsg) { 美元scope.designations = dsg.data; }， function (dsg) { $ (" # alertModal ") .modal(显示); 美元的范围。msg = "灌装名称下拉错误!"; }); } 绑定部门的下拉列表。——比; 函数GetDepartments () { var departments = myService.GetDepartment(); 部门。然后(函数(dep) { 美元scope.departments = dep.data; }， function (dep) { $ (" # alertModal ") .modal(显示); 美元的范围。msg = "灌装部门下降错误!"; }); } -通过ID获取雇员-> 美元的范围。editEmployee = function (employee) { 调试器; GetDesignations (); GetDepartments (); var getData = myService.getEmployee(employee.Id); getData。然后(函数(emp) { 美元的范围。员工= emp.data; 美元的范围。employeeId = employee.Id; 美元的范围。employeeName = employee.name; 美元的范围。employeeDOB = new Date(employee.DOB); 美元的范围。employeeGender = employee.Gender; 美元的范围。employeeEmail = employee.Email; 美元的范围。employeeMobile = employee.Mobile; 美元的范围。employeeAddress = employee.Address; 美元的范围。employeeJoiningDate = employee.JoiningDate; 美元的范围。employeeDepartment = employee.DepartmentID; 美元的范围。employeeDesignation = employee.DesignationID; 美元的范围。Action =“编辑”; $ (" # myModal ") .modal(显示); }, 函数(味精){ $ (" # alertModal ") .modal(显示); 美元的范围。味精= msg.data; }); } ——插入和更新代码。——比; 美元的范围。AddUpdateEmployee = function () { var员工= { 名称:scope.employeeName美元, 罗伯特:$ scope.employeeDOB 性别:$ scope.employeeGender 电子邮件:scope.employeeEmail美元, 手机:scope.employeeMobile美元, 地址:scope.employeeAddress美元, JoiningDate: $ scope.employeeJoiningDate DepartmentID: $ scope.employeeDepartment DesignationID: $ scope.employeeDesignation }; var getAction = $scope.Action; if (getAction == "Edit") { 员工。Id = $ scope.employeeId; var getData = myService.updateEmp(Employee); getData。然后(函数(msg) { GetAllEmployee (); 明显差异(); $ (" # alertModal ") .modal(显示); 美元的范围。味精= msg.data; }， function (msg) { $ (" # alertModal ") .modal(显示); 美元的范围。味精= msg.data; }); } 其他{ var getData = myService.AddEmp(Employee); getData。然后(函数(msg) { GetAllEmployee (); $ (" # alertModal ") .modal(显示); 美元的范围。味精= msg.data; 明显差异(); }， function (msg) { $ (" # alertModal ") .modal(显示); 美元的范围。味精= msg.data; }); } 调试器; GetAllEmployee (); 美元scope.refresh (); } <—保存后清除字段—> 函数明显差异(){ 美元的范围。employeeId = " "; 美元的范围。employeeName = " "; 美元的范围。employeeDOB = " "; 美元的范围。employeeGender = " "; 美元的范围。employeeEmail = " "; 美元的范围。employeeMobile = " "; 美元的范围。employeeAddress = " "; 美元的范围。employeeJoiningDate = " "; 美元的范围。employeeDepartment = " "; 美元的范围。employeeDesignation = " "; } 在service中，我们使用$http调用服务器代码并以我们想要的任何格式传递数据/参数。我们以json格式传递数据并以json格式获取数据。方法使用来自视图的数据调用服务器上的AddEmployee方法。getEmployee方法调用服务器上的getEmployeeByNo方法来编辑记录。方法调用服务器上的UpdateEmployee方法进行更新操作。其他2方法调用服务器来绑定下拉列表。 隐藏,收缩,复制代码<——调用服务器上的添加员工方法——> 这一点。AddEmp = function (employee) { var response = $http({ 方法:“文章”, url:“/员工/一致”, 数据:JSON.stringify(员工), 数据类型:“json” }); 返回响应; } —调用服务器上的Id方法获取雇员—> th是多少。getEmployee = function (employeeID) { var response = $http({ 方法:“文章”, url:“/员工/ getEmployeeByNo”, 参数:{ id: JSON.stringify (employeeID) } }); 返回响应; } ——调用服务器上的update方法—— 这一点。updateEmp = function (employee) { var response = $http({ 方法:“文章”, url:“/员工/ UpdateEmployee”, 数据:JSON.stringify(员工), 数据类型:“json” }); 返回响应; } ——调用服务器上的方法指定下拉列表—— 这一点。GetDesignations = function () { 返回http.get美元(“/员工/ GetDesignations”); }; >——调用服务器上的方法来实现部门下拉列表——> 这一点。GetDepartment = function () { 返回http.get美元(“/员工/ GetDepartments”); }; 看到员工。这里的cshtml代码。 本文转载于：http://www.diyabc.com/frontweb/news19367.html