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

Question

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

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

            });

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

如果我加载页面 Wizard.aspx 而不使用 jquery 代码，则一切正常。

<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> 

Answer 1

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

Load data from the server and place the returned HTML into the matched element.

在您的情况下，使用 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 中的任何事件处理程序。

这将带来更轻、更可控的输出。