Ajax update panel too slow in Asp.net. How to resolve? - asp.net

I just update the ID passed in NavigateURL of Hyperlink during the selectedindexchanged in my RadioButtonList.
In Mozilla it takes 3.26 seconds for the ID to get updated in Hyperlink
The other browsers also takes too long.
How can i resolve this ?
I read a lot of articles and took the following measures :
Set Debug to false in web.config
Use conditional in Update mode
Only use the controls that has to be updated in the Update panel.
But still, it takes 3.26 seconds...
Protected Sub chlTypes_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles chlTypes.SelectedIndexChanged
If (chlTypes.SelectedItem.Value.ToString() <> "") And (chlTypes.SelectedItem.Value.ToString() <> "0") Then
HypView.NavigateUrl = "~/Content.aspx?ID=" + chlTypes.SelectedItem.Value.ToString()
End If
End Sub
<table id="tbl1">
<tr>
<td>
<asp:UpdatePanel ID="UP1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:RadioButtonList ID="chlTypes" runat="server" AutoPostBack="true">
</asp:RadioButtonList>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td align="right">
<asp:UpdatePanel ID="UP2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="caregiver_view_button">
<asp:HyperLink ID="HypView" class="caregiver_view_button"
runat="server"><img src="/view_button.png" /></asp:HyperLink>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="chlTypes" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>

Related

ASP.NET UpdatePanel CustomControl and PopupControlExtender odd issue

I am trying to use UpdatePanels, PopupControlExtenders, and a custom control to create a dropdown list of checkboxes. It works for the most part except for 1 odd glitch I cant seem to find a way around.
EnhancedCheckboxList.cs
Default.aspx
Default.aspx.cs
In order to replicate the glitch you have to perform the following actions in the order below.
Set A Dropdown to Role2
Set B Dropdown to Role2
Invert all A Authorities (Uncheck checked items and check unchecked items)
Set B Dropdown to Role1
View A Authorities (The items we unchecked in step 3 have become checked again)
For whatever reason unchecking the Authorities in step 3 has no effect but checking them does? I looked into getting the correct values from Request.Params but it doesnt look like that is giving me what I want. The glitch will only happen if you perform the steps in that order if you switch steps 2 and 3 it works fine.
Would you consider eliminating the UpdatePanels? I was able to reproduce the glitch using your original code. Once I removed the UpdatePanels the glitch is no longer reproducible:
<fieldset>
<legend>Role</legend>
<table width="500">
<tr>
<td>A</td>
<td valign="top">
<asp:DropDownList ID="Roles" runat="server" AutoPostBack="True" OnSelectedIndexChanged="roles_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td valign="top">
<%-- <asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>--%>
<asp:TextBox ID="txtAuthority" Text="Authorities" runat="server" CssClass="txtboxaschkbox" Visible="false"></asp:TextBox>
<asp:Panel runat="server" ID="PnlAuth" Visible="false" CssClass="PnlDesign">
<cc1:EnhancedCheckboxList ID="Authorities" runat="server">
</cc1:EnhancedCheckboxList>
</asp:Panel>
<cc2:PopupControlExtender runat="server" ID="PceSelectAuthority" TargetControlID="txtAuthority"
PopupControlID="PnlAuth" Position="Bottom"/>
<%-- </ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Roles" />
</Triggers>
</asp:UpdatePanel>--%>
</td>
</tr>
<tr>
<td>B</td>
<td valign="top">
<asp:DropDownList ID="Roles2" runat="server" AutoPostBack="True" OnSelectedIndexChanged="roles2_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td valign="top">
<%-- <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>--%>
<asp:TextBox ID="txtAuthority2" Text="Authorities" runat="server" CssClass="txtboxaschkbox" Visible="false"></asp:TextBox>
<asp:Panel runat="server" ID="PnlAuth2" Visible="false" CssClass="PnlDesign">
<cc1:EnhancedCheckboxList ID="Authorities2" runat="server">
</cc1:EnhancedCheckboxList>
</asp:Panel>
<cc2:PopupControlExtender runat="server" ID="PceSelectAuthority2" TargetControlID="txtAuthority2"
PopupControlID="PnlAuth2" Position="Bottom"/>
<%-- </ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Roles2" />
</Triggers>
</asp:UpdatePanel>--%>
</td>
</tr>
</table>
</fieldset>

Add asp controls dynamically using AJAX

