简介：如果您是Angular 5和ASP.NET Core的新手，请阅读我之前的文章。在我之前的文章中，我已经解释了如何开始使用Angular 5和ASP.NET Core。现在，在这篇文章中，让我们深入了解如何使用WEB API，EF来为Angular 5和ASP.NE ...

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

如果您是Angular 5和ASP.NET Core的新手，请阅读我之前的文章。在我之前的文章中，我已经解释了如何开始使用Angular 5和ASP.NET Core。现在，在这篇文章中，让我们深入了解如何使用WEB API，EF来为Angular 5和ASP.NET Core应用程序执行CRUD操作。为了在这里执行CRUD操作，我已经将库存管理优先级的概念作为重新排序级别系统。库存管理和再订货级别库存管理对维护和管理小商店或大仓库的库存非常重要。例如，我们考虑一个小商店，他们出售的产品如牙膏，肥皂，洗发水等等。对于商店中的所有物品，他们将列出物品名称，并为每个物品添加总可用库存数量项目，每个项目的总销售数量和收到的要添加到库存中的总数量。如果物品数量较少，则很容易找到需要再次购买的物品来维持库存数量，考虑是否是大工厂，是否需要维护所有的库存数量。使用库存管理软件，最终用户可以轻松跟踪库存项目，总可用库存数量，总到货量和已发货库存数量，每个料品的再订货级别，重新订购级别在库存管理中重新排序水平或点是一个重要的部分，将用于指示客户作为这个项目股票将要完成，需要购买或生产销售或交付给最终用户。库存管理有很多流程需要维护来维护软件。在这篇文章中，我们将做一个简单的项目来显示基于Web的监控系统，以指示基于优先级的库存管理重新排序系统。对于再订货级别，必须有一些公式来显示每个需要库存的项目的指标。在我们简单的项目中，我已经使用了基于优先级的指示类型给客户手动和自动。注：在库存管理中，我们将有物料主数据表，物料明细表，库存表等。对于这个简单的项目，我只用了一个表作为库存表，并直接添加了物料名称与库存数量，重订货量和优先级状态，使用优先级状态用户可以添加或编辑每个需要立即储存的物品的优先级。这里的优先级状态是手动添加或编辑每个需要库存的物品的优先级。重新排序级别的手动优先级设置当客户添加/编辑每个库存项目时，他们可以手动设置重新排序库存的优先级。如果你问我这是什么意思，考虑一下我们在三星S7边缘项目中有1000个股票的情况，我们考虑这个股票可以使用两个月。但三星S7 Edge手机的需求量很大，一周后价格会有所上涨，现在我们需要立即增加库存量。通过编辑库存优先级，我们在世界各地有很多分支机构，所有分支机构都可以查看从我们的Web应用程序中添加股票到优先项目; 或者我们再考虑一个例子，因为我们有1000个数量库存，我们的客户打了一个电话，并要求我们在几天内交付5000个库存数量，在这种情况下，手动优先将会更有用。像这样，在很多情况下，有一个手动优先维护每个项目的股票是很好的。这是一个简单的演示项目，所以我没有添加很多字段的例子。我们还可以添加像重新排序日期的字段，直到我们需要增加库存数量和优先票据等。现在让我们添加一个新的项目到我们的清单，然后点击保存。在这里我们没有检查优先权状态，而添加新的项目，这意味着这个项目有良好的库存数量，现在不需要添加更多的库存数量。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

我们可以看到红色和绿色的优先状态栏，选中和取消选中框。当我们添加或编辑项目，如果我们已经检查了优先级状态并保存，那么项目列将与复选框图像一起显示为绿色。如果项目没有保存优先状态，则显示为红色。在这里，我们用绿色来表示客户，因为这个项目具有高优先级，并且需要用新的重新订购数量增加库存项目。现在让我们编辑项目并设置优先状态的项目。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

当我们保存与优先级状态相同的项目时，我们可以看到带有绿色的指示符和选中的图像。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

