Using multiple UpdatePanels on a single page without interfering with each other - asp.net

It seems that when multiple UpdatePanels are on a single page, anytime an asyncPostBack occurs on one, all others will have their html reloaded. Is there a way around this?
Example
Example.aspx
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="border: 1px solid black;">
<asp:TextBox runat="server" ID="txtTEST1" />
<asp:Label runat="server" ID="lblTEST1" />
<asp:Button runat="server" ID="btnTEST1" Text="AsyncPostBack1" />
<div onclick="this.innerHTML='Wooo!'">Click Me - UpdatePanel1</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div onclick="this.innerHTML='Wooo!'" style="padding: 1em;">Click Me. I'm not part of an Update Panel</div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div style="border: 1px solid black;">
<asp:TextBox runat="server" ID="TextBox1" />
<asp:Label runat="server" ID="Label1" />
<asp:Button runat="server" ID="Button1" Text="AsyncPostBack2" />
<div onclick="this.innerHTML='Wooo!'">Click Me - UpdatePanel2</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Example.aspx.vb
Protected Sub btnTEST1_Click(sender As Object, e As EventArgs) Handles btnTEST1.Click
lblTEST1.Text = "Refreshed at " & DateTime.Now.ToString()
End Sub
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Label1.Text = "Refreshed at " & DateTime.Now.ToString()
End Sub
Testing the issue
Click on all 3 of the divs with the "Click Me" text so that HTML is altered inside and outside of the UpdatePanels.
Click one of the buttons labeled "AsyncPostBack". Regardless on which one is clicked, both UpdatePanels will have their HTML rerendered and replaced, as seen by the 2 divs inside the UpdatePanels resetting to their original text.
So I ask, is it possible to have multiple UpdatePanels on the same page that don't cause each other to rerender every time one of them has a asyncPostBack event.

