个人中心
gpt4 book ai didi

jquery - 当用户控件通过 JQuery ajax 调用异步加载并多次加载时，Ajax 控件已停止工作

转载 作者：行者123 更新时间：2023-12-01 00:27:02 25 4
gpt4 key购买 nike

我创建了一个用户控件，其中有几个 ajax 控件。我在 datalist 下使用此用户控件itemtemplate 并将其绑定(bind)到数据列表的每个项目，到目前为止，当我从服务器端加载用户控件时，一切都工作正常，但是使用这种方法页面需要花费大量时间来呈现，因为用户控件正在逐一加载并且数据用户控制下的计算本身需要时间。

然后我尝试使用 jQuery 异步加载每个用户控件。 , Ajax和IHttpHandler但是AjaxToolkit:CollapsiblePanelExtender停止工作。但是如果我通过服务器加载用户控件，一切都会正常。

要通过服务器加载它，只需取消注释 <%--<uc:CountryInfo runat="server" ID="ucCountryInfo" /> --%> AsyncLoadDemo.aspx 文件中的行并对此进行注释

ScriptManager.RegisterStartupScript(Me, Me.GetType, "renderUC" + DataBinder.Eval(e.Item.DataItem, "CountryID").ToString(), js, True)

AsyncLoadDemo.aspx.vb 文件中的行

下面是我为演示该问题而创建的代码。

AsyncLoadDemo.aspx

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
    .floating {
        float: left;
        overflow: hidden;
    }

    .vertical-text {
        transform: rotate(90deg);
        transform-origin: center center 0;
        color: black;
        font-size: 18px;
        white-space: nowrap;
        text-align: center;
        margin-left: 4px;
        opacity: 1;
    }
</style>

<script language="javascript" type="text/javascript">
    function LoadControl(countryID, parentDivID) {

        $.ajax({
            type: 'POST',
            url: 'UserControlHandler.ashx?CountryID=' + countryID,
            contentType: 'application/json; charset=utf-8',
            dataType: 'html',
            success: function (response) {
                $('#' + parentDivID).html(response);
                $('#' + parentDivID).show();
            },
            error: function (response) {
                alert(response);
            }
        });

        //return false;
    }
</script>
</head>
<body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <CompositeScript>
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" ScriptMode="Release" />
            </Scripts>
        </CompositeScript>
    </asp:ScriptManager>

    <asp:Panel ID="pnlDetail" runat="server">

        <asp:DataList ID="dtLstCountry" runat="server" DataKeyField="CountryID" ShowHeader="False" RepeatColumns="3">
            <ItemTemplate>
                <table style="opacity: 1;" cellpadding="0" cellspacing="0" border="1">
                    <tr>
                        <td style="vertical-align: top; height: 200px; opacity: 1; padding: 3px; padding-left: 6px; border: none" runat="server" id="tdExpandCollaps">
                            <asp:ImageButton ID="imgRatingInfoVerticalTag" runat="server" OnClientClick="javascript:return false;" ImageUrl="~/Left-Slider-open.png" />
                            <div class="vertical-text" style="width: 20px; padding-top: 10px;">
                                <%#Eval("Country")%>
                            </div>
                        </td>
                        <td style="vertical-align: top;">
                            <asp:Panel ID="pnlRatingInfo" runat="server" Width="100%">
                                <asp:UpdatePanel ID="upnlRatingInfo" runat="server" UpdateMode="Conditional">
                                    <ContentTemplate>
                                        <div id="divDynamicControl" runat="server" style="vertical-align: top; padding: 5px; width: 98%; overflow: hidden;">
                                            Loadidng control ..
                                            <%--<uc:CountryInfo runat="server" ID="ucCountryInfo" /> --%>
                                        </div>
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                            </asp:Panel>
                        </td>
                    </tr>
                </table>
                <AjaxToolkit:CollapsiblePanelExtender ID="cpeRatingInfo" runat="Server" SkinID="skinVerticalCollapsiblePanelExtender"
                    TargetControlID="pnlRatingInfo" ExpandControlID="imgRatingInfoVerticalTag"
                    CollapseControlID="imgRatingInfoVerticalTag" Collapsed="False"
                    CollapsedText="cls" ExpandDirection="Horizontal"
                    ExpandedText="exp" ScrollContents="false" SuppressPostBack="true"
                    EnableViewState="True"
                    AutoCollapse="False" />
            </ItemTemplate>
            <ItemStyle VerticalAlign="Top" />
        </asp:DataList>

    </asp:Panel>


    <AjaxToolkit:CollapsiblePanelExtender ID="cp1" runat="Server"
        TargetControlID="pnlDetail" ExpandControlID="pnlHeader" CollapseControlID="pnlHeader"
        TextLabelID="lblSearch" ImageControlID="imgVerticalTag" ExpandedText="Search Users (Hide Details...)"
        CollapsedText="Search Users (Show Details...)" EnableViewState="true" SuppressPostBack="true" ExpandDirection="Horizontal" />

