我创建了一个用户控件，其中包含多个Ajax控件。我将此用户控件用于datalist itemtemplate下，并为每个datalist的项目绑定它。到目前为止，一切都很好，因为我从服务器端加载了用户控件，但使用这种方法会导致页面渲染时间过长，因为用户控件正在逐个加载，而在用户控件本身下的数据计算也需要时间。
然后我尝试使用jQuery、Ajax和IHttpHandler分别异步加载每个用户控件，但AjaxToolkit:CollapsiblePanelExtender停止工作了。但如果我通过服务器加载用户控件，一切都正常工作。
要通过服务器加载，请取消注释AsyncLoadDemo.aspx文件中的<%----%>行，并注释掉以下内容：
然后我尝试使用jQuery、Ajax和IHttpHandler分别异步加载每个用户控件，但AjaxToolkit:CollapsiblePanelExtender停止工作了。但如果我通过服务器加载用户控件，一切都正常工作。
要通过服务器加载，请取消注释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警告
警告
在主线程上同步使用XMLHttpRequest已被弃用，因为它对最终用户的体验有害。如需更多帮助，请查看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",
错误
未捕获的Sys.ArgumentTypeException：Sys.ArgumentTypeException：无法将类型为“Sys.Extended.UI.Animation.LengthAnimation”的对象转换为类型“Sys.Extended.UI.Animation.PropertyAnimation”。参数名称：实例
请帮我解决这个问题...