ASP。netcore,Angular2 CRUD动画使用模板包，WEB API和EF 1.0.1
介绍 在本文中，让我们看看如何创建一个ASP。NET Core CRUD web应用程序与Angular2动画使用模板包，web API和EF 1.0.1。 请注意 请阅读我以前的文章，其中深入解释了如何开始使用ASP。NET Core模板包。 ASP。NET Core Angular 2 EF 1.0.1 Web API使用模板包。https://www.codeproject.com/articles/1164078/asp-net-core-angular-master-detail-html-grid-using https://www.codeproject.com/articles/1168725/asp-net-core-angular-shopping-cart-using-web-api|0>>>> 在本文中，我们将看到以下内容: 创建CRUD web应用程序ASP。净核和角2 (创建):使用ASP将新的学生信息插入到数据库中。NET Core, EF和Web API。(读):用ASP从数据库中选择学生的详细信息。NET Core, EF和Web API。U:(更新):用ASP更新学生资料到数据库。(删除):使用ASP从数据库中删除学生的详细信息。NET Core, EF和Web API。 我们将使用WEB API来执行CRUD操作。Web API有以下四种方法:Get/Post/Put和delete&put: 是请求数据。(选择)post 是创建一个数据。(插入)put 就是更新数据(update)。删除就是删除数据(delete)。 用简单的角度动画展示我们的CRUD应用程序更丰富。 用于淡出元素和控件的Angilar2动画。用于从左侧移动元素和控件的Angilar2动画。用于从右移动元素和控件的Angilar2动画。用于从顶部移动元素和控件的Angilar2动画。用于从底部移动元素和控件的Angilar2动画。 Angilar2动画放大按钮点击。 用于创建我们的ASP。NET Core, Angular2 CRUD动画我们会 在SQL Server中创建示例数据库和表，以显示在我们的web应用程序中。创建ASP。NET Core Angular 2 Starter应用程序(。NET Core)使用模板包。创建EF, DBContext类和模型类。为Get/Post/Put和delete&put方法创建WEB API。创建第一个组件TypeScript文件，以获取WEB API JSON结果使用Http模块的get /Post/Put和Delete 方法。为动画和CRUD web应用程序创建第一个组件HTML文件。 先决条件 确保已在计算机中安装了所有先决条件。如果没有，那么下载并安装所有，一个一个。 首先，从这个链接下载并安装带有更新3的Visual Studio 2015。如果你有Visual Studio 2015，但还没有更新到更新3，从这个链接下载并安装Visual Studio 2015更新3。下载并安装。net Core 1.0.1下载并安装TypeScript 2.0下载安装Node.js v4.0或以上版本。我安装了V6.9.1(下载链接)。下载和安装下载ASP。NET Core模板包visz文件从这个链接。 使用的代码 步骤1创建数据库和表 我们将使用我们的SQL Server数据库为我们的WEB API和EF。首先，我们创建一个名为StudentsDB的数据库和一个名为StudentMaster的表。下面是用于在表中创建数据库表和示例记录插入查询的SQL脚本。在您的本地SQL服务器中运行以下查询，以创建在我们的项目中使用的数据库和表。 隐藏,收缩,复制Code
USE MASTER GO -- 1) Check for the Database Exists .If the database is exist then drop and create new DB IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'StudentsDB' ) DROP DATABASE StudentsDB GO CREATE DATABASE StudentsDB GO USE StudentsDB GO -- 1) //////////// StudentMasters IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'StudentMasters' ) DROP TABLE StudentMasters GO CREATE TABLE [dbo].[StudentMasters]( [StdID] INT IDENTITY PRIMARY KEY, [StdName] [varchar](100) NOT NULL, [Email] [varchar](100) NOT NULL, [Phone] [varchar](20) NOT NULL, [Address] [varchar](200) NOT NULL ) -- insert sample data to Student Master table INSERT INTO [StudentMasters] ([StdName],[Email],[Phone],[Address]) VALUES ('Shanu','syedshanumcain@gmail.com','01030550007','Madurai,India') INSERT INTO [StudentMasters] ([StdName],[Email],[Phone],[Address]) VALUES ('Afraz','Afraz@afrazmail.com','01030550006','Madurai,India') INSERT INTO [StudentMasters] ([StdName],[Email],[Phone],[Address]) VALUES ('Afreen','Afreen@afreenmail.com','01030550005','Madurai,India') select * from [StudentMasters]
步骤2-创建ASP。NET Core Angular 2应用程序 在安装了上面列出的所有先决条件和ASP。NET Core模板，点击开始>>项目在祝辞Visual Studio 2015 >>Visual Studio 2015，在你的桌面上。单击New祝辞祝辞项目。选择Web祝辞祝辞ASP。NET Core Angular 2启动器。输入项目名称并单击OK。 在创建ASP。NET Core Angular 2应用，等几秒钟。您将看到所有依赖项都将自动恢复。 什么是新的ASP。NET Core模板包解决方案? WWWroot 我们可以看到所有的CSS,JS文件被添加到" dist "文件夹下。"主客户端。js”文件是重要的文件，因为所有Angular2结果将被编译，结果将从这个“js”文件加载到我们的html文件。 ClientApp文件夹: 我们可以在项目解决方案中看到一个新的文件夹ClientApp。这个文件夹包含了所有与Angular2相关的应用程序，比如模块、组件等等。我们可以将所有Angular2相关的模块、组件、模板HTML文件都添加到这个文件夹中，我们可以在下面的文章中看到如何创建我们自己的Angular2应用程序的细节。 在app文件夹下的Components文件夹中，我们可以看到很多子文件夹，比如app. counter, fetchdata, home和navemenu。默认情况下，所有示例应用程序都已创建，当我们运行应用程序时，可以看到所有示例Angular2应用程序的结果。 当我们运行应用程序时，我们可以看到在左边作为导航，在右边包含数据。所有Angular2样品将从t开始装载他上面的文件夹。 3) Controllers文件夹:这是我们的MVC Controller文件夹，我们可以在这个文件夹中创建MVC和Web API Controller。 4)视图文件夹:这是我们的MVC视图文件夹。 5)其他重要文件 我们还可以看到其他重要的ASP。NET Core重要的其他文件 项目。json: ASP。NET Core依赖列表可以在这个文件中找到，我们将在这个文件的依赖部分添加我们的实体框架。 包中。json:这是另一个重要的文件，因为所有与Angular2相关的依赖项列表都将在这里默认添加。NET Core模板包。 appsettings。json:我们可以在这个应用程序设置中添加数据库连接字符串。json文件。 我们将在我们的项目中使用所有这些来创建、构建和运行我们的Angular 2。NET Core模板包，WEB API和EF 1.0.1 步骤- 3创建实体自由工作 添加实体框架包 在我们的ASP中添加实体框架包。打开项目。将下面一行添加到。 注意:这里我们使用的是EF版本1.0.1。 隐藏,复制Code
"Microsoft.EntityFrameworkCore.SqlServer": "1.0.1", "Microsoft.EntityFrameworkCore.Tools": "1.0.0-preview2-final"
当我们保存项目时。我们可以看到json文件的引用被恢复。 几秒钟后，我们可以看到实体框架包已经恢复，所有的引用已经添加。 添加连接字符串 要用SQL连接添加连接字符串，请打开“appsettings”。是的，这是json文件，这个文件在默认情况下看起来像下图。 在这个appsettings。json文件添加我们的连接字符串 隐藏,复制Code
"ConnectionStrings": {
"DefaultConnection": "Server=YOURDBSERVER;Database=StudentsDB;user id=SQLID;password=SQLPWD;Trusted_Connection=True;MultipleActiveResultSets=true;"
},
注意，根据本地连接更改SQL连接字符串。 下一步是创建一个名为“Data”的文件夹来创建我们的模型和DBContext类。 为Student创建模型类 我们可以通过在数据文件夹中添加一个新的类文件来创建模型。右键单击数据文件夹，然后单击Add>单击Class。输入类名为StudentMasters，然后单击Add。 在这个类中，我们首先创建属性变量add student。我们会在我们的WEB API控制器中使用这个。 隐藏,收缩,复制Code
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using System.ComponentModel.DataAnnotations; namespace Angular2ASPCORE.Data { public class StudentMasters { [Key] public int StdID { get; set; } [Required] [Display(Name = "Name")] public string StdName { get; set; } [Required] [Display(Name = "Email")] public string Email { get; set; } [Required] [Display(Name = "Phone")] public string Phone { get; set; } public string Address { get; set; } } }
创建数据库上下文 DBContext是用于建立到数据库的连接的实体框架类 我们可以通过在数据文件夹中添加一个新的类文件来创建一个DBContext类。右键单击数据文件夹，然后单击Add>单击Class。输入类名StudentContext并单击Add。 在这个类中，我们继承了DbContext并为students表创建了Dbset。 隐藏,复制Code
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.EntityFrameworkCore; namespace Angular2ASPCORE.Data { public class studentContext:DbContext { public studentContext(DbContextOptions<studentContext> options) :base(options) { } public studentContext() { } public DbSet<StudentMasters> StudentMasters { get; set; } } }
Startup.CS 现在我们需要将数据库连接字符串和提供程序添加为SQL SERVER。为此，我们在configure reservices方法下的start .cs文件中添加以下代码。 隐藏,复制Code
// Add Entity framework . services.AddDbContext<studentContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
步骤- 4为CRUD操作创建Web API 要创建我们的WEB API控制器，右键单击Controllers文件夹。单击Add并单击New Item。 单击ASP。右面入网单击Web API控制器类。输入名称为“StudentMastersAPI”。然后点击添加。 我们都知道，Web API是为浏览器和移动设备构建HTTP服务的一种简单而容易的方法。 Web API有以下四种方法:Get/Post/Put和Delete。 是请求数据。(选择)post 是创建一个数据。(插入)put 是更新数据。删除就是删除数据。 Get方法(选择操作) 方法是从选定的数据库中请求单个项目或项目列表。在这里，我们将从StudentMasters表中获取所有学生信息。 隐藏,复制Code
[HttpGet] [Route("Student")] public IEnumerable<StudentMasters> GetStudentMasters() { return _context.StudentMasters; }
Post方法(插入操作) Post方法将用于插入数据到我们的数据库。在Post方法中，我们还将检查是否已经创建了StudentID并返回消息。我们将把所有用于插入的Student Master列参数传递给Student Master表。 隐藏,收缩,复制Code
// POST: api/StudentMastersAPI [HttpPost] public async Task<IActionResult> PostStudentMasters([FromBody] StudentMasters studentMasters) { if (!ModelState.IsValid) { return BadRequest(ModelState); } _context.StudentMasters.Add(studentMasters); try { await _context.SaveChangesAsync(); } catch (DbUpdateException) { if (StudentMastersExists(studentMasters.StdID)) { return new StatusCodeResult(StatusCodes.Status409Conflict); } else { throw; } } return CreatedAtAction("GetStudentMasters", new { id = studentMasters.StdID }, studentMasters); } private bool StudentMastersExists(int id) { return _context.StudentMasters.Any(e => e.StdID == id); }
Put方法(更新操作) Put方法将被用来更新所选学生的数据到我们的数据库中。在Put方法中，我们将通过StudentID和所有其他参数进行更新。我们通过StudentID更新StudentMaster表。 隐藏,收缩,复制Code
// PUT: api/StudentMastersAPI/5 [HttpPut("{id}")] public async Task<IActionResult> PutStudentMasters([FromRoute] int id, [FromBody] StudentMasters studentMasters) { if (!ModelState.IsValid) { return BadRequest(ModelState); } if (id != studentMasters.StdID) { return BadRequest(); } _context.Entry(studentMasters).State = EntityState.Modified; try { await _context.SaveChangesAsync(); } catch (DbUpdateConcurrencyException) { if (!StudentMastersExists(id)) { return NotFound(); } else { throw; } } return NoContent(); }
删除方法(删除操作) 方法将用于从数据库中删除所选的学生数据。在删除方法中，我们将通过StudentID删除记录。 隐藏,复制Code
// DELETE: api/StudentMastersAPI/5 [HttpDelete("{id}")] public async Task<IActionResult> DeleteStudentMasters([FromRoute] int id) { if (!ModelState.IsValid) { return BadRequest(ModelState); } StudentMasters studentMasters = await _context.StudentMasters.SingleOrDefaultAsync(m => m.StdID == id); if (studentMasters == null) { return NotFound(); } _context.StudentMasters.Remove(studentMasters); await _context.SaveChangesAsync(); return Ok(studentMasters); }
要测试Get方法，我们可以运行我们的项目并复制Get方法的api路径，这里我们可以看到Get的api路径是api/StudentMastersAPI/Student 运行程序并粘贴上面的API路径来测试我们的输出。 使用Angular2 我们在ClientApp/App文件夹下创建所有与Angular2相关的App、模块、服务、组件和html模板。 我们在app文件夹下创建了“students”文件夹来创建typescript和html文件来显示学生的详细信息。 5 .使用Angular2动画 角度动画都建立在st之上andard 网络动画API 。请检查这个参考链接，它解释了更多关于Angular2动画的细节https://angular.io/docs/ts/latest/guide/animations.html 在web应用程序中添加动画将为我们的网站提供更丰富的外观。在这个应用程序中，我们将使用Angular2动画来实现点击事件时的渐变放大控件，并从左、右、顶部和底部移动元素或控件。 Angular2动画在家庭组件: 在这里，我们将在主页中添加动画。为此，我们编辑Home组件来创建我们的Angular2动画。 导入部分: 使用Angular2动画，我们需要首先导入“触发器，状态，样式，过渡，动画”。 我们的导入看起来是这样的 隐藏,复制Code
import {Component, Input, trigger, state, style, transition, animate, keyframes} from <a href="mailto:'@angular/core'">'@angular/core'</a>;
组成部分 在组件中，我们需要添加动画:[]来执行带有触发器的动画。 触发器用于连接组件和HTML模板，例如，这里让我们看看如何创建一个简单的动画来更改单击事件上的按钮的颜色和大小。 首先，我们创建一个名为“moveBottom”的触发器，我们将在HTML元素或控件中使用这个触发器名从底部移动。在这个动画中，我们使用了transition('void =>'这意味着该动画将在页面加载期间执行。我们为“1”设置了胺化时间，在样式上我们设置了“translateY(-200px)，这意味着我们最初将按钮的位置设置为底部-200从按钮的实际位置。当页面加载时，按钮将从-200 y轴位置开始并向上移动直到按钮的实际位置'translateY(0)' 隐藏,复制Code
trigger('moveBottom', [ transition('void => *', [ animate('1s', keyframes([ style({ opacity: 0, transform: 'translateY(-200px)', offset: 0 }), style({ opacity: 1, transform: 'translateY(25px)', offset: .75 }), style({ opacity: 1, transform: 'translateY(0)', offset: 1 }), ])) ]) ])
在HTML模板中，我们将使用这个触发器名称和@符号来执行如下所示的动画。这里我们为div标签添加了动画。 隐藏,复制Code
<div [@moveBottom]= ‘moveBottom’>
ASP.NET Angular2
</div>
和底部一样，我们做了其余的动画，左，右，顶部和淡入，这里是完整的代码为家庭动画组件。 隐藏,收缩,复制Code
import { Component, Input, trigger, state, style, transition, animate, keyframes } from <a href="mailto:'@angular/core'">'@angular/core'</a>; @Component({ selector: 'home', animations: [ trigger('moveBottom', [ transition('void => *', [ animate('1s', keyframes([ style({ opacity: 0, transform: 'translateY(-200px)', offset: 0 }), style({ opacity: 1, transform: 'translateY(25px)', offset: .75 }), style({ opacity: 1, transform: 'translateY(0)', offset: 1 }), ])) ]) ]), trigger('moveTop', [ transition('void => *', [ animate('1s', keyframes([ style({ opacity: 0, transform: 'translateY(+400px)', offset: 0 }), style({ opacity: 1, transform: 'translateY(25px)', offset: .75 }), style({ opacity: 1, transform: 'translateY(0)', offset: 1 }), ])) ]) ]), trigger('moveRight', [ transition('void => *', [ animate('1s', keyframes([ style({ opacity: 0, transform: 'translateX(-400px)', offset: 0 }), style({ opacity: 1, transform: 'translateX(25px)', offset: .75 }), style({ opacity: 1, transform: 'translateX(0)', offset: 1 }), ])) ]) ]), trigger('movelLeft', [ transition('void => *', [ animate('4s', keyframes([ style({ opacity: 0, transform: 'translateX(+800px)', offset: 0 }), style({ opacity: 1, transform: 'translateX(150px)', offset: .75 }), style({ opacity: 1, transform: 'translateX(0)', offset: 1 }), ])) ]) ]), trigger('fadeIn', [ transition('void => *', [ animate('3s', keyframes([ style({ opacity: 0, transform: 'translateX(0)', offset: 0 }), style({ opacity: 1, transform: 'translateX(0)', offset: 1 }), ])) ]) ]) ], template: require('./home.component.html') }) export class HomeComponent { myName: string = "Shanu"; }
下面是Home Html模板的完整代码。 隐藏,收缩,复制Code
<h1[@fadeIn]='animStatus'>ASP.NET Core,Angular2 CRUD with Animation using Template Pack, WEB API and EF 1.0.1 </h1> <divclass="column"> <divstyle="background-color:#0094ff;color:#FFFFFF;font-size:xx-large;width:340px;height:50px;text-shadow: -2px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000, -2px 0px 0px #000, 1px 0px 0px #000, -2px 1px 0px #000, 0px 1px 0px #000, 1px 1px 0px #000;text-align:center;display:inline-block; border-color:#a2aabe;border-style:dashed;border-width:2px;"[@moveBottom]='moveBottom'> ASP.NET Angular2 </div> <divstyle="background-color:#ff00dc;color:#FFFFFF;font-size:xx-large;width:340px;height:50px;text-shadow: -2px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000, -2px 0px 0px #000, 1px 0px 0px #000, -2px 1px 0px #000, 0px 1px 0px #000, 1px 1px 0px #000;text-align:center;display:inline-block; border-color:#a2aabe;border-style:dashed;border-width:2px;"[@moveTop]='moveTop'> CRUD </div> <divstyle="background-color:#3ab64a;color:#FFFFFF;font-size:xx-large;width:340px;height:50px;text-shadow: -2px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000, -2px 0px 0px #000, 1px 0px 0px #000, -2px 1px 0px #000, 0px 1px 0px #000, 1px 1px 0px #000;text-align:center;display:inline-block; border-color:#a2aabe;border-style:dashed;border-width:2px;"[@moveRight]='moveRight'> Animation </div> </div> <divclass="column"> <h2>Created by : </h2> <divstyle="background-color:#ff6a00;color:#FFFFFF;font-size:xx-large;width:320px;height:50px;text-shadow: -2px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000, -2px 0px 0px #000, 1px 0px 0px #000, -2px 1px 0px #000, 0px 1px 0px #000, 1px 1px 0px #000;text-align:center; border-color:#a2aabe;border-style:dashed;border-width:2px;"[@movelLeft]='movelLeft'> {{myName}} </div> </div>
步骤- 6创建组件TypeScript 右键单击学生文件夹，然后单击添加新项目。从左侧选择客户端，选择TypeScript文件，并将该文件命名为“students.component.ts”，然后点击添加。 在student。component。ts文件中我们有三个部分， 接下来是组件部分，接下来是用于编写业务逻辑的类。 首先，我们导入angular文件用于我们的组件，这里我们导入http用于在我们的Angular2组件和动画中使用http客户端。 在组件中，我们有选择器、动画和模板。Selector是为这个应用程序提供一个名称，在html文件中，我们使用这个选择器名称来显示在html页面中。动画是用来执行动画为我们的Angular2应用。正如我们在home组件中看到的，我们使用了移动、左、右、底、上和淡入，我们将在CRDU页面中使用相同的动画。 在模板中，我们给出输出的html文件名。这里我们将创建一个html文件为“students.component.html”。 导出类是主要类，我们在其中执行要在组件模板中使用的所有业务逻辑和变量声明。在这个类中，我们获得API方法结果并将结果绑定到student数组，我们还将执行rest或Post、Put和Delete方法来执行CRUD操作。 隐藏,收缩,复制Code
import { Component, Input, trigger, state, style, transition, animate, keyframes } from <a href="mailto:'@angular/core'">'@angular/core'</a>; import { Http, Response, Headers, RequestOptions } from <a href="mailto:'@angular/http'">'@angular/http'</a>; import { FormsModule } from <a href="mailto:'@angular/forms'">'@angular/forms'</a>; @Component({ selector: 'students' , animations: [ trigger('buttonReSize', [ state('inactive', style({ transform: 'scale(1)', backgroundColor: '#f83500' })), state('active', style({ transform: 'scale(1.4)', backgroundColor: '#0094ff' })), transition('inactive => active', animate('100ms ease-in')), transition('active => inactive', animate('100ms ease-out')) ]), trigger('moveBottom', [ transition('void => *', [ animate(900, keyframes([ style({ opacity: 0, transform: 'translateY(-200px)', offset: 0 }), style({ opacity: 1, transform: 'translateY(25px)', offset: .75 }), style({ opacity: 1, transform: 'translateY(0)', offset: 1 }), ])) ]) ]), trigger('moveTop', [ transition('void => *', [ animate(900, keyframes([ style({ opacity: 0, transform: 'translateY(+400px)', offset: 0 }), style({ opacity: 1, transform: 'translateY(25px)', offset: .75 }), style({ opacity: 1, transform: 'translateY(0)', offset: 1 }), ])) ]) ]), trigger('moveRight', [ transition('void => *', [ animate(900, keyframes([ style({ opacity: 0, transform: 'translateX(-400px)', offset: 0 }), style({ opacity: 1, transform: 'translateX(25px)', offset: .75 }), style({ opacity: 1, transform: 'translateX(0)', offset: 1 }), ])) ]) ]), trigger('movelLeft', [ transition('void => *', [ animate(900, keyframes([ style({ opacity: 0, transform: 'translateX(+400px)', offset: 0 }), style({ opacity: 1, transform: 'translateX(25px)', offset: .75 }), style({ opacity: 1, transform: 'translateX(0)', offset: 1 }), ])) ]) ]), trigger('fadeIn', [ transition('* => *', [ animate('1s', keyframes([ style({ opacity: 0, transform: 'translateX(0)', offset: 0 }), style({ opacity: 1, transform: 'translateX(0)', offset: 1 }), ])) ]) ]), ], template: require('./students.component.html') }) export class studentsComponent { // to get the Student Details public student: StudentMasters[] = []; // to hide and Show Insert/Edit AddstudetnsTable: Boolean = false; // To stored Student Informations for insert/Update and Delete public StdIDs = "0"; public StdNames = ""; public Emails = ""; public Phones = ""; public Addresss= ""; //For display Edit and Delete Images public imgEdit = require("./Images/edit.gif"); public imgDelete = require("./Images/delete.gif"); myName: string; //for animation status animStatus: string = 'inactive'; constructor(public http: Http) { this.myName = "Shanu"; this.AddstudetnsTable = false; this.getData(); } //for Animation to toggle Active and Inactive animButton() { this.animStatus = (this.animStatus === 'inactive' ? 'active' : 'inactive'); } //to get all the Student data from Web API getData() { this.http.get('/api/StudentMastersAPI/Student').subscribe(result => { this.student = result.json(); }); } // to show form for add new Student Information AddStudent() { this.animButton(); this.AddstudetnsTable = true; this.StdIDs = "0"; this.StdNames = ""; this.Emails = ""; this.Phones = ""; this.Addresss = ""; } // to show form for edit Student Information editStudentsDetails(StdID, StdName, Email, Phone, Address) { this.animButton(); this.AddstudetnsTable = true; this.StdIDs = StdID; this.StdNames = StdName; this.Emails = Email; this.Phones = Phone; this.Addresss = Address; } // If the studentid is 0 then insert the student infromation using post and if the student id is more than 0 then edit using put mehod addStudentsDetails(StdID, StdName, Email, Phone, Address) { alert(StdName); var headers = new Headers(); headers.append('Content-Type', 'application/json; charset=utf-8'); if (StdID == 0) { this.http.post('api/StudentMastersAPI', JSON.stringify({ StdID: StdID, StdName: StdName, Email: Email, Phone: Phone, Address: Address }), { headers: headers }).subscribe(); alert("Student Detail Inserted"); } else { this.http.put('api/StudentMastersAPI/' + StdID, JSON.stringify({ StdID: StdID, StdName: StdName, Email: Email, Phone: Phone, Address: Address }), { headers: headers }).subscribe(); alert("Student Detail Updated"); } this.AddstudetnsTable = false; this.getData(); } //to Delete the selected student detail from database. deleteStudentsDetails(StdID) { var headers = new Headers(); headers.append('Content-Type', 'application/json; charset=utf-8'); this.http.delete('api/StudentMastersAPI/' + StdID, { headers: headers }).subscribe(); alert("Student Detail Deleted"); this.getData(); } closeEdits() { this.AddstudetnsTable = false; this.StdIDs = "0"; this.StdNames = ""; this.Emails = ""; this.Phones = ""; this.Addresss = ""; } } export interface StudentMasters { stdID: number; stdName: string; email: string; phone: string; address: string; }
步骤- 7创建HTML模板文件 右键单击学生文件夹，然后单击添加新项目。从左侧选择客户端，选择html文件，并将该文件命名为“students.component.html”，然后单击添加。 编写下面的html代码来将结果绑定到html页面中。 隐藏,收缩,复制Code
<h1[@fadeIn]='animStatus'>ASP.NET Core,Angular2 CRUD with Animation using Template Pack, WEB API and EF 1.0.1 </h1> <divclass="column"> <h2>Created by : </h2> <divstyle="background-color:#ff6a00;color:#FFFFFF;font-size:xx-large;width:260px;height:50px;text-shadow: -2px -1px 0px #000, 0px -1px 0px #000, 1px -1px 0px #000, -2px 0px 0px #000, 1px 0px 0px #000, -2px 1px 0px #000, 0px 1px 0px #000, 1px 1px 0px #000;text-align:center; border-color:#a2aabe;border-style:dashed;border-width:2px;"[@movelLeft]='animStatus'> {{myName}} </div> </div> <hrstyle="height: 1px;color: #123455;background-color: #d55500;border: none;color: #d55500;"/> <p*ngIf="!student"><em>Loading Student Details please Wait ! ...</em></p> <tableid="tblContainer"style='width: 99%;table-layout:fixed;'> <tr> <td> <tablestyle="background-color:#FFFFFF; border: dashed 3px #FFFFFF; padding: 5px;width: 99%;table-layout:fixed;"cellpadding="2"cellspacing="2"> <trstyle="height: 30px; color:#123455 ;border: solid 1px #659EC7;"> <tdwidth="40px"> </td> <tdwidth="50%"> <h1> Add New Students Information <strongstyle="color:#0094ff"> </strong></h1> </td> <tdalign="right"> <button(click)=AddStudent() style="background-color:#f83500;color:#FFFFFF;font-size:large;width:260px;height:50px; border-color:#a2aabe;border-style:dashed;border-width:2px;"[@moveRight]='animStatus'[@buttonReSize]='animStatus'> Add New Studetnt Information </button> </td> </tr> </table> </td> </tr> <tr> <td> <hrstyle="height: 1px;color: #123455;background-color: #d55500;border: none;color: #d55500;"/> </td> </tr> <tr*ngIf="AddstudetnsTable"> <td[@fadeIn]='animStatus'> <table> <tr> <td> <tablestyle="background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding :5px;width :99%;table-layout:fixed;"cellpadding="2"cellspacing="2"> <trstyle="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;"> <tdwidth="40"> </td> <td> <h2>Insert/Edit Student Details : </h2> </td> </tr> <tr> <tdwidth="100"> </td> <td> <tablestyle="color:#9F000F;font-size:large; padding :5px;"cellpadding="12"cellspacing="16"> <tr> <td><b>Students ID: </b> </td> <td> <inputtype="text"#StdID(ngModel)="StdIDs"value="{{StdIDs}}"style="background-color:tan"readonly> </td> <tdwidth="20"> </td> <td><b>Students Name: </b> </td> <td> <inputtype="text"#StdName(ngModel)="StdNames"value="{{StdNames}}"> </td> <td></td> </tr> <tr> <td><b>Email: </b> </td> <td> <inputtype="text"#Email(ngModel)="Emails"value="{{Emails}}"> </td> <tdwidth="20"> </td> <td><b>Phone: </b> </td> <td> <inputtype="text"#Phone(ngModel)="Phones"value="{{Phones}}"> </td> <td></td> </tr> <tr> <td><b>Address: </b> </td> <td> <inputtype="text"#Address(ngModel)="Addresss"value="{{Addresss}}"> </td> <tdwidth="20"> </td> <tdalign="right"colspan="2"> <button(click)=addStudentsDetails(StdID.value,StdName.value,Email.value,Phone.value,Address.value) style="background-color:#428d28;color:#FFFFFF;font-size:large;width:220px; border-color:#a2aabe;border-style:dashed;border-width:2px;"[@moveBottom]='animStatus'> Save </button> </td> <td> <button(click)=closeEdits() style="background-color:#334668;color:#FFFFFF;font-size:large;width:180px; border-color:#a2aabe;border-style:dashed;border-width:2px;"[@moveTop]='animStatus'> Close </button> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <tdcolspan="2"> <hrstyle="height: 1px;color: #123455;background-color: #d55500;border: none;color: #d55500;"/> </td> </tr> </table> </td> </tr> <tr> <td[@moveBottom]='animStatus'> <tableclass='table'style="background-color:#FFFFFF; border:2px #6D7B8D; padding:5px;width:99%;table-layout:fixed;"cellpadding="2"cellspacing="2"*ngIf="student"> <trstyle="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;"> <tdwidth="70"align="center">Edit</td> <tdwidth="70"align="center">Delete</td> <tdwidth="100"align="center">Student ID</td> <tdwidth="160"align="center">Student Name</td> <tdwidth="160"align="center">Email</td> <tdwidth="120"align="center">Phone</td> <tdwidth="180"align="center">Address</td> </tr> <tbody*ngFor="let StudentMasters of student"[@moveTop]='animStatus'> <tr> <tdalign="center"style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F"> <imgsrc="{{imgEdit}}"style="height:32px;width:32px"(click)=editStudentsDetails(StudentMasters.stdID,StudentMasters.stdName,StudentMasters.email,StudentMasters.phone,StudentMasters.address)> </span> </td> <tdalign="center"style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F"> <imgsrc="{{imgDelete}}"style="height:32px;width:32px"(click)=deleteStudentsDetails(StudentMasters.stdID)> </span> </td> <tdalign="center"style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F">{{StudentMasters.stdID}}</span> </td> <tdalign="left"style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F">{{StudentMasters.stdName}}</span> </td> <tdalign="left"style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F">{{StudentMasters.email}}</span> </td> <tdalign="center"style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F">{{StudentMasters.phone}}</span> </td> <tdalign="left"style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;"> <spanstyle="color:#9F000F">{{StudentMasters.address}}</span> </td> </tr> </tbody> </table> </td> </tr> </table>
增加学生导航菜单 我们可以在现有的菜单中添加新创建的student details菜单。 要添加新的导航菜单，请在导航菜单下打开“navmenu.component.html”。编写下面的代码来为学生添加导航菜单链接。 隐藏,复制Code
<li[routerLinkActive]="['link-active']"> <a[routerLink]="['/students']"> <spanclass='glyphicon glyphicon-th-list'></span> Students </a> </li>
步骤9 App模块 App模块是所有文件的根目录，我们可以找到App。Module。ClientApp\ app下的ts 导入我们的学生组件 隐藏,复制Code
import { studentsComponent } from './components/students/students.component';
接下来在@NGModule中添加studentsComponent 在路由中添加我们的学生路径。 代码将是这样的 隐藏,收缩,复制Code
import { NgModule } from <a href="mailto:'@angular/core'">'@angular/core'</a>; import { RouterModule } from <a href="mailto:'@angular/router'">'@angular/router'</a>; import { UniversalModule } from 'angular2-universal'; import { AppComponent } from './components/app/app.component' import { NavMenuComponent } from './components/navmenu/navmenu.component'; import { HomeComponent } from './components/home/home.component'; import { FetchDataComponent } from './components/fetchdata/fetchdata.component'; import { CounterComponent } from './components/counter/counter.component'; import { studentsComponent } from './components/students/students.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent, NavMenuComponent, CounterComponent, FetchDataComponent, HomeComponent, studentsComponent ], imports: [ UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. RouterModule.forRoot([ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: HomeComponent }, { path: 'counter', component: CounterComponent }, { path: 'fetch-data', component: FetchDataComponent }, { path: 'students', component: studentsComponent }, { path: '**', redirectTo: 'home' } ]) ] }) export class AppModule { }
步骤- 10构建并运行应用程序 构建和运行应用程序，你可以看到我们的主页动画和学生CRUD页面动画。 的兴趣点 首先在SQL服务器中创建数据库和表。您可以运行本文中的SQL脚本来创建StudentsDB数据库和StudentMasters表，同时不要忘记更改“appsettings.json”中的连接字符串。 历史 Angular2ASPCORE.zip——2017/03/02 本文转载于：http://www.diyabc.com/frontweb/news19913.html
浙公网安备 33010602011771号