【发布时间】：2015-08-25 16:15:09
【问题描述】：
我创建了一个包含多个 ajax 控件的用户控件。我在datalist itemtemplate 下使用此用户控件并将其绑定到数据列表的每个项目，直到现在一切正常，因为我正在从服务器端加载用户控件，但是使用此方法页面需要大量时间才能呈现为用户控件是一一加载的，用户控件下的数据计算本身需要时间。
然后我尝试使用jQuery、Ajax 和IHttpHandler 异步加载每个用户控件，但AjaxToolkit:CollapsiblePanelExtender 停止工作。但如果我通过服务器加载用户控件，一切正常。
要通过服务器加载它，只需在 AsyncLoadDemo.aspx 文件中取消注释此 <%--<uc:CountryInfo runat="server" ID="ucCountryInfo" /> --%> 行并注释此
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”。 参数名称：实例
请帮我解决这个问题...
【问题讨论】：
-
@xwhyLikeThis：我已经更新了帖子，请检查。我不知道如何解决这个javascript问题。
-
任何人都有解决问题的想法
-
有关 javascript 警告，请查看此stackoverflow.com/questions/27736186/…
标签： jquery asp.net ajax ajaxcontroltoolkit httphandler