当前位置：首页 > 技术教程 > 正文

如何用Asp.net实现无刷新调用后台实体类数据并以Json格式返回？

Asp.net实现无刷新调用后台实体类数据并以Json格式返回

在Web开发中,无刷新数据交互是提升用户体验的关键技术，用户无需刷新页面即可获取后台数据，实现实时更新或动态加载，Asp.net提供了完善的框架支持，通过AJAX技术实现前端与后端的异步通信，将后台实体类数据序列化为Json格式返回，本文将详细介绍Asp.net实现无刷新调用后台实体类数据的方法，包括技术原理、实现步骤、关键点、性能优化及常见问题解答。

技术原理

无刷新数据调用的核心是异步HTTP请求与响应机制，具体流程如下：

  1. 前端发起异步请求：通过JavaScript（如jQuery、原生fetch）向服务器发送非页面跳转的HTTP请求（如GET/POST）。
  2. 后端处理请求：Asp.net控制器接收请求，处理业务逻辑（如数据库查询），返回包含实体类数据的响应。
  3. 实体类序列化：将C#实体类对象转换为Json字符串，通过JsonResult或IActionResult返回。
  4. 前端接收数据：JavaScript接收Json数据，解析并更新页面内容。

Asp.net通过Web API或MVC Controller实现后端逻辑，其中Web API更专注于RESTful服务，MVC Controller兼顾视图渲染和数据交互。

实现步骤

创建实体类（Entity Class）

实体类用于封装业务数据,需包含必要的属性和访问器（getter/setter），示例：

public class Product { public int Id { get; set; } // 主键 public string Name { get; set; } // 商品名称 public decimal Price { get; set; } // 价格 public string Category { get; set; } // 分类 }

关键点：

  • 属性需为公共访问（public），否则序列化时可能报错。
  • 复杂类型（如集合、嵌套对象）需合理设计，避免Json结构过深。

创建控制器（Controller）

在Asp.net中，通过Controller定义处理请求的方法（Action），示例：

[ApiController] // 标识为API控制器 [Route("api/[controller]")] // 路由前缀（如/api/product） public class ProductController : ControllerBase { [HttpGet("getproducts")] // 定义GET请求路径 public IActionResult GetProducts() { var products = new List<Product> { new Product { Id = 1, Name = "iPhone 15", Price = 7999, Category = "手机" }, new Product { Id = 2, Name = "MacBook Pro", Price = 12999, Category = "电脑" } }; return Json(products); // 返回Json结果 } }

关键点：

  • 使用[ApiController]装饰器简化响应处理（如自动设置Content-Type为application/json）。
  • 方法返回IActionResult（如JsonResult），而非void。

配置路由（Route Configuration）

在Startup.cs（ASP.NET Core）或Program.cs（.NET 6+）中配置路由，确保请求能正确映射到Controller，示例：

app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); // 统一路由

对于Web API，可单独配置：

app.MapControllers(); // 启用控制器路由

前端调用（JavaScript示例）

使用jQuery或原生fetch实现异步请求,示例（jQuery）：

如何用Asp.net实现无刷新调用后台实体类数据并以Json格式返回？ 第1张

关键点解析

实体类序列化配置

默认情况下,Asp.net使用System.Text.Json进行序列化，可通过JsonSerializerOptions自定义配置：

var options = new JsonSerializerOptions { PropertyNamingPolicy = JsonNamingPolicy.CamelCase, // 属性名驼峰化 ReferenceHandler = ReferenceHandler.Preserve, // 处理对象引用 WriteIndented = true // 格式化输出（便于调试） }; return Json(products, options);

错误处理与状态码

后端应返回合适的HTTP状态码,前端根据状态码处理异常，示例：

[HttpGet("getproduct/{id}")] public IActionResult GetProduct(int id) { var product = _productService.GetProduct(id); if (product == null) return NotFound(); // 404未找到 return Ok(product); // 200成功 }

跨域问题（CORS）

若前端与后端不在同一域名,需配置跨域资源共享（CORS），在Startup.cs中添加：

app.UseCors(builder => builder .AllowAnyOrigin() // 允许任意域名 .AllowAnyMethod() // 允许任意HTTP方法 .AllowAnyHeader()); // 允许任意请求头

性能优化

数据缓存

对频繁请求的数据使用缓存,减少数据库查询，示例（ASP.NET Core输出缓存）：

如何用Asp.net实现无刷新调用后台实体类数据并以Json格式返回？ 第2张

[ResponseCache(Duration = 60)] // 缓存60秒 [HttpGet("getproducts")] public IActionResult GetProducts() { // 缓存有效期内直接返回缓存结果 }

异步处理

数据库操作（如EF Core）需使用async/await，避免阻塞主线程，示例：

[HttpGet("getproducts")] public async Task<IActionResult> GetProducts() { var products = await _productRepository.GetAllAsync(); return Json(products); }

数据分页

对于大量数据,使用分页查询，减少一次性返回的数据量，示例：

[HttpGet("getproducts")] public IActionResult GetProducts(int page = 1, int size = 10) { var products = _productRepository.GetPaged(page, size); return Json(products); }

请求压缩

启用Gzip压缩,减少传输数据大小，在appsettings.json中配置：

{ "Compression": { "Enabled": true, "Types": ["application/json"] } }

表格对比：Web API vs MVC Controller

特性 Web API MVC Controller
请求类型 仅支持GET/POST等标准HTTP方法 支持所有HTTP方法（如PUT、DELETE）
序列化库 默认使用System.Text.Json 默认使用Newtonsoft.Json（需安装包）
路由 专用路由（/api/[controller]/[action]） 统一路由（/[controller]/[action]）
适用场景 跨平台、RESTful服务（如移动端、API网关） 内部Web应用、视图渲染（如页面列表）
状态码处理 自动返回状态码 需手动返回状态码（如return BadRequest()）

常见问题与解答（FAQs）

如何处理实体类中的复杂类型（如嵌套对象）？

解答：

  • 使用JsonSerializerOptions配置： var options = new JsonSerializerOptions { ReferenceHandler = ReferenceHandler.Preserve, // 处理对象引用 WriteIndented = true // 格式化输出 }; return Json(products, options);
  • 或使用JsonIgnore属性忽略不序列化的属性： [JsonIgnore] public DateTime CreatedAt { get; set; }

跨域请求如何解决？

解答：

  • 后端配置：在Startup.cs中添加CORS中间件： app.UseCors(builder => builder .AllowAnyOrigin() // 允许任意域名 .AllowAnyMethod() // 允许任意HTTP方法 .AllowAnyHeader()); // 允许任意请求头
  • 前端设置：使用fetch时添加credentials: 'include'（用于带cookie的跨域）： fetch('/api/product/getproducts', { method: 'GET', credentials: 'include' // 包含cookie }) .then(response => response.json()) .then(data => console.log(data));

Asp.net通过Web API或MVC Controller实现无刷新数据调用，核心是异步HTTP请求、实体类序列化及前端JavaScript交互，通过合理设计实体类、配置序列化选项、处理跨域和性能优化，可高效实现数据无刷新获取，本文详细介绍了实现步骤及关键点，帮助开发者快速上手并解决常见问题。

如何用Asp.net实现无刷新调用后台实体类数据并以Json格式返回？ 第3张

net Jsonnet 后台实体类 Jsonnet 实体类无刷新返回 Jsonnet 无刷新调用实体类数据 Json
0

相关文章