</form>

AsyncLoadDemo.aspx.vb

Imports System.Data

Partial Class AsyncLoadDemo
Inherits System.Web.UI.Page

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

    If Not IsPostBack Then
        BindCountryDataList()
    End If

End Sub

Private Sub BindCountryDataList()

    Dim dtblCountry As DataTable = GetData()
    dtLstCountry.DataSource = dtblCountry
    dtLstCountry.DataBind()

End Sub

Private Function GetData() As DataTable
    Dim dttblResult As DataTable = New DataTable
    Dim dr As DataRow

    dttblResult.Columns.Add("CountryID", GetType(Int32))
    dttblResult.Columns.Add("Country", GetType(String))

    dr = dttblResult.NewRow()
    dr(0) = 1
    dr(1) = "INDIA"
    dttblResult.Rows.Add(dr)

    dr = dttblResult.NewRow()
    dr(0) = 2
    dr(1) = "USA"
    dttblResult.Rows.Add(dr)

    dr = dttblResult.NewRow()
    dr(0) = 3
    dr(1) = "UK"
    dttblResult.Rows.Add(dr)

    Return dttblResult

End Function

Protected Sub dtLstCountry_ItemDataBound(sender As Object, e As DataListItemEventArgs) Handles dtLstCountry.ItemDataBound

    If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then

        Dim parentControlID As HtmlControl
        parentControlID = DirectCast(e.Item.FindControl("divDynamicControl"), HtmlControl)

        Dim js As String = String.Format("LoadControl({0},'{1}');", DataBinder.Eval(e.Item.DataItem, "CountryID"), parentControlID.ClientID)

        ScriptManager.RegisterStartupScript(Me, Me.GetType, "renderUC" + DataBinder.Eval(e.Item.DataItem, "CountryID").ToString(), js, True)

    End If
End Sub


End Class

CountryInfo.ascx

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="CountryInfo.ascx.vb" Inherits="CountryInfo" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxToolkit" %>

<table style="width: 100%; border: 1px solid darkblue;" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td style="width: 100%; background-color: lightblue; color: white">
        <asp:Panel ID="pnlStateHeader" runat="server">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr style="cursor: hand">
                    <td align="left" width="5%">
                        <asp:ImageButton ID="imgLocationVerticalTag" ImageUrl="~/VerticalTag.gif" runat="server" OnClientClick="javascript:return false;" />
                    </td>
                    <td align="left" width="95%">
                        <asp:Panel runat="server" ID="pnlStateCollaspseText">
                            <b>State Info</b>
                        </asp:Panel>
                    </td>
                </tr>
            </table>
        </asp:Panel>
    </td>
</tr>
<tr>
    <td>
        <asp:Panel ID="pnlStateCollaspsePanel" runat="server">
            <table width="100%" border="0" cellpadding="2" cellspacing="2">
                <tr>
                    <td align="right" width="40%">State Name:
                    </td>
                    <td align="left" width="60%">
                        <asp:TextBox ID="txtStateName" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="right">State Population:
                    </td>
                    <td align="left">
                        <asp:TextBox ID="txtPopulation" runat="server"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </asp:Panel>
    </td>
