介绍 在选择最新的技术时,有几个因素会起作用,包括这些技术将如何与我们的项目集成。这篇文章解决了开始使用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

CRUD,分页,排序,搜索与AngularJS在MVC的更多相关文章

  1. Datatable+Springmvc+mybatis(分页+排序+搜索)_Jquery

    一.简介 通过Jqury的Datatable插件,构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求.同时, jQuery Datatable 强大的功能支持:排序,分页,搜索等. 二.前台分 ...

  2. EF 之 MVC 排序,查询,分页 Sorting, Filtering, and Paging For MVC About EF

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精    上篇博客我们学习了EF CodeFirst增删改查 ...

  3. CRUD Operations in MVC4 Using AngularJS and WCF REST Services

    Now in this article I will show how to do Create, Retrieve, Update and Delete (CRUD) operations in M ...

  4. 对于Oracle中分页排序查询语句执行效率的比较分析

    转自:http://bbs.csdn.net/topics/370033478 对于Oracle中分页排序查询语句执行效率的比较分析 作者:lzgame 在工作中我们经常遇到需要在Oracle中进行分 ...

  5. lucene 查询+分页+排序

    lucene 查询+分页+排序 1.定义一个工厂类 LuceneFactory 1 import java.io.IOException; 2 3 import org.apache.lucene.a ...

  6. 基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页和搜索(二)

    http://blog.csdn.net/jiuqiyuliang/article/details/19967031 目录: 基于asp.net + easyui框架,一步步学习easyui-data ...

  7. SSM框架——实现分页和搜索分页

    登录|注册     在路上 在路上,要懂得积累:在路上,要学会放下:我在路上!Stay hungry,Stay foolish.       目录视图 摘要视图 订阅 [公告]博客系统优化升级     ...

  8. Spring Boot CRUD+分页(基于JPA规范)

    步骤一:JPA概念 JPA(Java Persistence API)是Sun官方提出的Java持久化规范,用来方便大家操作数据库. 真正干活的可能是Hibernate,TopLink等等实现了JPA ...

  9. ABP进阶教程4 - 分页排序

    点这里进入ABP进阶教程目录 下载插件 打开Datatables官网(https://datatables.net/download/) 下载插件,复制到JD.CRS.Web.Mvc\wwwroot\ ...

随机推荐

  1. Salesforce LWC学习(二十三) Lightning Message Service 浅谈

    本篇参考: https://trailhead.salesforce.com/content/learn/superbadges/superbadge_lwc_specialist https://d ...

  2. HDU - 4548-美素数 (欧拉素数筛+打表)

    小明对数的研究比较热爱,一谈到数,脑子里就涌现出好多数的问题,今天,小明想考考你对素数的认识.  问题是这样的:一个十进制数,如果是素数,而且它的各位数字和也是素数,则称之为"美素数&quo ...

  3. centos7 RPM MySQL5.5

    一.安装MYSQL 把下载好的rpm版的mysql上传到centos7中,目前公司中最爱用的是5.5版本和5.7版本,推荐用5.5. 先安装服务端 rpm -ivh MySQL-server-5.5. ...

  4. Zabbix template for Microsoft SQL Server总结

      Zabbix template for Microsoft SQL Server介绍   这里介绍Zabbix下监控Microsoft SQL Server数据库非常好用的一个模板,模板名为&qu ...

  5. opencv-python函数

    opencv-python读取.展示和存储图像 1.imshow函数 imshow函数作用是在窗口中显示图像,窗口自动适合于图像大小,我们也可以通过imutils模块调整显示图像的窗口的大小.函数官方 ...

  6. 从两表连接看Oracle sql优化器的效果

    select emp.*,dept.* from tb_emp03 emp,tb_dept03 dept where emp.deptno=dept.id -- 不加hint SQL> sele ...

  7. 10 张图聊聊线程的生命周期和常用 APIs

    上一篇文章我们聊了多线程的基础内容,比如为什么要使用多线程,线程和进程之间的不同,以及创建线程的 4 种方式.本文已收录至我的 Github: https://github.com/xiaoqi666 ...

  8. SpringMVC-08-SpringMVC层编写

    SpringMVC层编写 web.xml DispatcherServlet <!--DispatcherServlet--> <servlet> <servlet-na ...

  9. 安装python3,配置pycharm

    1.下载最新版python3 首先去python官网下载python3的源码包,网址:https://www.python.org/ 进去之后点击导航栏的Downloads,也可以鼠标放到Downlo ...

  10. Linux实战(10):ssh密码被拒绝

    网上的操作都试过了,可还是不行,最终通过重装ssh服务解决. 参考资料:https://blog.csdn.net/VicdorLin/article/details/90727826 https:/ ...