ASP.NET 和 AJAX 嵌入式 HTML 修改答案

【问题标题】：ASP.NET and AJAX Embedded HTML ModificationASP.NET 和 AJAX 嵌入式 HTML 修改
【发布时间】：2013-05-02 19:18:37
【问题描述】：

我的项目在首页上有一个“HUD”，列出了正在转换课程计划的学生。它通过对单独的 .ascx 页面进行 AJAX 调用来实现这一点，该页面在 C# 中运行一些 SQL 语句并呈现 HTML。然后它将它传递回首页以放入名为“动态”的 div 中。这是首页上调用它的代码：

    function loadDynamic() {
        var ControlName = "utilities/HUD.ascx";
        $.ajax({
            type: "POST",
            url: "Default.aspx/Result",
            data: "{controlName:'" + ControlName + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                $('#dynamic').html(response.d);
            },
            failure: function (msg) {
                $('#dynamic').html(msg);
            }
        });
    }

这样做是为了方便多人在系统上工作并能够获得实时更新（还有另一个脚本每 10 秒重新调用一次 loadDynamic() 函数，但这与此问题无关）。

但是，可能会有很多学生同时尝试更改课程计划，因此为了节省页面空间，我们决定尝试放入“...和 # 更多记录” " 链接（在 href 中带有 javascript 调用的标记）将激活另一个 javascript 函数以显示包含所有学生的单独列表并隐藏仅包含少数学生的列表（此 javascript 函数位于HUD.ascx 页面）。

<script type="text/javascript">
    function loadMorePending() {
        this.document.getElementById(<% =pnlMorePending.ClientID %>).style.visibility = 'visible';
        this.document.getElementById(<% =pnlPending.ClientID %>).style.visibility = 'hidden';
}
</script>

现在你有了背景，问题来了：

上面显示的第二个代码块包含对两个 asp:Panel 的引用，其中包含位于 HUD.ascx 页面上的列表。当有人单击“...和更多”链接时，它应该简单地隐藏一个 asp:Panel 并显示另一个。但是，当它调用该函数时，会引发“Microsoft JScript 运行时错误：'ctl01_pnlMorePending' 未定义”。经过进一步调查（在浏览器中呈现后查看 html 源代码时），即使“动态”div 填充了来自 HUD.ascx 页面的数据，它仍然是空的！

<div id="dynamic"></div>

虽然这可以解释为什么找不到 pnlMorePending，但它并没有给我任何关于如何纠正这个问题的线索。我应该如何引用页面上不存在的内容？我试过用面板代替 div，但它仍然不起作用。我认为，问题在于脚本可以很好地转移到首页，但它没有在需要的 HUD.ascx 页面上运行。有没有办法在没有 2 个不同的 HUD.ascx 页面和 2 个不同的“loadDynamic()”函数的情况下做到这一点（当按下“...和更多”按钮时，第二个被调用并填充到“动态”div 中） ?

抱歉，如果有点难以理解。第一次发帖，问题很深。

【问题讨论】：

标签： c# javascript asp.net ajax

【解决方案1】：

您缺少引号：

this.document.getElementById('<% =pnlMorePending.ClientID %>').style.visibility = 'visible';

【讨论】：