</tr>
</table>
<AjaxToolkit:CollapsiblePanelExtender ID="cpeLocationInfo" runat="Server"
TargetControlID="pnlStateCollaspsePanel" ExpandControlID="pnlStateHeader"
CollapseControlID="pnlStateHeader" Collapsed="False" TextLabelID="pnlStateCollaspseText"
CollapsedText="State Info (Show Details...)" ExpandDirection="Vertical"
ExpandedText="State Info (Hide Details...)" ScrollContents="false" SuppressPostBack="true"
EnableViewState="True" ImageControlID="imgLocationVerticalTag"
AutoCollapse="False" />

<table style="width: 100%; border: 1px solid darkblue; margin-top: 20px" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td style="width: 100%; background-color: lightblue; color: white">
        <asp:Panel ID="pnlEmploymentInfo" runat="server">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr style="cursor: hand">
                    <td align="left" width="5%">
                        <asp:ImageButton ID="imgbtnEmployment" ImageUrl="~/VerticalTag.gif" runat="server" OnClientClick="javascript:return false;" />
                    </td>
                    <td align="left" width="95%">
                        <asp:Panel runat="server" ID="pnlEmplopyementCollaspseText">
                            <b>Employment Info</b>
                        </asp:Panel>
                    </td>
                </tr>
            </table>
        </asp:Panel>
    </td>
</tr>
<tr>
    <td>
        <asp:Panel ID="pnlEmploymentCollaspsePanel" runat="server">
            <table width="100%" border="0" cellpadding="2" cellspacing="2">
                <tr>
                    <td align="right" width="50%">Employment Number:
                    </td>
                    <td align="left" width="50%">
                        <asp:TextBox ID="txtEmploymentNumber" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="right">UnEmployment Number:
                    </td>
                    <td align="left">
                        <asp:TextBox ID="txtUnEmploymentNumber" runat="server"></asp:TextBox>
                    </td>
                </tr>
            </table>
        </asp:Panel>
    </td>
</tr>
</table>
<AjaxToolkit:CollapsiblePanelExtender ID="cpEmploymentInfo" runat="Server"
TargetControlID="pnlEmploymentCollaspsePanel" ExpandControlID="pnlEmploymentInfo"
CollapseControlID="pnlEmploymentInfo" Collapsed="False" TextLabelID="pnlEmplopyementCollaspseText"
CollapsedText="Employment Info (Show Details...)" ExpandDirection="Vertical"
ExpandedText="Employment Info (Hide Details...)" ScrollContents="false" SuppressPostBack="true"
EnableViewState="True" ImageControlID="imgLocationVerticalTag"
AutoCollapse="False" />

CountryInfo.ascx.vb

Partial Class CountryInfo
Inherits System.Web.UI.UserControl
Private _countryID As Integer
Public Property CountryID() As Integer
    Get
        Return _countryID
    End Get
    Set(ByVal value As Integer)
        _countryID = value
    End Set
End Property

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    System.Threading.Thread.Sleep(5000)
End Sub
End Class

UserControlHandler.ashx

<%@ WebHandler Language="VB" Class="UserControlHandler" %>
Imports System.Web.UI
Imports System.Web.UI.HtmlControls
Imports System.Reflection
Imports System.IO
Imports System.Globalization

Public Class UserControlHandler
Implements IHttpHandler
Implements IReadOnlySessionState

Public Sub New()
End Sub

Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
    Get
        Return True
    End Get
End Property

Public Sub ProcessRequest(context As HttpContext) Implements IHttpHandler.ProcessRequest

    If (context.Request("CountryID") IsNot Nothing) Then
        Dim countryID As Integer = Convert.ToInt32(context.Request("CountryID"))

        context.Response.ContentType = "text/html"
        context.Response.Write(LoadUserControl(countryID, context))
    End If

