使用 jQuery.load() 在 div 中打开 ASP.NET 页面答案

【问题标题】：Open ASP.NET page in div using jQuery.load()使用 jQuery.load() 在 div 中打开 ASP.NET 页面
【发布时间】：2013-02-12 12:07:27
【问题描述】：

我正在使用下面的代码在 div 标签内打开一个网页。

 $(document).ready(function () {
                $("#popupContact").load("Wizard.aspx");

            });

在 Wizard.aspx 页面中，我有一个 Telerik RadTabStrip 控件。加载页面时，选项卡控件显示没有任何问题，但我无法导航到选项卡页（选项卡不起作用）。

如果我在没有 jquery 代码的情况下加载页面 Wizard.aspx，一切正常。

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" >
    </telerik:RadScriptManager>
    <div class="exampleWrapper" style="background-repeat: repeat;" >
    <a id="popupContactClose"><b>X</b></a>
   <b>Fill the Form</b>
        <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="LoadingPanel1"
            Height="100%">
            <div style="float: left; width: 500px; ">
                <telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1"
                    Skin="Sunset" CssClass="tabStrip">
                </telerik:RadTabStrip>
                <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated"
                    CssClass="multiPage">
                </telerik:RadMultiPage>
            </div>
            <div id="specialdiv" class="previewWrapper" style="background-image: url('images/preview.jpg')">
                <uc1:PreviewCS ID="previewControl" runat="server"></uc1:PreviewCS>
            </div>
        </telerik:RadAjaxPanel>

    </div>

【问题讨论】：

标签： jquery asp.net tabs telerik

【解决方案1】：

jQuery.load() 从页面获取呈现的 HTML 输出并将此 HTML 插入到您的选择器元素中。

从服务器加载数据并将返回的 HTML 放入匹配的元素。

在您的情况下，使用 Wizard.aspx 呈现的 HTML 嵌套在您的 #popupContact div 中。

此 Telerik 控件使用的任何服务器端事件等都不会回发到 Wizard.aspx，因此不会按预期工作。

在使用需要回发的 ASP.NET WebForms 和控件时，我建议将您的 Wizard.aspx 代码添加到自定义用户控件（例如：Wizard.ascx）中，然后在 AJAX UpdatePanel 中调用它。

这确保所有回发等仍然与ViewState 链接。

或者（这是我个人会采用的方法）考虑删除对 Web 控件的使用，并将它们替换为不依赖于 ViewState 的 HTML。

我不熟悉确切的 Telerik 控件，但我确信有一种方法可以不使用 Telerik 并使用 HTML 和 jQuery。然后您可以使用 jQuery.load() 并在您的 javascript 中重新附加任何事件处理程序。

这将产生更轻、更可控的输出。

【讨论】：

补充一点——Curt 的一般观点是正确的。 Telerik 的控件是 IScriptControls，因此它们依赖于 MS AJAX 框架及其提供的功能。因此，正是这些事件提供了控件的客户端对象的初始化，从而提供了您正在寻找的丰富功能。当仅通过 AJAX 加载标记时，这些事件不可用，没有人为每个脚本控件调用 $create() 以使其工作。如果您需要获取这样的页面（字符串），请使用标准 HTML。 Telerik 的 jQuery UI 或 KendoUI。或用户控件
我只是检查 IE 上的功能。令人惊讶的是它在 IE 中完美运行。在我只检查 chrome 和 firefox 之前。知道为什么会这样吗？

【解决方案2】：

除非Wizard.aspx 是部分页面，否则调用$("#popupContact").load("Wizard.aspx"); 会将整个HTML 文档加载到您的div 中，这将导致完全无效的标记。无效的标记往往会级联成很多其他不起作用的东西......

应该注意.load() 允许您在注入之前从结果中提取一个片段 - 将带有“向导”控件容器 ID 的 URL 片段添加到您提供给@987654325 的 URL @：

$("#popupContact").load("Wizard.aspx #wizard_or_whatever_you_named_this");

但是，您将丢失该页面上嵌入的所有 CSS 或 JavaScript。

【讨论】：

【解决方案3】：

您可以使用iframes。

iframe: 标签指定内嵌框架。内联框架用于在当前 HTML 文档中嵌入另一个文档。

例如：

<iframe src="Wizard.aspx" id="ifrmWizard"></iframe> 

$(document).ready(function () {
     $("#ifrmWizard").attr("src","Wizard.aspx");
});

【讨论】：

【解决方案4】：

Jquery 颜色框终于为我工作了。它使用 iframe 加载外部窗口并且没有产生任何问题。

http://www.jacklmoore.com/colorbox/example1/

【讨论】：