I have created a user control which has several ajax controls. I am using this user control under datalist itemtemplate and binding it for each item of datalist, till now every thing working fine as I am loading the user control from server side, but using this approach page takes a lot of time to render as user control is loading one by one and the data calculation under user control itself takes time.
Then I tried to load the each user control asynchronously using jQuery, Ajax and IHttpHandler but AjaxToolkit:CollapsiblePanelExtender stopped working. But If I load the user control by server every thing works fine.
to load it by server just uncomment this <%--<uc:CountryInfo runat="server" ID="ucCountryInfo" /> --%> line in AsyncLoadDemo.aspx file and comment this
ScriptManager.RegisterStartupScript(Me, Me.GetType, "renderUC" + DataBinder.Eval(e.Item.DataItem, "CountryID").ToString(), js, True)
line in AsyncLoadDemo.aspx.vb file
Below is the code that I have created to demonstrate the issue.
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
This is the javascript warning I am receiving
Warning
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",
Error
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
Please help me to fix this issue...
Try this...