重新排序等级的自动优先级状态正如我已经告诉你的那样，对于重新订购数量，我们将使用公式来指示客户增加新订单数量的库存数量。在这里，我们可以看到天蓝色和浅绿色所需的优先级状态栏。浅蓝色表示该项目不需要重新排序，绿色表示该项目需要重新排序。对于自动显示器，我已经将公式设置为StockQty> ReorderQty + 50，然后将所需优先级状态设置为淡蓝色，表示客户为重新订购时不需要的项目，并且如果StockQty <= ReorderQty + 50，则设置所需优先级状态为浅绿色，表示客户是立即进行库存维护所需的物料。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

从上面新添加的三星S7 Edge项目库存数量是750，重新排序数量是50，因此所需的优先级状态显示为蓝色。现在，让我们编辑下面的项目，并将“重新订购数量”设置为700，然后保存以检查更改。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

这里现在我们可以看到所需的优先级状态颜色已经自动更改，因为库存数量是750，重新订购数量是700。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

现在让我们看看如何使用EF和Web API使用Angular5，ASP.NET Core来创建这个Web应用程序。先决条件确保您已经在计算机中安装了所有先决条件。如果没有，那么下载并安装所有，一个一个。
  1. 首先，从这个链接下载并安装Visual Studio 2017 。
  2. 下载 并安装.NET Core 2.0
  3. 下载并安装Node.js v9.0或更高版本。我已经安装了V9.1.0（下载 链接）。
代码部分现在是时候创建我们的第一个Angular5和ASP.NET Core应用程序了。第1步 - 创建一个数据库和一个表我们将使用我们的SQL Server数据库来处理我们的WEB API和EF。首先，我们创建一个名为InventoryPDB的数据库和一个名为InventoryMaster的表。下面是在我们的表中创建数据库表和样例记录插入查询的SQL脚本。在本地SQL Server中运行下面给出的查询来创建一个数据库和一个在我们的项目中使用的表。
  1. USE MASTER
  2. GO
  4. -- 1) Check for the Database Exists .If the database is exist then drop and create new DB
  5. IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = "InventoryPDB" )
  6. DROPDATABASE InventoryPDB
  7. GO
  9. CREATEDATABASE InventoryPDB
  10. GO
  12. USE InventoryPDB
  13. GO
  16. -- 1) //////////// StudentMasters
  18. IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = "InventoryMaster" )
  19. DROPTABLE InventoryMaster
  20. GO
  22. CREATETABLE [dbo].[InventoryMaster](
  23. [InventoryID] INT IDENTITY PRIMARYKEY,
  24. [ItemName] [varchar](100) NOTNULL,
  25. [StockQty] intNOTNULL,
  26. [ReorderQty] intNOTNULL,
  27. [PriorityStatus] intNOTNULL-- 0 for low and 1 for High
  28. )
  30. -- insert sample data to Student Master table
  31. INSERTINTO [InventoryMaster] ([ItemName],[StockQty],[ReorderQty],[PriorityStatus])
  32. VALUES ("HardDisk",500,300,0)
  34. INSERTINTO [InventoryMaster] ([ItemName],[StockQty],[ReorderQty],[PriorityStatus])
  35. VALUES ("Mouse",600,550,1)
  37. INSERTINTO [InventoryMaster] ([ItemName],[StockQty],[ReorderQty],[PriorityStatus])
  38. VALUES ("USB",3500,3000,0)
  41. select * from InventoryMaster
第2步 - 创建Angular5TemplateCore安装上面列出的所有先决条件和Angular5TemplateCore后，单击开始>>程序>> Visual Studio 2017 >> Visual Studio 2017，在桌面上。点击新建>>项目。选择Visual C＃>>选择Angular5Core2。输入您的项目名称，然后单击确定。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

一旦我们的项目被创建，我们可以在Solution Explorer中看到Angular5示例组件，ClientApp文件夹中的html和app以及Asp.NET核心控制器和视图文件夹。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

这里的这些文件和文件夹与我们的Angular2的ASP.NET Core Template Pack非常相似。Package.json文件如果我们打开package.Json文件，我们可以看到所有Angular5和Angular cli所需的依赖项已经被默认添加了。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

