foreach循环内HTML未渲染求助：数据已传递但页面不显示

你遇到的核心问题是：Ajax 请求不会处理控制器返回的 RedirectToAction 跳转。

虽然你的调试流程显示控制器里的 TempData 和 ViewBag 都正确拿到了数据，但 Ajax 只是异步接收请求响应，不会触发浏览器的页面跳转——当前页面的 ViewBag 还是初始加载时的空值，自然无法渲染出 foreach 循环里的 HTML 内容。

下面给你两个可行的解决方案，从简单到更优：

方案1：Ajax 成功后手动触发页面刷新 #

这个方案最贴合你现有的代码逻辑，只需要修改 Ajax 的成功回调：

$.ajax({ 
    type: "GET", 
    url: "/Home/DisplayProviders", 
    contentType: "application/json; charset=utf-8", 
    data: { area: areaSelected, mode: modeSelected, eligibility: eligibilitySelected }, 
    datatype: "json", 
    traditional: true, 
    success: function (response) { 
        // 直接让浏览器跳转到 Index 页面，此时会重新请求 Index 方法并加载 ViewBag 数据
        window.location.href = "/Home/Index";
    }, 
    failure: function (response) { 
        alert("Failure"); 
    }, 
    error: function (response) { 
        alert("Error"); 
    } 
});

注意：TempData 的数据仅在一次HTTP请求周期内有效，页面刷新后数据就会丢失，如果需要保留数据，可以考虑改用 Session 或者把筛选条件存在 URL 参数里。

方案2：直接返回 JSON 数据，前端动态渲染（更优） #

既然用了 Ajax，完全没必要走「存 TempData → 跳转 → 赋值 ViewBag」的流程，直接返回筛选后的 JSON 数据，前端用 JavaScript 动态生成 HTML 是更符合 Ajax 异步特性的做法，用户体验也更好：

第一步：修改控制器的 DisplayProviders 方法 #

把跳转逻辑改成返回 JSON 数据：

[HttpGet] 
public ActionResult DisplayProviders(string[] area, string[] mode, string[] eligibility) { 
    var allProviders = repo.GetProviders(); 
    // 你的筛选逻辑保持不变
    var providersFound = // 筛选后的服务商集合
    // 返回 JSON 格式数据，允许 GET 请求访问
    return Json(providersFound, JsonRequestBehavior.AllowGet);
}

第二步：修改视图代码 #

保留表单，把原来的静态渲染区域改成空容器：

@model TransportationProvidersDemo.Models.Provider 
<!--HTML表单（省略）--> 
<input type="submit" /> 
<!-- 用来承载动态渲染结果的容器 -->
<div id="providersContainer"></div>

第三步：修改 Ajax 的成功回调 #

在回调里循环生成 HTML 并插入到容器中：

$.ajax({ 
    type: "GET", 
    url: "/Home/DisplayProviders", 
    contentType: "application/json; charset=utf-8", 
    data: { area: areaSelected, mode: modeSelected, eligibility: eligibilitySelected }, 
    datatype: "json", 
    traditional: true, 
    success: function (providers) { 
        var container = $("#providersContainer");
        container.empty(); // 清空之前的结果
        
        if (providers && providers.length > 0) {
            // 循环生成每个服务商的HTML
            $.each(providers, function(index, item) {
                var providerHtml = `<div><h3>${item.AgencyName}</h3></div>`;
                container.append(providerHtml);
            });
        } else {
            container.html("<p>没有找到符合条件的服务商</p>");
        }
    }, 
    failure: function (response) { 
        alert("Failure"); 
    }, 
    error: function (response) { 
        alert("Error"); 
    } 
});

内容的提问来源于stack exchange，提问作者merr_meow