I want to make the +Add more original use LinkButton!
I have this row on my table I am using:
<asp:Label ID="Label43" runat="server"
Text="P-2.5 Original use:"></asp:Label>
</td>
<td class="style1">
<div style="float:left;">
<asp:DropDownList class="text-input" ID="DDLOriginalUse" runat="server"
DataSourceID="SqlDataSource5" DataTextField="DESCRIPTION"
DataValueField="ID_PROGRAM_USE" OnSelectedIndexChanged="itemSelected" AutoPostBack="True" AppendDataBoundItems="true">
<asp:ListItem Text="-Not assigned-" Value="-1" Selected="True" />
</asp:DropDownList>
</div>
<asp:UpdatePanel runat="server" style="float:left;" id="UpdatePanel2" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="DDLOriginalUse" eventname="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblProgramType" runat="server"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource5" runat="server"
ConnectionString="<%$ ConnectionStrings:MesarchConnectionString %>"
SelectCommand="SELECT * FROM [PROGRAM_USE]"></asp:SqlDataSource>
</td>
</tr>
I want to add new rows with the same content as above so I am using an asp:PlaceHolder :
this code continues..
</tr>
<asp:UpdatePanel runat="server" id="UpdatePanel1" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="LinkButtonAddOriginal" eventname="Click" />
</Triggers>
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolderAddNewOriginalUse" runat="server"></asp:PlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>
<tr>
<td>
</td>
<td class="style1">
<asp:UpdatePanel runat="server" id="UpdatePanel3" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="LinkButtonAddOriginal" eventname="Click" />
</Triggers>
<ContentTemplate>
<b><asp:LinkButton ID="LinkButtonAddOriginal" OnClick="AddMoreOriginal" runat="server">+Add more original use</asp:LinkButton></b>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
and in my code behind I am doing this for the click(I want to add maximum 5 text boxes):
private static int countOriginalUse = 1;
private static LiteralControl htmlPresentation = new LiteralControl();
protected void AddMoreOriginal(object sender, EventArgs e)
{
StringBuilder str_for_ltr = new StringBuilder();
countOriginalUse++;
if (countOriginalUse >= 6) { LinkButtonAddOriginal.Text = "You can not add more.";return; }
str_for_ltr.Append("<tr><td> P-2.5 Original use " + countOriginalUse.ToString() + ":</td>");
str_for_ltr.Append("<td class='style1'>");
str_for_ltr.Append("</td>");
str_for_ltr.Append("</tr>");
htmlPresentation.Text += str_for_ltr.ToString();
PlaceHolderAddNewOriginalUse.Controls.Add(htmlPresentation);
/*DropDownList ddl1 = new DropDownList();
ddl1.ID="Dropdown1";
ddl1.CssClass = "Mycss";
ddl1.Items.Add("test");
PlaceHolderAddNewOriginalUse.Controls.Add(ddl1);
PlaceHolderAddNewOriginalUse.Controls.Add(new LiteralControl("<br/>"));*/
}
So the problems I face here are that it does not adds new rows, and even the text is not where I placed my asp:PlaceHolder (is on the top).
And surely I will have more problems when I will have to add this DropDownList with also a UpdatePanel for it(as shown on my first code).
Am I doing it totally wrong, do I have to follow some other way to do it?
I am confused...
I found a way to do it myself.
I made some new rows with DropDownLists in them and their personal UpdateControl but i had their style = "display:none".
then I have my link button like this:
<tr>
<td>
</td>
<td class="style1">
<b><a id="linkAddOriginal" onclick="javascript:addOriginalUse()">+Add more original use</a></b>
</td>
</tr>
and I also made this simple javascript function with a static variable in which I show the appropriate row each time:
<script type="text/javascript">
function addOriginalUse() {
if (typeof addOriginalUse.counter == 'undefined') {
// It has not... perform the initilization
addOriginalUse.counter = 1;
}
addOriginalUse.counter++;
if (addOriginalUse.counter >= 6) { document.getElementById("linkAddOriginal").innerHTML = "You can not add more original uses."; return; }
var ddl = document.getElementById("originalUseRow" + addOriginalUse.counter);
ddl.style.display = 'inline-block';
}
</script>
I have also some extra code showing the data depending on ItemSelection of the DropDownList, if you need it ask me!

ASP.NET ModalPopupExtender appears when calling Alert JavaScript function