End Sub

Protected Shared Function LoadUserControl(countryID As Integer, context As HttpContext) As String

    Using dummyPage As New Page()

        Dim dummyForm As New HtmlForm()

        Dim htmlHeader As HtmlHead = New HtmlHead("runat='server'")
        dummyPage.Controls.Add(htmlHeader)
        Dim scriptMgr As New ScriptManager()

        Dim dynnamicUC As UserControl = DirectCast(dummyPage.LoadControl("~/CountryInfo.ascx"), UserControl)

        SetUserControlParameter(dynnamicUC,countryID)
        dynnamicUC.ID = "ucCountryDetails_" + countryID.ToString()
        Using writer As New StringWriter(CultureInfo.CurrentCulture)
            dummyForm.Controls.AddAt(0, scriptMgr)
            dummyForm.Controls.Add(dynnamicUC)
            dummyPage.Controls.Add(dummyForm)
            Try
                HttpContext.Current.Server.Execute(dummyPage, writer, False)
            Catch ex As Exception
                Throw ex
            End Try

            Return writer.ToString()
        End Using
    End Using

End Function

Private Shared Sub SetUserControlParameter(ByRef uc As UserControl, countryID As Integer)
    Dim ucType As Type = uc.GetType()

    Dim propCountryID As PropertyInfo = ucType.GetProperty("CountryID", BindingFlags.Public Or BindingFlags.Instance)
    Try
        propCountryID.SetValue(uc, countryID, Nothing)
    Catch ex As Exception
        Throw ex
    End Try
End Sub

End Class

这是我收到的 JavaScript 警告

  1. 警告

    Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/. A.removeChild(B)}}}A.insertBefore(B,A.firstChild);return v}var E=false,w=e.xhr();if(w){e.username?w.open(m,e.url,e.async,e.username,e.password):w.open(m,e.url,e.async);try{if(e.data||a&&a.contentType)w.setRequestHeader("Content-Type",e.contentType);if(e.ifModified){c.lastModified[e.url]&&w.setRequestHeader("If-Modified-Since",c.lastModified[e.url]);c.etag[e.url]&&w.setRequestHeader("If-None-Match",c.etag[e.url])}s||w.setRequestHeader("X-Requested-With","XMLHttpRequest");w.setRequestHeader("Accept",

  2. 错误

    Uncaught Sys.ArgumentTypeException: Sys.ArgumentTypeException: Object of type 'Sys.Extended.UI.Animation.LengthAnimation' cannot be converted to type 'Sys.Extended.UI.Animation.PropertyAnimation'. Parameter name: instance

请帮我解决这个问题...

最佳答案

试试这个...

<globalization fileEncoding="utf-8" />
        <compilation batch="false" debug="false">
          <assemblies>
            <add assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
          </assemblies>
          <expressionBuilders>
            <remove expressionPrefix="Resources" />
            <add expressionPrefix="Resources" type="Microsoft.SharePoint.SPResourceExpressionBuilder, Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
         <add expressionPrefix="SPHtmlEncodedResources" type="Microsoft.SharePoint.SPHtmlEncodedResourceExpressionBuilder, Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
            <add expressionPrefix="SPSimpleFormattingEncodedResources" type="Microsoft.SharePoint.SPSimpleFormattingEncodedResourceExpressionBuilder, Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
            <add expressionPrefix="SPUrl" type="Microsoft.SharePoint.Publishing.WebControls.SPUrlExpressionBuilder, Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
          </expressionBuilders>
        </compilation>

关于jquery - 当用户控件通过 JQuery ajax 调用异步加载并多次加载时，Ajax 控件已停止工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30755863/

25 4 0
文章推荐： javascript - 如何将多个 map 对象(JSON)添加到cloud-firestore数据库？
文章推荐： erlang - Tsung:munin的CPU使用率值太高
文章推荐： PHP - MySQL - GROUP BY/ORDER BY？错误的结果输出
文章推荐： javascript - 如何在数组中分割数组并使长度正确显示
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com