ASP.NET MVC 後端回傳 JSON List 前端 jQuery 迴圈處理實例

MVC 控制器回傳 JSON 陣列，前端以 jQuery AJAX 接收並逐項處理是常見模式。本文提供完整後端與前端程式碼，示範庫存檢查場景。

後端控制器

[HttpPost]
public JsonResult CheckStock(IEnumerable<PvIdCount> pvIds)
{
    var resultList = new List<PvIdCount>();

    if (pvIds != null)
    {
        foreach (var item in pvIds)
        {
            int stock = _productService.GetProductVariantById(item.PvId).StockQuantity;
            if (stock - item.Count < 0)
            {
                resultList.Add(new PvIdCount 
                { 
                    PvId = item.PvId, 
                    Count = stock // 回傳實際可用庫存
                });
            }
        }
    }

    if (resultList.Count > 0)
    {
        // MVC Json() 會自動將 List 序列化為 JSON 陣列
        return Json(new { resultList });
    }
    return Json("success"); // 字串回應表示全部足夠
}

public class PvIdCount
{
    public int PvId { get; set; }
    public int Count { get; set; }
}

前端 AJAX 呼叫

$.ajax({
    url: '/Home/CheckStock',
    type: 'POST',
    data: JSON.stringify({
        pvIds: [
            { PvId: 101, Count: 5 },
            { PvId: 102, Count: 3 }
        ]
    }),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (data) {
        if (data === "success") {
            // 全部庫存足夠，繼續下單流程
            proceedToCheckout();
        } else if (data.resultList) {
            // 有庫存不足項目，逐項顯示錯誤
            $.each(data.resultList, function (index, item) {
                var selector = "#Item_PVId_" + item.PvId;
                $(selector).html("庫存不足，剩餘：" + item.Count);
            });
        }
    },
    error: function (xhr, status, err) {
        console.error("庫存檢查失敗", err);
    }
});

關鍵點解析

• 模型繫結：MVC 自動將 JSON 陣列反序列化為 IEnumerable<PvIdCount>，前端需送出 application/json 並 JSON.stringify。
• 回傳型別一致性：範例中成功回傳字串 "success"，失敗回傳物件 { resultList: [...] }。建議統一回傳物件結構（如 { success: true, data: [...] }）便於前端判斷。
• 匿名型別序列化：Json(new { resultList }) 產生 { "resultList": [...] }，屬性名為變數名。
• 前端迴圈：$.each(data.resultList, ...) 遍歷陣列，item.PvId、item.Count 對應 C# 屬性（駝峰命名由 JSON 序列化器決定，預設 PascalCase，可設定 CamelCasePropertyNamesContractResolver）。

改良建議：統一回應格式

public class ApiResponse<T>
{
    public bool Success { get; set; }
    public string Message { get; set; }
    public T Data { get; set; }
}

// 控制器
return Json(new ApiResponse<List<PvIdCount>> 
{ 
    Success = resultList.Count == 0, 
    Data = resultList 
});

// 前端
success: function (resp) {
    if (resp.Success) { proceedToCheckout(); }
    else { $.each(resp.Data, ...); }
}

統一格式提升前後端協作效率，便於擴充錯誤代碼、分頁資訊等。