I'm facing a buggy behavior from ASP.NET Ajax Controls Toolkit ModalPopupExtender, when I call Alert() JavaScript function from server-side the modal appears in the back ground. I don't know why this is happens.
here is the code:
vb:
Sub ShowAlert(ByVal message As String)
ScriptManager.RegisterStartupScript(Me.UpdatePanel, UpdatePanel.GetType(), "notificationScript", "<script language='JavaScript'> alert('" & message & "'); </script>", False)
End Sub
aspx:
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlPartialInstructions" CssClass="modal" runat="server">
......
<asp:Panel ID="pnlPrintConfirmation" CssClass="modal" runat="server">
<table class="ui-accordion">
<tr>
<td colspan="2">
<asp:Label Text="Do you want to print the receipt?" ID="lblPrintConfirmation" runat="server"
meta:resourcekey="lblPrintConfirmationResource1" Font-Bold="True" Font-Names="tahoma"
Font-Size="Large" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnConfirmPrint" Text="Yes" CssClass="google-button google-button-blue"
runat="server" meta:resourcekey="btnConfirmSaveResource1" Font-Size="Large" />
</td>
<td>
<asp:Button ID="btnCancelPrint" Text="No" CssClass="google-button google-button-red"
runat="server" meta:resourcekey="btnCancelSaveResource1" Font-Size="Large" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Button ID="HiddenForModel1" Text="" runat="server" CssClass="hide" CausesValidation="False" />
<ajaxToolkit:ModalPopupExtender ID="pnlPrintConfirmation_ModalPopupExtender" runat="server" DynamicServicePath=""
Enabled="True" TargetControlID="HiddenForModel1" PopupControlID="pnlPrintConfirmation"
BackgroundCssClass="ModalBackground" DropShadow="True" CancelControlID="btnCancelPrint"
RepositionMode="RepositionOnWindowResizeAndScroll">
</ajaxToolkit:ModalPopupExtender>
.....
</asp:UpdatePanel>
</ContentTemplate>
The issue is caused by the way the ModalPopupExtender works. It is emitting a JavaScript which will hide the Panel.
Now you are registering your alert() call as startup script, this will hold running the ModalPopupExtender script as long as the user will not exit the alert windown. The simplest fix is setting display:none on the Panel so it will not need the script to hide it:
<asp:Panel ID="pnlPrintConfirmation" CssClass="modal" Style="display:none;" runat="server">
...
</asp:Panel>

Dropdown not binding Inside Ajax Update panel

I am using the below code to populate a dropdown on a selection of another dropdown.
But somehow, ddlSubTypes is not getting populated when a item is selected in ddlTypes
On selectedindex change event of ddlTypes, i am binding ddlSubTypes.
<tr>
<td class="style3">
<asp:ScriptManager ID="scma" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UP1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlTypes" runat="server" Width="200px" AutoPostBack="true" OnSelectedIndexChanged="ddlTypes_SelectedIndexChanged1">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td class="style3">
<asp:UpdatePanel ID="UP2" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlSubTypes" runat="server" Width="200px">
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
Protected Sub ddlTypes_SelectedIndexChanged1(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlTypes.SelectedIndexChanged
Try
'Populate schemes
ddlSubTypes.Items.Clear()
Dim ID As Integer = ddlTypes.SelectedValue
Dim dt As DataTable = IterateSubtypesContents(ID)
ddlSubTypes.DataTextField = dt.Columns("Type").ToString()
ddlSubTypes.DataValueField = dt.Columns("ID").ToString()
ddlSubTypes.DataSource = dt
ddlSubTypes.DataBind()
UP2.Update()
Catch ex As Exception
End Try
End Sub
you should add a trigger to the second update panel that gets triggered on the first dropdown's selectedIndexChanged event.
<asp:UpdatePanel ID="UP2" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlSubTypes" runat="server" Width="200px">
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Control That Triggers this Panel" EventName="Desired Event that triggers" />
</Triggers>
</asp:UpdatePanel>

Update two updatepanels simultaneously together

I have two ASP.NET AJAX UpdatePanels .
there are two timers with diffrent intervals.
is it possible to update two updatepanels simultaneously together ?
like multi thread application .
each should be UpdatePanel Update in separate thread in one time.
i wrote this code but second timer does not work :
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET!
</h2>
<p>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</p>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Timer ID="Timer1" runat="server" Interval="2000">
</asp:Timer>
<asp:Timer ID="Timer2" runat="server" Interval="2000">
</asp:Timer>
</asp:Content>
Behind Code :
Protected Sub Timer1_Tick(sender As Object, e As System.EventArgs) Handles Timer1.Tick
Label1.Text = Date.Now
End Sub
Protected Sub Timer2_Tick(sender As Object, e As System.EventArgs) Handles Timer2.Tick
Label2.Text = Date.Now
End Sub
Actually, your UpdatePanels are useless in this example, because your Timers are outside of them. As a result, every time your event gets triggered, it does a full page refresh. (This is in part why you never see the second Timer get hit -- by the time the first timer gets hit, the entire page gets refreshed, so the counter resets on the first timer)
So, you need to accomplish two things to fix your page:
Get the UpdatePanels to work properly with the Timers so that only asynchronous postbacks are occurring.
Make sure that each Timer only causes one UpdatePanel to refresh.
The first can be taken care of by either moving the Timer into the UpdatePanel, as a child, or by using the <asp:Triggers> element to basically say "The only thing that will update my UpdatePanel is this timer."
The second can be taken care of by setting the UpdateMode=Conditional attribute on each UpdatePanel.
Try this:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET!
</h2>
<p>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</p>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer2" />
</Triggers>
</asp:UpdatePanel>
<asp:Timer ID="Timer1" runat="server" Interval="2000" ontick="Timer1_Tick">
</asp:Timer>
<asp:Timer ID="Timer2" runat="server" Interval="2000" ontick="Timer2_Tick">
</asp:Timer>
</asp:Content>
I have to run to work now, so bear with me if you have any questions ;-)

Resources