ASP.NET MVC WebAPI 实现与前端集成

在本文中,将深入探讨如何使用ASP.NETMVCWebAPIEntity Framework构建RESTful API,并在前端应用中使用AJAX进行调用。这种设置允许后端和前端之间无缝交互,实现现代Web应用开发实践。

项目设置

首先,将创建一个包含两个项目的解决方案:

  • 数据访问层(类库):包含Entity FrameworkDbContext和数据访问的仓储模式。
  • MVCWeb API 项目:托管API端点并作为后端。

逐步实现

在数据访问层项目中,定义:

  • DatabaseTransactions:继承自DbContext并设置数据库连接。它包括一个DbSet用于ProductEntity,并使用OnModelCreating进行配置。
  • ProductEntity:表示一个产品,具有ID、ProductName、UnitPrice和Quantity等属性。
  • ProductRepository:使用Entity Framework实现CRUD操作。方法如AddProduct、GetALLProducts、GetProductByName、GetProductByID和deleteProduct通过DatabaseTransactions与数据库交互。

在这里,创建:

  • ProductController:一个控制器,它公开用于管理产品的API端点(GET、POST、PUT、DELETE)。控制器中的每个方法都与ProductRepository交互以执行CRUD操作。

API方法

以下是一些API方法的示例:

  • GetAllProducts:检索所有产品。
  • GetProductByName:检索与给定名称匹配的产品。
  • AddProduct:将新产品添加到数据库。
  • DeleteProduct:通过其ID删除产品。

以下是ProductController的C#代码示例:

public class ProductController : ApiController { [HttpGet] public IEnumerable<ProductEntity> GetAllProducts() { return new ProductRepository(new DatabaseTransactions()).GetALLProducts(); } [HttpGet] public HttpResponseMessage GetProductByName(string productName) { var entities = new ProductRepository(new DatabaseTransactions()).GetProductByName(productName); if (entities != null) return Request.CreateResponse(HttpStatusCode.OK, entities); else return Request.CreateErrorResponse(HttpStatusCode.NotFound, "Product with Name " + productName + " not found"); } [HttpPost] public HttpResponseMessage AddProduct([FromBody]ProductEntity _entity) { try { new ProductRepository(new DatabaseTransactions()).AddProduct(_entity); var message = Request.CreateResponse(HttpStatusCode.Created, _entity); message.Headers.Location = new Uri(Request.RequestUri + _entity.ID.ToString()); return message; } catch (Exception ex) { return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ex); } } [HttpDelete()] public HttpResponseMessage DeleteProduct(int id) { try { var _repository = new ProductRepository(new DatabaseTransactions()); var _entity = _repository.GetProductByID(id); if (_entity != null) { _repository.deleteProduct(_entity); return Request.CreateResponse(HttpStatusCode.OK); } else return Request.CreateErrorResponse(HttpStatusCode.NotFound, "The product with ID " + id + " not found"); } catch (Exception ex) { return Request.CreateErrorResponse(HttpStatusCode.Conflict, ex); } } }

HTML结构

此HTML代码结构了一个网页,具有以下功能:

  • 加载所有产品:点击“加载所有产品”按钮将触发一个动作(可能通过JavaScript)从API获取产品数据。
  • 按名称加载产品:用户可以输入产品名称并点击“按名称加载产品”按钮。这可能会启动一个搜索功能,使用输入的名称从API获取匹配的产品。

检索到的产品数据将在ID为ulProducts的无序列表(

    )元素中显示。

加载所有产品

点击此按钮以获取数据库中列出的所有产品。

按名称加载产品

输入产品名称并点击按钮以从数据库加载匹配的产品。

使用AJAX消费API

  • index.html:包含HTML结构和AJAX脚本以与API端点交互。
  • AJAX调用:使用jQueryAJAX,对API端点(GET、POST、DELETE)进行异步请求。
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485