为啥在 MVC 3 中使用 ajax 动态加载表只能在兼容模式下工作？

Posted 2023-05-08

【中文标题】为啥在 MVC 3 中使用 ajax 动态加载表只能在兼容模式下工作？

【英文标题】：Why does loading a table dynamically using ajax in MVC3 only work in compatability mode?为什么在 MVC 3 中使用 ajax 动态加载表只能在兼容模式下工作？

【发布时间】：2012-07-05 19:46:24

【问题描述】：

我正在尝试在 MVC3 中使用 AJAX 动态加载表。为什么这只能在 IE9 的兼容模式下工作？有办法解决吗？

查看：

<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script type="text/javascript">

    $.ajax(
        type: 'POST',        
        url: "/Index/GetApplicationsForUserJSON",       
        success: function (data) 
            for (var i = 0; i < data.length; i++) 
                $("#ApplicationsForUser tbody").append("<tr>" +
                            "<td>" + data[i].Application + "</td>" +
                            "<td>" + data[i].Roles + "</td>" +
                        "</tr>");
            

            $("tr:odd").css( 'backgroundColor': '#ebf0f5' );            
        
    );

</script>

        <table id="ApplicationsForUser" class="ui-widget ui-widget-content" style="width: 99%;
            margin: 3px 0px 0px 3px">
            <thead>
                <tr class="ui-widget-header ">
                    <th style="width: 45%">
                        Application
                    </th>
                    <th style="width: 45%">
                        Roles
                    </th>                    
                </tr>
            </thead>
        </table>

控制器：

  public JsonResult GetApplicationsForUserJSON()
        

            Dictionary<string, string> tableData = new Dictionary<string, string>();
            tableData.Add("row1", "row1data");

            var jsonData = tableData
                          .Select(c => new
                          
                              Application = c.Key,
                              Roles = c.Value
                          );

            return Json(jsonData, JsonRequestBehavior.AllowGet);

        

编辑：图片！

【参考方案1】：

我在您的示例中没有看到 tbody 元素。不过，您的 .append() 调用选择器包括一个。也许在兼容模式下，IE9 “假设” tbody 的存在作为表格的内容。

【参考方案2】：

因为某些浏览器即使在不应该这样做的情况下也可以存储数据，所以某些浏览器元素不会在用户请求时刷新。因此您必须通过在控制器级别指定这一点来强制执行此操作：

[OutputCache(NoStore = true, Duration = 0)]

这将告诉浏览器不要存储来自先前请求的请求相关数据。

【讨论】：

没有为我修复它...表格数据仍然不显示

它在 Firefox 中是否提供相同的行为？

没有安装 Firefox，但刚刚意识到它在 Chrome 中也不起作用 - 即使使用 OutputCache 属性

什么时候调用你的ajax方法？你有它的按钮或者它连接到一个事件吗？

在真正的应用程序中，它是在按钮事件上调用的，但在我在这里创建的示例中，它只是按原样调用（当页面加载时，虽然我没有在 document.ready 中调用） - 我尝试从 document.ready 调用它，但它仍然不起作用