在Package.json中添加Webpack为了运行我们的Angular5应用程序，我们需要在我们的应用程序中安装webpack。如果wepack默认没有添加到我们的package.json文件中，那么我们需要手动添加.Webpack是一个开源的JavaScript模块捆绑器。Webpack使用依赖关系的模块，并生成代表这些模块的静态资源。要了解关于Webpack的更多信息，请点击这里。打开我们的package.json文件并在脚本下添加下面的行“postinstall”：“webpack --config webpack.config.vendor.js”

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

第3步 - 使用模型和上下文类添加连接字符串要添加连接字符串与我们的SQL连接，打开“appsettings.json”文件。是这是一个JSON文件，这个文件看起来如下所示。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

在这个appsettings.json文件中，我添加了连接字符串
  1. “ConnectionStrings” ：{
  2. “DefaultConnection” ： “Server = SQLSERVERNAME; Database = InventoryPDB; user id = SQLID; password = SQLPWD; Trusted_Connection = True; MultipleActiveResultSets = true;”
  3. }
注意根据您的本地连接更改SQL连接字符串。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

下一步是创建一个名为Data的文件夹来创建我们的模型和DBContext类。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

为库存创建模型类我们可以通过在我们的Data文件夹中添加一个新的类文件来创建一个模型。右键单击数据文件夹，然后单击添加>单击类。输入类名称作为InventoryMasters，然后单击添加。现在，在这个类中，我们首先创建一个属性变量，添加InventoryMaster。我们将在我们的WEB API控制器中使用它。注意，这里我们将添加与我们的数据库表列名称相同的字段名称。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

创建数据库上下文DBContext是Entity Framework类来建立到数据库的连接我们可以通过在我们的Data文件夹中添加一个新的类文件来创建一个DBContext类。右键单击数据文件夹，然后单击添加>单击类。输入类名称作为InventroyContext，然后单击添加。在这个类中，我们继承了DbContext并为我们的学生表创建了Dbset。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

