MVC后台创建Json(List)前台接受并循环读取实例

在本文中，我们将深入探讨如何在ASP.NET MVC框架中创建JSON数据（List）并在前端进行循环读取。这个实例展示了如何在后端处理一个包含多个元素的列表，并将其转化为JSON格式，然后在前端通过AJAX请求接收并遍历这些数据。 ### 后台创建Json(List) 在MVC应用中，我们经常需要将服务器端的数据转化为JSON格式，以便于前端JavaScript代码进行处理。在给出的示例中，控制器中的`CheckStock`方法接收一个类型为`IEnumerable<pvIdsCount>`的参数，然后进行一系列操作。`pvIdsCount`是自定义的一个简单类，用于存储`pvId`和`count`两个属性。 ```csharp public class pvIdsCount { public int pvId { set; get; } public int count { set; get; } } ``` 在`CheckStock`方法中，遍历传入的`pvIds`列表，根据业务逻辑处理每个元素，并将结果存储到新的`resultList`列表中。如果`resultList`有数据，就使用`JsonResult`返回一个新的匿名对象，其中`resultList`属性包含处理后的列表。`Json()`方法是MVC内置的，它会自动将`List<T>`或`IEnumerable<T>`类型转换为JSON数组。 ```csharp [HttpPost] public JsonResult CheckStock(IEnumerable<pvIdsCount> pvIds) { // ... 省略的代码 ... if (resultList.Count > 0) { return Json(new { resultList }); } else { return Json("success"); } } ``` ### 前台接受并循环读取 在前端，通常使用AJAX来与服务器进行异步通信。在这个例子中，使用jQuery的`$.ajax`或者`$.getJSON`、`$.post`等方法发送POST请求。当请求成功时，会在`success`回调函数中接收到服务器返回的JSON数据。 ```javascript $.ajax({ url: "/Controller/CheckStock", // 替换为实际的URL type: "POST", data: {/* 传递给服务器的参数 */}, dataType: "json", success: function (data) { if (data == "success") { // 处理成功但无数据的情况 } else { // 遍历resultList $.each(data.resultList, function (index, value) { $("#Item_PVId_" + value.pvId).html("This Product's Stock Not Enough.Stock is " + value.count); }); } } }); ``` 在`success`回调中，首先检查返回的数据是否为字符串"success"，如果没有数据则执行相应处理。如果有数据，则使用`$.each`遍历`data.resultList`数组。对于每个元素，更新页面上对应ID的元素内容，显示库存不足的提示以及库存数量。 总结起来，这个实例演示了ASP.NET MVC中如何创建JSON数据（List），以及在前端如何通过AJAX请求接收并循环读取这些数据。在实际开发中，这种模式被广泛应用于异步更新视图、数据验证、实时数据显示等多种场景。通过理解并熟练掌握这种技术，你可以更好地构建交互性强、响应快速的Web应用。