yes
set updatemode=conditional
provide the triggers which will trigger the update. here is a link to an example. (#1 result on google) http://ajax.net-tutorials.com/controls/updatepanel-control/

Try adding mode to update panel tag. If mode is not give the default mode is always. If the UpdateMode property is Always, the UpdatePanel control's content is updated on every postback that originates from anywhere on the page. Microsoft documentation about UpdateMode
<asp:UpdatePanel ID="BugsListUpdatePanel" runat="server" UpdateMode="Conditional">

Related

When I select on a radiobutton with AutPostBack true, google recaptcha goes

When I select on a radiobutton with AutPostBack true, google recaptcha goes. how can i solve this?
radiobutton with autopostback="true" attr. like this;
<asp:RadioButtonList runat="server" ID="kvkk" CssClass="radioButton" OnSelectedIndexChanged="kvkkSelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Value="0">Kabul Ediyorum</asp:ListItem>
<asp:ListItem Value="1">Kabul Etmiyorum</asp:ListItem>
</asp:RadioButtonList>
div for reCAPTCHA;
<div class="captcha">
<div class="g-recaptcha" data-sitekey="***************************"></div>
</div>
When i select on a item from radiobutton, reCAPTCHA is going.
Try placing the Radio button in a update panel.
so, drag in the script manager, and then say this:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:RadioButtonList runat="server" ID="kvkk" CssClass="radioButton" OnSelectedIndexChanged="kvkkSelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Value="0">Kabul Ediyorum</asp:ListItem>
<asp:ListItem Value="1">Kabul Etmiyorum</asp:ListItem>
</asp:RadioButtonList>
</ContentTemplate>
</asp:UpdatePanel>
So, give the above a try. This does fire what we call a "partial" post-back, and your page load event will fire. And if you have any setup code, or loading of data or controls in the page load event, then make sure you test for first page postback like this:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
' my setup and loading of controls data goes here
End If
End Sub

Textbox focus is not working when AjaxControlToolkit TabContainer is used in the page

I have an asp web page with a text box and I want to set focus on it on load event in code behind in this way:
Protected Shadows Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Page.SetFocus(Me.txtPassword)
'txtPassword.Focus()
End Sub
Both methods are working unless I add a tabcontainer to my page. Below is my web page:
in the header I am registering the AjaxControlToolkit in this way:
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
Then in my page I have the text box and the tab container:
<table style="width: 100%" id="tblnssf" cellspacing="0" cellpadding="0" runat="server">
<tr>
<td style="width: 97px; height: 40px">
<asp:TextBox ID="txtPassword" TabIndex="1" runat="server" Width="85px" TextMode="Password"></asp:TextBox>
</td>
</tr>
</table>
<cc1:TabContainer ID="TabContainer1" runat="server" Width="100%">
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Header 1">
<HeaderTemplate> Header 1 </HeaderTemplate>
<ContentTemplate> test 1 </ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Header 2">
<HeaderTemplate>Header 2</HeaderTemplate>
<ContentTemplate>test 2</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
When I remove the tab container, both focus methods work properly... And If I add a button and handle its click event from the server side, also focus is working even with the presence of the tab container... It seems this issue is fired only on load event handled from code behind (server side)
This is really weird and I don't know how to solve it. I really need to set focus onload event from server side not from client side because I am adding some conditions ... Any helps?

Issue in displaying loader gif via Ajax

I have a below section which is implemented to display loader gif associated to the update panel
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updPnlPromotion">
<ProgressTemplate>
<img alt="" src="Image/Ajaxloader.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
This is the update panel which contains the dropdown which is a data bound control binded on the radio button checked changed event, but rather than partial postback and the display of loader gif, the entire page posts back.
<asp:UpdatePanel ID="updPnlPromotion" runat="server" UpdateMode="Always">
<ContentTemplate>
<td align="left" style="width: 20%;background-color:#CDCD9C">
<asp:radiobutton ID="rdbPromotion" runat="server" Text="New Promotion" AutoPostBack="true" GroupName="TacPlan" OnCheckedChanged="rdbPromotion_OnCheckedChanged" style="font-weight:bold" />
</td>
<td align="left" style="width:30%; vertical-align:middle; background-color:#EBEBEB; text-align:center">
<asp:DropDownList runat="server" ID="ddlPromotion" Width="95%"></asp:DropDownList>
</td>
<td>
<asp:Label Text="*" ForeColor="Red" Visible="false" runat="server" ID="lblPromoPlanMandatory"></asp:Label>
</td>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rdbPromotion" EventName="CheckedChanged" />
</Triggers>
</asp:UpdatePanel>
I don't believe there's an issue with the code you've posted. I created a new ASPX page and copied your code into it. It works as expected (I added a counter to monitor load events):
Here's the code behind I used for testing this:
Public Sub rdbPromotion_OnCheckedChanged(sender As Object, e As EventArgs) Handles rdbPromotion.CheckedChanged
System.Threading.Thread.Sleep(2000)
End Sub
Private Sub Default5_Load(sender As Object, e As EventArgs) Handles Me.Load
Me.counter.Text = Integer.Parse(Me.counter.Text) + 1
End Sub
Seems like a longshot, but maybe the browser you're testing with doesn't support partial rendering, or ASP.NET doesn't think that it does?:
http://ajax.asp.net/ajax/documentation/live/mref/P_System_Web_UI_ScriptManager_EnablePartialRendering.aspx
I have found the solution to my problem, upon reviewing the web.config file I found the weird setting xhtmlConformance mode="Legacy" there which was basically stopping the page to ajaxify somehow, by removing it, it works as expected.

ASP.Net add item to listbox without posting

I am trying to add items to a listbox. I have a textbox and a button and when the user enters something into the textbox and hits add, I want to insert a new item the listbox without the page refreshing.
Here is what I have so far:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="col-xs-6 text-center">
<asp:Label ID="empid" runat="server" Text="Employee ID" CssClass="label-default label "></asp:Label>
<asp:TextBox ID="txtEmployeeID" runat="server" CssClass="form-control"></asp:TextBox>
<div class="col-xs-6">
<asp:Button ID="btnAddEmp" runat="server" Text="Add Emp" CssClass="btn btn-primary top-buffer" Width="100%" />
</div>
<div class="col-xs-6">
<asp:Button ID="btnRemoveEmp" runat="server" Text="Remove Emp" CssClass="btn btn-danger top-buffer" Width="100%" />
</div>
<asp:ListBox ID="listEmps" runat="server"
CssClass="top-buffer add-height"
Width="100%"
ValidationGroup="req"></asp:ListBox>
</div>
</ContentTemplate>
</asp:UpdatePanel>
and here is my button click event
Protected Sub btnAddEmp_Click(sender As Object, e As EventArgs) Handles btnAddEmp.Click
If Not IsPostBack() Then
If listEmps.Items.Count = 0 Then
listEmps.Items.Add(txtEmployeeID.Text)
Else
'check list to see if employee already exists
For i = listEmps.Items.Count - 1 To 0 Step -1
If RTrim(txtEmployeeID.Text) = RTrim(listEmps.Items(i).ToString) Then
'employee already exists within list
Response.Write("<script>alert('Employee ID " & txtEmployeeID.Text.Trim & " has already been added. ')</script>")
txtEmployeeID.Text = ""
Exit Sub
End If
Next
'add to list
listEmps.Items.Add(txtEmployeeID.Text)
End If
End If
End Sub
How can I properly add items to a listbox without refreshing the page?
Remove your If Not IsPostBack() Then check in your button click event. The IsPostBack() is typically only used for the Page_Load event. Since your button is contained in an UpdatePanel the click event should be asynchronous and won't cause a postback.

ASP.NET Ajax Text Box with Button not firing

Hey just wondering if my syntax is wrong here
<asp:UpdatePanel ID="UpdatePanel2"
runat="server"
UpdateMode="Always">
<ContentTemplate>
<asp:textbox id="searchProductName" runat="server"></asp:textBox> <asp:Button ID="btnProductSearch" runat="server" Text="Search Product Name" CssClass="search" OnClick="ProductSearch_Click" UseSubmitBehavior="true" CausesValidation="false" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnProductSearch" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
and my OnClick method
Protected Sub ProductSearch_Click(ByVal sender As Object, ByVal e As EventArgs)
' Filter by ProductName
If searchProductName.Text.Length > 0 Then
srcProductListPerCustomer.FilterExpression = " (productName like '%" + searchProductName.Text.ToString & "%')"
productListTable.DataBind()
Else
srcProductListPerCustomer.FilterExpression = ""
productListTable.DataBind()
End If
End Sub
The problem is nothing is happening when I click on the button. The button works fine without the Ajax
Your button doesn't need to be in an UpdatePanel. The controls in a UpdatePanel should be the controls that are to be updated asynchronously. Put your UpdatePanel around the GridView you're updating, and use the AsyncPostBackTrigger in the same way.
It's best to keep UdpatePanels as small as possible; the fewer controls inside them, the less HTML will be sent back from the server (less bandwidth, faster request/response time). PostBackTriggers can refer to controls outside of the UpdatePanel with no problems.

Resources