Startup.CS现在，我们需要将我们的数据库连接字符串和提供程序添加为SQL SERVER。要添加这个，我们在ConfigureServices方法下的Startup.cs文件中添加下面给出的代码。
  1. publicvoid ConfigureServices(IServiceCollection services)
  2. {
  3. // Add Entity framework .
  4. services.AddDbContext<InventoryContext>(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
  5. services.AddMvc();
  6. }
第4步 - 为CRUD操作创建Web API要创建我们的WEB API控制器，请右键单击控制器文件夹。点击添加>>点击控制器。选择API控制器空白，然后点击添加按钮来创建我们的Web API。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

输入名称为“InventoryMasterAPI.cs”，然后单击添加。众所周知，Web API是为浏览器和移动设备构建HTTP服务的简单而简单的方法。Web API有四种方法，分别为Get / Post / Put和Delete。
  • 获取是请求数据。（选择）
  • 邮政是创建一个数据。（插）
  • Put是更新数据。
  • 删除就是删除数据。
首先我们在Web API类中为DBContext创建对象。
  1. [Produces("application/json")]
  2. [Route("api/InventoryMasterAPI")]
  3. publicclass InventoryMasterAPIController : Controller
  4. {
  5. private readonly InventoryContext _context;
  7. public InventoryMasterAPIController(InventoryContext context)
  8. {
  9. _context = context;
  10. }
get方法（选择操作）获取方法是从我们选择的数据库中请求单个项目或项目列表。在这里，我们将从InventoryMasters表中获取所有库存信息。
  1. // GET: api/InventoryMasterAPI
  3. [HttpGet]
  4. [Route("Inventory")]
  5. public IEnumerable<InventoryMaster> GetInventoryMaster()
  6. {
  7. return _context.InventoryMaster;
  9. }
Post方法（插入操作）Post方法将被用来将数据插入到我们的数据库中。在Post方法中，我们还将检查Inventory Id是否已经创建并返回消息。我们将传递要插入库存主表的所有库存主列参数。
  1. // POST: api/InventoryMasterAPI
  2. [HttpPost]
  3. public async Task<IActionResult> PostInventoryMaster([FromBody] InventoryMaster InventoryMaster)
  4. {
  5. if (!ModelState.IsValid)
  6. {
  7. return BadRequest(ModelState);
  8. }
  10. _context.InventoryMaster.Add(InventoryMaster);
  11. try
  12. {
  13. await _context.SaveChangesAsync();
  14. }
  15. catch (DbUpdateException)
  16. {
  17. if (InventoryMasterExists(InventoryMaster.InventoryID))
  18. {
  19. returnnew StatusCodeResult(StatusCodes.Status409Conflict);
  20. }
  21. else
  22. {
  23. throw;
  24. }
  25. }
  27. return CreatedAtAction("GetInventoryMaster", new { id = InventoryMaster.InventoryID }, InventoryMaster);
  28. }
  29. private bool InventoryMasterExists(int id)
  30. {
  31. return _context.InventoryMaster.Any(e => e.InventoryID == id);
  32. }
put方法（更新操作）放置方法将用于将选定的库存数据更新到我们的数据库。在Put方法中，我们将传递InventoryID以及所有其他参数进行更新。我们通过InventoryID来按InventoryID更新InventoryMaster表。
  1. // PUT: api/InventoryMasterAPI/2
  2. [HttpPut("{id}")]
  3. public async Task<IActionResult> PutInventoryMaster([FromRoute] int id, [FromBody] InventoryMaster InventoryMaster)
  4. {
  5. if (!ModelState.IsValid)
  6. {
  7. return BadRequest(ModelState);
  8. }
  10. if (id != InventoryMaster.InventoryID)
  11. {
  12. return BadRequest();
  13. }
  15. _context.Entry(InventoryMaster).State = EntityState.Modified;
  17. try
  18. {
  19. await _context.SaveChangesAsync();
  20. }
  21. catch (DbUpdateConcurrencyException)
  22. {
  23. if (!InventoryMasterExists(id))
  24. {
  25. return NotFound();
  26. }
  27. else
  28. {
  29. throw;
  30. }
  31. }
  33. return NoContent();
  34. }
delete方法（删除操作）删除方法将用于删除我们的数据库中选择的库存数据。在删除方法中，我们将通过InventoryID删除记录。
  1. // DELETE: api/InventoryMasterAPI/2
  2. [HttpDelete("{id}")]
  3. public async Task<IActionResult> DeleteInventoryMaster([FromRoute] int id)
  4. {
  5. if (!ModelState.IsValid)
  6. {
  7. return BadRequest(ModelState);
  8. }
  10. InventoryMaster InventoryMaster = await _context.InventoryMaster.SingleOrDefaultAsync(m => m.InventoryID == id);
  11. if (InventoryMaster == null)
  12. {
  13. return NotFound();
  14. }
  16. _context.InventoryMaster.Remove(InventoryMaster);
  17. await _context.SaveChangesAsync();
  19. return Ok(InventoryMaster);
  20. }
为了测试Get方法，我们可以运行我们的项目并复制GET方法的API路径。在这里，我们可以看到我们的API路径来获取api / InventoryMasterAPI / Inventory / 运行程序并粘贴API路径来测试我们的输出。

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

第5步：使用Angular5我们在ClientApp / App文件夹下创建所有与Angular5相关的应用程序，模块，服务，组件和HTML模板。在这里，我使用现有的Home Component和HTML来执行库存CRUD操作。为每个操作创建一个单独的Services，Component和html文件总是好的。对于这里的演示项目，我使用现有的家庭组件和HTML。Home.component从现有的家庭组件类型脚本文件，我已经添加了所有功能来执行我们的库存管理的CRUD操作。首先在导入部分，我们添加了HTTP和FormsModule，用于使用WEB API的Get / Post / Put / Delete和Forms来获取和设置来自用户的输入。在HomeComponent类中，我声明了所有需要的变量，并为Get / Post / put和Delete方法创建了单独的函数。在get方法中，我已经通过WEB API URL来获取来自数据库的所有数据，并将结果JSON数据绑定到我们的html页面。在Post和Put方法中，我将由表单中输入的用户的所有参数传递给WEB API，以便在数据库中执行更新和插入操作。与此相同，我们还通过将Inventory ID作为参数传递给我们的Web API，创建了从数据库中删除库存清单的删除方法。
  1. import { Component, Input, Inject } from "@angular/core";
  2. import { Http,Response, Headers, RequestOptions } from "@angular/http";
  3. import { FormsModule } from "@angular/forms";
  6. @Component({
  7. selector: "home",
  8. templateUrl: "./home.component.html"
  9. })
  10. exportclass HomeComponent {
  11. // to get the Student Details
  12. public Inventory: InventoryMaster[] = [];
  13. // to hide and Show Insert/Edit
  14. AddTable: Boolean = false;
  15. // To stored Student Informations for insert/Update and Delete
  16. public sInventoryID : number = 0;
  17. public sItemName = "";
  18. public sStockQty : number = 0;
  19. public sReorderQty : number = 0;
  20. public sPriorityStatus: boolean = false;
  22. //For display Edit and Delete Images
  23. public imgchk = require("./Images/chk.png");
  24. public imgunChk = require("./Images/unchk.png");
  25. public bseUrl: string = "";
  27. public schkName: string = "";
  28. myName: string;
  29. constructor(public http: Http, @Inject("BASE_URL") baseUrl: string) {
  30. this.myName = "Shanu";
  31. this.AddTable = false;
  32. this.bseUrl = baseUrl;
  33. this.getData();
  34. }
  37. //to get all the Inventory data from Web API
  38. getData() {
  40. this.http.get(this.bseUrl + "api/InventoryMasterAPI/Inventory").subscribe(result => {
  41. this.Inventory = result.json();
  42. }, error => console.error(error));
  44. }
  46. // to show form for add new Student Information
  47. AddInventory() {
  48. this.AddTable = true;
  49. // To stored Student Informations for insert/Update and Delete
  50. this.sInventoryID = 0;
  51. this.sItemName = "";
  52. this.sStockQty = 50;
  53. this.sReorderQty = 50;
  54. this.sPriorityStatus = false;
  55. }
  57. // to show form for edit Inventory Information
  58. editInventoryDetails(inventoryIDs : number, itemNames : string, stockQtys : number, reorderQtys : number , priorityStatus : number) {
  59. this.AddTable = true;
  60. this.sInventoryID = inventoryIDs;
  61. this.sItemName = itemNames;
  62. this.sStockQty = stockQtys;
  63. this.sReorderQty = reorderQtys;
  64. if (priorityStatus == 0)
  65. {
  66. this.sPriorityStatus = false;
  67. }
  68. else {
  69. this.sPriorityStatus = true;
  70. }
  72. }
  74. // If the InventoryId is 0 then insert the Inventory infromation using post and if the Inventory id is greater than 0 then edit using put mehod
  75. addInventoryDetails(inventoryIDs: number, itemNames: string, stockQtys: number, reorderQtys: number, priorityStatus: boolean) {
  76. var pStatus: number = 0;
  78. this.schkName = priorityStatus.toString();
  79. if (this.schkName == "true") {
  80. pStatus = 1;
  81. }
  82. var headers = new Headers();
  83. headers.append("Content-Type", "application/json; charset=utf-8");
  84. if (inventoryIDs == 0) {
  85. this.http.post(this.bseUrl + "api/InventoryMasterAPI/", JSON.stringify({ InventoryID: inventoryIDs, ItemName: itemNames, StockQty: stockQtys, ReorderQty: reorderQtys, PriorityStatus: pStatus }),
  86. { headers: headers }).subscribe(
  87. response => {
  88. this.getData();
  90. }, error => {
  91. }
  92. );
  94. }
  95. else {
  96. this.http.put(this.bseUrl + "api/InventoryMasterAPI/" + inventoryIDs, JSON.stringify({ InventoryID: inventoryIDs, ItemName: itemNames, StockQty: stockQtys, ReorderQty: reorderQtys, PriorityStatus: pStatus }), { headers: headers })
  97. .subscribe(response => {
  98. this.getData();
  100. }, error => {
  101. }
  102. );
  104. }
  105. this.AddTable = false;
  106. //
  107. //
  108. //this.http.get(this.bseUrl + "api/InventoryMasterAPI/Inventory").subscribe(result => {
  109. // this.Inventory = result.json();
  110. //}, error => console.error(error));
  111. }
  113. //to Delete the selected Inventory detail from database.
  114. deleteinventoryDetails(inventoryIDs: number) {
  115. var headers = new Headers();
  116. headers.append("Content-Type", "application/json; charset=utf-8");
  117. this.http.delete(this.bseUrl + "api/InventoryMasterAPI/" + inventoryIDs, { headers: headers }).subscribe(response => {
  118. this.getData();
  120. }, error => {
  121. }
  122. );
  124. //this.http.get(this.bseUrl + "api/InventoryMasterAPI/Inventory").subscribe(result => {
  125. // this.Inventory = result.json();
  126. //}, error => console.error(error));
  127. }
  129. closeEdits() {
  130. this.AddTable = false;
  131. // To stored Student Informations for insert/Update and Delete
  132. this.sInventoryID = 0;
  133. this.sItemName = "";
  134. this.sStockQty = 50;
  135. this.sReorderQty = 50;
  136. this.sPriorityStatus = false;
  137. }
  138. }
  140. exportinterface InventoryMaster {
  141. inventoryID: number;
  142. itemName: string;
  143. stockQty: number;
  144. reorderQty: number;
  145. priorityStatus: number;
  146. }
HTML模板文件这里我们使用home.component.html文件来执行库存管理的CRUD操作。
  1. <div align="center">
  2. <h1> ASP.NET Core,Angular5 CRUD for Invetory Management Priority based Reorder Level System, WEB API and EF </h1>
  3. </div>
  4. <div class="column">
  5. <h2>Created by : {{myName}}</h2>
  7. </div>
  8. <hr style="height: 1px;color: #123455;background-color: #d55500;border: none;color: #d55500;" />
  9. <p *ngIf="!Inventory"><em>Loading Inventory Details please Wait ! ...</em></p>
  10. <table id="tblContainer" style="width: 99%;table-layout:fixed;">
  11. <tr>
  12. <td>
  13. <table style="background-color:#FFFFFF; border: dashed 3px #FFFFFF; padding: 5px;width: 99%;table-layout:fixed;" cellpadding="2"
  14. cellspacing="2">
  15. <tr style="height: 30px; color:#123455 ;border: solid 1px #659EC7;">
  16. <td width="40px"> </td>
  17. <td width="50%">
  18. <h1> Add New Inventory Information <strong style="color:#0094ff"> </strong></h1>
  20. </td>
  21. <td align="right">
  22. <button (click)=AddInventory() style="background-color:#f83500;color:#FFFFFF;font-size:large;width:260px;height:50px;
  23. border-color:#a2aabe;border-style:dashed;border-width:2px;">
  24. Add New Inventory Info
  25. </button>
  27. </td>
  28. </tr>
  29. </table>
  31. </td>
  32. </tr>
  33. <tr>
  34. <td>
  35. <hr style="height: 1px;color: #123455;background-color: #d55500;border: none;color: #d55500;" />
  36. </td>
  37. </tr>
  38. <tr *ngIf="AddTable">
  39. <td >
  40. <table>
  41. <tr>
  42. <td>
  43. <table style="background-color:#FFFFFF; border: dashed 3px #6D7B8D; padding :5px;width :99%;table-layout:fixed;" cellpadding="2" cellspacing="2">
  44. <tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">
  45. <td width="40">
  47. </td>
  48. <td>
  49. <h2>Insert/Edit Inventory Details : </h2>
  50. </td>
  51. </tr>
  52. <tr>
  53. <td width="100">
  55. </td>
  56. <td>
  57. <table style="color:#9F000F;font-size:large; padding :5px;" cellpadding="12" cellspacing="16">
  58. <tr>
  59. <td><b>Inventory ID: </b> </td>
  60. <td>
  61. <input type="number" #InventoryID (ngModel)="sInventoryID" value="{{sInventoryID}}" style="background-color:tan" readonly>
  62. </td>
  63. <td width="20"> </td>
  64. <td><b>Item Name: </b> </td>
  65. <td>
  66. <input type="text" #ItemName (ngModel)="sItemName" value="{{sItemName}}" required>
  67. </td>
  68. <td></td>
  69. </tr>
  70. <tr>
  71. <td><b>Stock Quantity: </b> </td>
  72. <td>
  73. <input type="number" #StockQty (ngModel)="sStockQty" value="{{sStockQty}}" min="50" required>
  74. </td>
  75. <td width="20"> </td>
  76. <td><b>Reorder Quantity: </b> </td>
  77. <td>
  78. <input type="number" #ReorderQty (ngModel)="sReorderQty" value="{{sReorderQty}}" min="50" required>
  79. </td>
  80. <td></td>
  81. </tr>
  82. <tr>
  83. <td><b>Priority Status: </b> </td>
  84. <td>
  85. <input type="checkbox" #PriorityStatus (ngModel)="sPriorityStatus" value="{{sPriorityStatus}}" [checked]="sPriorityStatus"
  86. (change)="sPriorityStatus = !sPriorityStatus" >
  87. <!--<input type="text" #chkName (ngModel)="schkName" value="{{schkName}}">-->
  88. </td>
  89. <td width="20"> </td>
  90. <td align="right" colspan="2">
  91. <button (click)=addInventoryDetails(InventoryID.value,ItemName.value,StockQty.value,ReorderQty.value,PriorityStatus.value) style="background-color:#428d28;color:#FFFFFF;font-size:large;width:220px;
  92. border-color:#a2aabe;border-style:dashed;border-width:2px;">
  93. Save
  94. </button>
  95. </td>
  96. <td>
  98. <button (click)=closeEdits() style="background-color:#334668;color:#FFFFFF;font-size:large;width:180px;
  99. border-color:#a2aabe;border-style:dashed;border-width:2px;">
  100. Close
  101. </button>
  102. </td>
  103. </tr>
  104. </table>
  105. </td>
  106. </tr>
  107. </table>
  108. </td>
  109. </tr>
  110. <tr>
  111. <td colspan="2">
  112. <hr style="height: 1px;color: #123455;background-color: #d55500;border: none;color: #d55500;" />
  113. </td>
  114. </tr>
  115. </table>
  116. </td>
  117. </tr>
  118. <tr>
  119. <td>
  121. <table class="table" style="background-color:#FFFFFF; border:2px #6D7B8D; padding:5px;width:99%;table-layout:fixed;" cellpadding="2" cellspacing="2" *ngIf="Inventory">
  122. <tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">
  123. <td width="70" align="center">Edit</td>
  124. <td width="70" align="center">Delete</td>
  125. <td width="70" align="center">Inventory ID</td>
  126. <td width="120" align="center">Item Name</td>
  127. <td width="120" align="center">StockQty</td>
  128. <td width="120" align="center">ReorderQty</td>
  129. <td width="120" align="center">Priority Status</td>
  130. <td width="120" align="center">Required Priority Status</td>
  131. </tr>
  132. <tbody *ngFor="let INVY of Inventory">
  133. <tr>
  134. <td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
  135. <span style="color:#9F000F">
  137. <button (click)=editInventoryDetails(INVY.inventoryID,INVY.itemName,INVY.stockQty,INVY.reorderQty,INVY.priorityStatus)
  138. style="background-color:#0d254f;color:#FFFFFF;font-size:large;width:80px;
  139. border-color:#a2aabe;border-style:dashed;border-width:2px;">
  140. Edit
  141. </button>
  142. <!-- <img src="{{imgEdit}}" style="height:32px;width:32px" (click)=editStudentsDetails(StudentMasters.stdID,StudentMasters.stdName,StudentMasters.email,StudentMasters.phone,StudentMasters.address)>-->
  143. </span>
  144. </td>
  145. <td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
  146. <span style="color:#9F000F">
  147. <button (click)=deleteinventoryDetails(INVY.inventoryID)
  148. style="background-color:#0d254f;color:#FFFFFF;font-size:large;width:80px;
  149. border-color:#a2aabe;border-style:dashed;border-width:2px;">
  150. Delete
  151. </button>
  152. <!-- <img src="{{imgDelete}}" style="height:32px;width:32px" (click)=deleteStudentsDetails(StudentMasters.stdID)>-->
  153. </span>
  154. </td>
  155. <td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
  156. <span style="color:#9F000F">{{INVY.inventoryID}}</span>
  157. </td>
  158. <td align="left" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
  159. <span style="color:#9F000F">{{INVY.itemName}}</span>
  160. </td>
  162. <td align="right" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
  163. <span style="color:#9F000F">{{INVY.stockQty}}</span>
  164. </td>
  166. <td align="right" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
  167. <span style="color:#9F000F">{{INVY.reorderQty}}</span>
  168. </td>
  170. <td align="center" [ngStyle]="INVY.priorityStatus==1 && {"background-color": "green"} || INVY.priorityStatus==0 && {"background-color": "red"} " style="height:42px;width:42px">
  171. <!--<span style="color:#FFFFFF">{{INVY.priorityStatus}}</span>-->
  172. <div [ngStyle]="INVY.priorityStatus==1 && {"background-image": "url(" + imgchk + ")"} || INVY.priorityStatus==0 && {"background-image": "url(" + imgunChk + ")"} " style="background-repeat: no-repeat;height:38px;width:38px" >
  174. </div>
  176. </td>
  178. <td align="left" [ngStyle]="INVY.stockQty>INVY.reorderQty+50 && {"background-color": "#0094ff"} || INVY.stockQty<=INVY.reorderQty+50 && {"background-color": "#e5e800"} " style="border: solid 1px #ffffff; padding: 5px;table-layout:fixed;">
  179. <!--<span style="color:#FFFFFF">{{INVY.priorityStatus}}</span>-->
  180. </td>
  181. </tr>
  182. </tbody>
  183. </table>
  184. </td>
  185. </tr>
  186. </table>
重排序逻辑的手动优先设置当用户添加或编辑库存主文件，并且如果优先级状态被选中，那么我将在数据库中插入staus为1，如果优先级状态未被选中，那么我将把状态保存为0.在我们的html设计中，我将检查这个PriorityStatus的值，如果值返回为1，那么我会设置表td单元格背景色为绿色，并将图像设置为检查图像。
  1. <td align = “center” [ngStyle] = “INVY.priorityStatus == 1 && {"background-color"："green"} || INVY.priorityStatus == 0 && {"background-color"："red"} “ style =”height：42px; width：42px“ >
  2. <！ - <span style = “color：#FFFFFF” > {{INVY.priorityStatus}} </ span> - >
  3. <div [ngStyle] = “INVY.priorityStatus == 1 && {"background-image"："url（"+ imgchk +"）"} || INVY.priorityStatus == 0 && {"background-image"："url （"+ imgunChk +"）"}“ style = ”background-repeat：no-repeat; height：38px; width：38px“ >
  4. </ DIV>
  6. </ TD>
重排序逻辑的自动优先级状态在Required Priority Status列中，我检查了stockQty> reorderQty + 50，如果是true，那么我将td背景颜色设置为LightBlue，否则将颜色设置为LightGreen。
  1. <td align = “left” [ngStyle] = “INVY.stockQty> INVY.reorderQty + 50 && {"background-color"："＃0094ff"} || INVY.stockQty <= INVY.reorderQty + 50 && {"background -color"："＃e5e800"}“ style = ”border：solid 1px #ffffff; padding：5px; table-layout：fixed;“ >
  2. <！ - <span style = “color：#FFFFFF” > {{INVY.priorityStatus}} </ span> - >
  3. </ TD>

asp.net core的EF、WEB API和angular 5 实现库存管理系统的CRUD

构建并运行应用程序构建并运行应用程序，您可以通过Inventory Management CRUD页面查看主页。注意首先，在SQL Server中创建一个数据库和表。您可以运行使用上面的表创建脚本创建数据库和示例插入表。不要忘记从“appsettings.json”更改数据库连接字符串。项目下载地址：本文仅代表作者个人观点，不代表巅云官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员，邮箱2522407257@qq.com。更多相关资讯，请到巅云www.rzxsoft.cn学习互联网营销技术请到巅云建站www.rzxsoft.cn。