4
Я создал пользовательский элемент управления, который имеет несколько элементов управления ajax. Я использую этот пользовательский элемент управления под datalist itemtemplate и привязываю его к каждому элементу datalist, до сих пор все прекрасно работает, когда я загружаю пользовательский элемент управления со стороны сервера, но с использованием этой страницы подхода требуется много времени для визуализации в качестве пользовательского элемента управления загружается по одному, и вычисление данных под самим управлением пользователя требует времени.Элементы управления Ajax перестали работать, когда пользовательский контроль загружался асинхронно и несколько раз с помощью вызова JQuery ajax
Затем я попытался загрузить каждый пользовательский контроль асинхронно, используя 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 я получаю
Предупреждение
Синхронный XMLHttpRequest в основном потоке является устаревшим из-за его пагубное воздействие на опыт конечного пользователя. Для получения дополнительной информации, 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 [е.url] & & w.setRequestHeader («If-None-Match», c.etag [e.url])} s || w.setRequestHeader («X-Requested-With», «XMLHttpRequest»); w.setRequestHeader ("Принять",
Ошибка
Uncaught Sys.ArgumentTypeException: Sys.ArgumentTypeException: Объект из 'Sys.Extended.UI.Animation.LengthAnimation' типа не могут быть преобразованы в типа «Sys .Extended.UI.Animation.PropertyAnimation '. Имя параметра: пример
Пожалуйста, помогите мне решить эту проблему ...
@xwhyLikeThis: Я обновил пост, пожалуйста, проверьте .. я не получаю, как исправить эту проблему javascript. –
У любого органа есть идея исправить проблему –
Для предупреждения javascript, пожалуйста, просмотрите это http://stackoverflow.com/questions/27736186/jquery-has-deprecated-synchronous-xmlhttprequest –