Nested update panel causing parent update panel to refresh - c#

I think I've tried every combination possible with update panels and I just cant seem to get this to work. I've got an update panel like so:
<asp:UpdatePanel runat="server" ID="upParent" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
Some content...
<div style="width:100%;text-align:center;">
<asp:Label ID="lblMainMessage" runat="server"></asp:Label>
<asp:UpdateProgress AssociatedUpdatePanelID="upParent" ID="UpdateProgress7" runat="server" DisplayAfter="100" DynamicLayout="True" Visible="True">
<ProgressTemplate>
<div class="loader ui-widget-overlay">
Loading data, please wait...<br/><img style="border-style:none;" src="../../Images/ajax-loader.gif" alt="loading" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<div>
<asp:UpdatePanel runat="server" ID="upChild" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<asp:Timer ID="timerChecklists" runat="server" OnTick="TimerChecklistsTick" Interval="10000"></asp:Timer>
<asp:GridView ID="gvChecklists" runat="server"
AutoGenerateColumns="False" >
<Columns>
<ItemTemplate>
<asp:TemplateField HeaderText="Ques. Ans. Yes">
<ItemTemplate>
<asp:Label ID="lblQuestionsAnsweredYes" runat="server" ForeColor="Green"
Text='<%# DataBinder.Eval(Container, "DataItem.QuestionYesAnswered") %>'
ToolTip="Questions answered Yes."></asp:Label>
</ItemTemplate>
<FooterStyle HorizontalAlign="Center" />
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Ques. Ans. No">
<ItemTemplate>
<asp:Label ID="lblQuestionsAnsweredNo" runat="server" ForeColor="Red"
Text='<%# DataBinder.Eval(Container, "DataItem.QuestionNoAnswered") %>'
ToolTip="Questions answered No."></asp:Label>
</ItemTemplate>
<FooterStyle HorizontalAlign="Center" />
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Ques. Ans. N/A">
<ItemTemplate>
<asp:Label ID="lblQuestionsAnsweredNA" runat="server" ForeColor="Gray"
Text='<%# DataBinder.Eval(Container, "DataItem.QuestionNAAnswered") %>'
ToolTip="Questions answered N/A."></asp:Label>
</ItemTemplate>
<FooterStyle HorizontalAlign="Center" />
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Image ID="imgLoader" runat="server" ImageUrl="/Images/ajax-loader.gif" />
</td>
</tr>
</table>
</div>
<div style="width:100%;text-align:center;">
<asp:Label ID="lblspChecklists2" runat="server"></asp:Label>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnChecklistExcel"/>
<asp:AsyncPostBackTrigger ControlID="timerChecklists" />
</Triggers>
</asp:UpdatePanel>
What I am trying to accomplish is to sort of lazy load some gridview data due to its size. So what I simply did is wrap the gridview inside an update panel. I then place a timer within this update panel and set it to 10000 (10 seconds) for the tick event. I set the event OnTick as shown:
protected void TimerChecklistsTick(object sender, EventArgs e)
{
LoadChecklistsSubPanel();
timerChecklists.Enabled = false;
imgLoader.Visible = false;
}
The LoadChecklistsSubPanel simply gets a dataset and assigns it to the grid views datasource and does a databind. This all works fine...however my issue is the following:
Note as mentioned a parent update panel and a child update panel. Within this I have an Update progress associated to the update panel upParent. But my issue is when the 10 seconds hits and the timer event is fired this updateprogress is shown (in effect causing my entire page to basically load). I would think that this would not happen given the updatemode is condition and children as triggers is false.
I have also tried ChildrenAsTriggers=true, I've tried to make the update panel mode always, I've tried just about everything but my issue still persists. Right when 10 seconds hits the UpdateProgress (which shows a loading data, please wait overlay is displayed.
Other than that my grid view is getting binded correctly, its getting its data after 10 seconds, etc. My only issue is I cannot seem to understand why the UpdateProgress shows up and overlays my entire screen if all that is happening is my nested sub panel should be updating only.

The fact is that upPanel not updated, you can check this by putting a Label in the upPanel with value="0" and add lblTest.text +=1 under TimerChecklistsTick in codebehind.
you can see that the value don't have any change.
In fact the problem is UpdateProgress control, UpdateProgress control is not a powerful tool and your expectations should not be very high.
if you want a powerful and customizable UpdateProgress you shoud make your own using JavaScript:
<script type="text/javascript">
var postBackElement;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) {
postBackElement = args.get_postBackElement();
if (prm.get_isInAsyncPostBack()) {
args.set_cancel(true);
} else {
//Put your progress UI here
//Check Trigger Id if needed.
//Show an image or Hide another div or ...
}
}
function EndRequest(sender, args) {
}
</script>
But Solution ...
But i was played a little with your code and found that if you remove your timer from inside UpdatePanels and put it outside them totally, your problem will be solved.
</ContentTemplate>
</asp:UpdatePanel>
//Outside the upParent
<asp:Timer ID="timerChecklists" runat="server" OnTick="TimerChecklistsTick" Interval="10000"></asp:Timer>
The problem is persist for any control that placed inside child updatepanels.
i don't know if there are a basis solution or not but as i say UpdateProgress is a simple and quick solution but not good in performance and flexibility totally.
Update
This is simulated code what work for me (ASP.NET 4.5, Chrome 36):
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Default2.aspx.vb" Inherits="StackOverflowTests_WebVB.net.Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="upParent" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<asp:Label ID="lbl1" runat="server" Text="0"></asp:Label>
<asp:UpdateProgress AssociatedUpdatePanelID="upParent" ID="UpdateProgress7" runat="server" DisplayAfter="100" DynamicLayout="True" Visible="True">
<ProgressTemplate>
<div class="loader ui-widget-overlay">
Loading data, please wait...<br />
<img style="border-style: none;" src="../Images/loading.gif" alt="loading" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" ID="upChild" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<asp:Label ID="lbl2" runat="server" Text="0"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timerChecklists" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Timer ID="timerChecklists" runat="server" OnTick="TimerChecklistsTick" Interval="1000"></asp:Timer>
</div>
</form>
</body>
</html>
CodeBehind:
Protected Sub TimerChecklistsTick(sender As Object, e As EventArgs)
lbl1.Text += 1
lbl2.Text += 1
End Sub
In output, lbl2 start counting without full postback and without showing the content of UpdateProgress on every Tick.
If you move Timer inside the upChild, you can see that content of UpdateProgress will be shown on evey Tick, but still lbl1 show 0 without any change.

Related

Panel not displayed in UpdatePanel

<form runat="server" id="from1">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<script src='https://www.google.com/recaptcha/api.js'></script>
<asp:Panel runat="server" ID="pnlSiteQuestions">
>>>>> CONTROLS removed for brevity <<<<<
<asp:Button ID="btnContinue" runat="server" Text="Continue" OnClick="btnContinue_Click" ValidationGroup="Questions" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="pnlNotRequired" runat="server" Visible="false">
Sorry you do not qualify.
</asp:Panel>
<asp:Panel runat="server" ID="pnlAdditionalDetails" Visible="false">
<asp:ValidationSummary runat="server" ID="ValidationSummary1" />
Name
<asp:RequiredFieldValidator runat="server" ID="ValidatorName" ControlToValidate="ContactFormNameTextBox" ErrorMessage="Name is required" CssClass="ErrorClass">Required</asp:RequiredFieldValidator>
<asp:TextBox runat="server" ID="txtName" />
<div class="g-recaptcha" data-sitekey="ABC123"></div>
<asp:Button runat="server" ID="button1" Text="Confirm" OnClick="button1_Click" />
</asp:Panel>
</form>
I have the above form and decided to add an update panel. When a user clicks Continue, it goes to a database and determines if the user qualifies. If not pnlNotRequired message is displayed otherwise pnlAdditionalDetails is displayed.
Everything is/was working until i added the update panel. So removing the UP has everything working.
I tried adding a trigger but i didnt fully understand how it should be configured as i dont completely understand why this is occurring?
No Javascript errors listed either. Anyway to overcome this issue?
Update panel should cover all panels. Add property to update panel "UpdateMode='Conditional'" than add trigger block

Button inside modalpopup doesn't execute a line of code for outside component

Problems encountered:
Button inside UpdatePanel, which is inside ModalPopup, won't execute
.DataBind()
Button executes other codes but not .DataBind()
What I want to work:
When the button in the ModalPopup is clicked, .DataBind() is executed, Button is inside an UdatePanel and Gridview is outside the UpdatPanel
I have three updatepanels, all just to execute ModalPopupExtender separately based on some conditions. I also have a gridview, with a custom button to open the first popup, which is outside of the three updatepanels. Two updatepanels has a button for executing the .DataBind() for the gridview and at the same time hiding the other popups. After the buttonclick inside the popup (this is also inside an updatepanel), the previous popup closes which means that it executes the code .Hide() in codebehind, but the .DataBind() did not even though I put .DataBind() before .Hide()
I also tried to refresh the page using Response.Redirect and ServerTransfer instead of using .DataBind(), and the button stopped working.
I also tried to surround the gridview inside another updatepanel so I could just use .Update but when I execute the button for the popup, it refuses to close and the second popup appeared making it look like nested popups, the button for the second popup also stopped working.
The code works fine but the only thing that doesn't work is to refresh the gridview after the buttonclick inside the popup. If I click the button for the popup again (custom button inside the gridview), then that's when the gridview updates, and that is wrong.
I ran out of ideas how to work around this, any suggestions for this??
HTML
<asp:GridView ID="gridview" runat="server" CssClass="table table-hover" AutoGenerateColumns="False" DataKeyNames="OutgoingID" DataSourceID="SqlDataMaterials" HorizontalAlign="Center" OnRowCommand="gridview_RowCommand" Width="100%">
<Columns>
<asp:TemplateField HeaderText="#">
<ItemTemplate>
<asp:Button ID="myButton" runat="server" Text="View" CommandName="ClickMe" CommandArgument='<%# Eval("OutgoingID") %>' CausesValidation="False" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ClassificationName" HeaderText="ClassificationName" SortExpression="ClassificationName" />
<asp:BoundField DataField="MaterialName" HeaderText="MaterialName" SortExpression="MaterialName" />
<asp:BoundField DataField="Qty" HeaderText="Qty" SortExpression="Qty" />
<asp:BoundField DataField="Total" HeaderText="Total" SortExpression="Total" />
<asp:BoundField DataField="RequestDate" HeaderText="RequestDate" SortExpression="RequestDate" />
</Columns>
<EmptyDataTemplate>
<asp:Panel ID="Panel3" runat="server" CssClass="breadcrumb">
No Requests for this project.
</asp:Panel>
</EmptyDataTemplate>
</asp:GridView>
first popup
<asp:Panel ID="Panel2" runat="server" Height="400" Width="700" class="modalPopup">
<section class=" text-center" style="height: 149px; padding: 2px; vertical-align: middle; text-align: center;">
<section class="label-info">
<asp:Button ID="btn_Close" runat="server" Text="Close" Width="50px" Height="20px" CssClass="btn-danger pull-right" Font-Size="Smaller" />
<asp:Label ID="Label1" runat="server" Text="REQUEST INFORMATION" CssClass="label">
</asp:Label>
</section>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
(Some very long html here with buttons that execute the other popups)
</ContentTemplate>
</asp:UpdatePanel>
</section>
</asp:Panel>
<asp:HiddenField ID="HiddenField1" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BehaviorID="popup" PopupControlID="Panel2" DropShadow="True" BackgroundCssClass="modalBackground" TargetControlID="HiddenField1" OkControlID="btn_Close">
<Animations>
<OnShown><Fadein Duration="0.50" /></OnShown>
<OnHiding><Fadeout Duration=".05" /></OnHiding>
</Animations>
</ajaxToolkit:ModalPopupExtender>
second popup
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HiddenField ID="HiddenField2" runat="server" />
<asp:Panel ID="panelSuccess" runat="server" Height="150" Width="300" class="modalPopup">
<section class="text-center">
<h5>Request successfully approved.</h5>
<br />
<asp:Button ID="btnSuccessOk" runat="server" Text="OK" CssClass="btn btn-sm btn-success" OnClick="btnSuccessOk_Click" />
</section>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalAlertSuccess" runat="server" BehaviorID="popup2" PopupControlID="panelSuccess" DropShadow="True" TargetControlID="HiddenField2" BackgroundCssClass="modalBackground" OkControlID="btnSuccessOk">
<Animations>
<OnShown><Fadein Duration="0.50" /></OnShown>
<OnHiding><Fadeout Duration=".05" /></OnHiding>
</Animations>
</ajaxToolkit:ModalPopupExtender>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSuccessOk" />
</Triggers>
</asp:UpdatePanel>
third popup
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HiddenField ID="HiddenField3" runat="server" />
<asp:Panel ID="panelCancel" runat="server" Height="150" Width="300" class="modalPopup">
<section class="text-center">
<h5>Request Cancelled.</h5>
<br />
<asp:Button ID="btnCancelRq" runat="server" Text="OK" CssClass="btn btn-sm btn-success" OnClick="btnCancelRq_Click" />
</section>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalAlertCancel" runat="server" BehaviorID="popup3" PopupControlID="panelCancel" DropShadow="True" TargetControlID="HiddenField3" BackgroundCssClass="modalBackground" OkControlID="btnCancelRq">
<Animations>
<OnShown><Fadein Duration="0.50" /></OnShown>
<OnHiding><Fadeout Duration=".05" /></OnHiding>
</Animations>
</ajaxToolkit:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
AND THE THE CODE BEHIND
this is from the first popup
protected void btn_approve_Click(object sender, EventArgs e)
{
try
{
if (hf_outgoingId.Value != null)
{
var abc = (from a in db.Outgoings
where a.OutgoingID == Convert.ToInt32(hf_outgoingId.Value)
select a).FirstOrDefault();
abc.Status = "APPROVED";
db.SubmitChanges();
gridview.DataBind();
ModalPopupExtender1.Hide();
ModalAlertSuccess.Show();
}
}
catch (Exception x)
{
}
}
and just in case the second/third popup
protected void btnSuccessOk_Click(object sender, EventArgs e)
{
gridview.DataBind();
}
protected void btnCancelRq_Click(object sender, EventArgs e)
{
gridview.DataBind();
}
You have to assign data source before databind to gridview to bind data
protected void btnSuccessOk_Click(object sender, EventArgs e)
{
gridview.DataSourceID = SqlDataMaterials;
gridview.DataBind();
}
protected void btnCancelRq_Click(object sender, EventArgs e)
{
gridview.DataSourceID = SqlDataMaterials;
gridview.DataBind();
}
I have a working code now, but it still didn't answer why the button won't fire in the last two popups, Instead of putting the trigger in the last two modalpopupextender, I put it in the main popup, which their button is still inside an update panel. I don't know what the deal is with the last two popups why it won't execute since all of them are inside an updatepanel.
But I think that the buttonclick worked is because my main popup has the updatepanel inside it's panel, while the other two is surrounded within an updatepanel.
<asp:Panel ID="Panel2" runat="server" Height="400" Width="700" class="modalPopup" Style="display: none;">
<section class=" text-center" style="height: 149px; padding: 2px; vertical-align: middle; text-align: center;">
<section class="label-info">
<asp:Button ID="btn_Close" runat="server" Text="Close" Width="50px" Height="20px" CssClass="btn-danger pull-right" Font-Size="Smaller" />
<asp:Label ID="Label1" runat="server" Text="REQUEST INFORMATION" CssClass="label">
</asp:Label>
</section>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
(some long html code with button 'btn_approve')
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btn_approve" />
</Triggers>
</asp:UpdatePanel>
Code behind
protected void btn_approve_Click(object sender, EventArgs e)
{
try
{
if (hf_outgoingId.Value != null)
{
var abc = (from a in db.Outgoings
where a.OutgoingID == Convert.ToInt32(hf_outgoingId.Value)
select a).FirstOrDefault();
abc.Status = "APPROVED";
db.SubmitChanges();
gridview.DataBind();
ModalPopupExtender1.Hide();
ModalAlertSuccess.Show();
}
}
catch (Exception x)
{
}
}
I can also show the second popup right after I click the button without making it look like nested popups.

Page jumps to the top of the page even when using an Update Panel

I'm running into a bit of an issue. I have some asp.net controls wrapped in an update panel, but when I click the submit button it jumps to the top of the page. I've read a bunch of posts on here, and they either require use of some javascript or say set the MaintainPagePostion to "true" in the page directive. I tried setting it to true, that did not work. I really don't want to use a javascript script to accomplish this either. I was under the impression that this is one of the benefits to using an update panel. However, the part that I find most confusing, is it used to not do this. I don't remember changing anything on the website that would have caused this. Any help with this problem is appreciated. Thanks.
Here is the code I'm using.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlEmailStuff" runat="server">
Name: <asp:TextBox ID="txtName" runat="server" Width="202px"></asp:TextBox><br />
Email: <asp:TextBox ID="txtEmail" runat="server" Width="203px"></asp:TextBox><br />
<span style="font-size:12px; font-weight:normal; margin-left:55px;">**Please double check email**</span><br />
Message:<br />
<asp:TextBox ID="txtMessage" runat="server" Width="370px" TextMode="MultiLine" Font-Names="Tahoma" Font-Size="Small" Height="75px"></asp:TextBox><br />
<asp:Label ID="lblEmailError" runat="server" Text="" Font-Size="Small" ForeColor="Red"></asp:Label>
<asp:ImageButton Height="25px" Width="60px" CssClass="EmailSubmit" ImageUrl="Images/MailingListBtnSubmit2.png" ID="btnSubmit" runat="server" onclick="btnSubmit_Click"/>
</asp:Panel>
<asp:Panel ID="pnlThankYou" runat="server" Visible="false">
<p style="text-align:center; font-size:30px;">Thank you!<br /><span style="font-size:20px;">Your Email has been sucessfully submitted.</span></p>
</asp:Panel>
</ContentTemplate>
You can do it in 4 ways :
From Code-behind - Page.MaintainScrollPositionOnPostBack = true;
From Page Directive - MaintainScrollPositionOnPostback="true"
From Web.config - <pages maintainScrollPositionOnPostBack="true" />
Using Javascript. You can use the code from following link. It worked for me -
http://weblogs.asp.net/andrewfrederick/archive/2008/03/04/maintain-scroll-position-after-asynchronous-postback.aspx
I think, it's not jump to the top of the page. It's refreshing the page. What's your update panel's UpdateMode? Is it Conditional? If it's conditional, check trigger. ControlID should be button ID and EventName='Click'. Then check the area of Update Panel .
Sample Code Here :
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlEmailStuff" runat="server">
Name: <asp:TextBox ID="txtName" runat="server" Width="202px"></asp:TextBox><br />
Email: <asp:TextBox ID="txtEmail" runat="server" Width="203px"></asp:TextBox><br />
<span style="font-size:12px; font-weight:normal; margin-left:55px;">**Please double check email**</span><br />
Message:<br />
<asp:TextBox ID="txtMessage" runat="server" Width="370px" TextMode="MultiLine" Font-Names="Tahoma" Font-Size="Small" Height="75px"></asp:TextBox><br />
<asp:Label ID="lblEmailError" runat="server" Text="" Font-Size="Small" ForeColor="Red"></asp:Label>
<asp:ImageButton Height="25px" Width="60px" CssClass="EmailSubmit" ImageUrl="Images/MailingListBtnSubmit2.png" ID="btnSubmit" runat="server" onclick="btnSubmit_Click"/>
</asp:Panel>
<asp:Panel ID="pnlThankYou" runat="server" Visible="false">
<p style="text-align:center; font-size:30px;">Thank you!<br /><span style="font-size:20px;">Your Email has been sucessfully submitted.</span></p>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Have you specified the triggers in the update panel? If you specify the triggers in the triggers section then the update panel will update without jumping on top.Also you need to give updatemode = "conditional". It can be done like this:
<asp:UpdatePanel ID="ex" runat="server" UpdateMode="Conditional">
<ContentTemplate>
//your controls here
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="yourbuttonid" />
</Triggers>
</asp:UpdatePanel>
Well thank you to everyone that gave me suggestions. As it turns out the Page Routing is what caused this issue. So all I had to do to get it working was add and ignore line for that page in my RegisterRoutes code block:
void RegisterRoutes(RouteCollection routes)
{
routes.Ignore("Mobile");
routes.Ignore("Booking.aspx*");//<---- This Fixed it.
routes.MapPageRoute("Gallery", "Gallery/{Name}", "~/Gallery.aspx");
routes.Ignore("*");//<---- This is better for me. It acts as a catch all.
}
This helped me solve the issue: http://forums.asp.net/t/1743640.aspx
EDIT
I added the "routes.Ignore("");" code to it to act as a catch all, so I really don't need to ignore "Booking.aspx" specifically. Keep in mind though the order is important here. The Ignore("") needs to be the last one or else none of the other routing will work.
Thanks again Everyone.
Please try PageRequestManager handlers
<script>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
try {
sender._controlIDToFocus = null;
}
catch (e) {
}
}
</script>
I was stuck for a few hours with a similar problem. I was convinced the problem was the UpdatePanel but it ended up being the defaultfocus & defaultbutton attributes in the form tag that was causing the page to jump up to focus the first textbox at the top of the page.
<form id="form1" runat="server" defaultbutton="buttonId" defaultfocus="textboxId">
This is something else to look at when facing this kind of issue.

How to work with two update panels on same .aspx page

I have two update panels on a page. And I want to update both of them conditions at different-2 conditions. But I don't know why this is not happening. I have specified triggers for both but not helpful, below is my code.
Please let me know Where I am wrong.
Actually there are three dropdown lists in first update panel when their selectedindexchange is fired then the second update panel's content also updates.
<asp:UpdatePanel ID="upSearch" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<div style="float: left; width: auto;">
<asp:DropDownList ID="ddlLocation" runat="server" Width="206px" DataTextField="LocationName"
DataValueField="Locationid" AutoPostBack="true" OnSelectedIndexChanged="ddlLocation_SelectedIndexChanged">
</asp:DropDownList>
<asp:DropDownList ID="ddlArea" runat="server" Width="200px" DataTextField="AreaName"
DataValueField="Areaid" AutoPostBack="true" OnSelectedIndexChanged="ddlArea_SelectedIndexChanged">
</asp:DropDownList>
<asp:DropDownList ID="ddlRoom" runat="server" Width="200px" DataTextField="RoomName"
DataValueField="Roomid">
</asp:DropDownList>
</div>
<div style="float: left; width: 80px;">
<asp:Button ID="btnSearch" runat="server" Text="Search" ValidationGroup="vgSearch"
CssClass="bluebtn" UseSubmitBehavior="false" OnClick="btnSearch_Click" />
</div>
<div style="float: left; width: 99%; padding: 5px 0px;">
</div>
</ContentTemplate>
</asp:UpdatePanel>
And the second one is as follow:-
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar ID="calSchedule" runat="server" NextPrevFormat="FullMonth" OnDayRender="calSchedule_DayRender"
OnVisibleMonthChanged="calSchedule_VisibleMonthChanged">
<DayHeaderStyle CssClass="dayheaderStyle" />
<NextPrevStyle />
<OtherMonthDayStyle BackColor="#ffffff" />
<SelectedDayStyle />
<TitleStyle CssClass="titleStyle" />
<TodayDayStyle BackColor="#ffffa0" ForeColor="#6699cc" />
<WeekendDayStyle />
<DayStyle CssClass="dayStyle" />
</asp:Calendar>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
First of all I would like to recall the use of UpdateMode
Always The panel will update its content on every post on the page, they can be partial rendering posts or full posts, in both cases the content of the panel will be updated
Conditional The content of the panel will only be updated when different conditions are met:
By default the events triggered by its child objects will trigger an update, you can change this behavior setting ChildrenAsTriggers="false"
When you declare a trigger in the Triggers section of the UpdatePanel
When you explicitly call the UpdatePanel.Update() method
Full page posts will trigger the update
The following code does the following:
Each UpdatePanel is updated when its child controls raise an event
The UpdatePanel 1 named: up1 will be updated only when its child controls raise an event
The UpdatePanel 2 named up2 will be updated when its child controls raise an event
The UpdatePanel 2 named up2 will also be updated when the triggers defined are fired, in this case, when the DropDownList named ddl1OnPanel1 on the UpdatePanel 1 fires its SelectedIndexChanged
The UpdatePanel 2 named up2 will also be updated when the DropDownList named ddl2OnPanel1 on the UpdatePanel 1 raises its SelectedIndexChanged, because in code it explicitly calls: this.up2.Update();
I think that tweaking this code, you could achieve your desired goal, just copy paste it on a new page and run it
Check the following code (see how the labels showing the date are affected in different ways depending on the events raised):
Code Behind
protected void ddl1OnPanel1_SelectedIndexChanged(object sender, EventArgs e)
{
this.lblMessageOnPanel1.Text = "From ddl1 " + DateTime.Now.ToString();
this.calendarOnPanel2.SelectedDate = DateTime.Today.AddDays(1);
this.lblMessageOnPanel2.Text = "From ddl1 " + DateTime.Now.ToString();
}
protected void ddl2OnPanel1_SelectedIndexChanged(object sender, EventArgs e)
{
this.lblMessageOnPanel1.Text = "From ddl2 " + DateTime.Now.ToString();
this.calendarOnPanel2.SelectedDate = DateTime.Today.AddDays(2);
this.lblMessageOnPanel2.Text = "From ddl2 " + DateTime.Now.ToString();
this.up2.Update();
}
ASPX
<asp:ScriptManager runat="server" ID="scriptManager" />
<asp:Button Text="Full Post" runat="server" />
<br />
<asp:UpdatePanel runat="server" ID="up1" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList runat="server" ID="ddl1OnPanel1" AutoPostBack="true" OnSelectedIndexChanged="ddl1OnPanel1_SelectedIndexChanged">
<asp:ListItem Text="text1" />
<asp:ListItem Text="text2" />
</asp:DropDownList>
<br />
<asp:DropDownList runat="server" ID="ddl2OnPanel1" AutoPostBack="true" OnSelectedIndexChanged="ddl2OnPanel1_SelectedIndexChanged">
<asp:ListItem Text="text3" />
<asp:ListItem Text="text4" />
</asp:DropDownList>
<br />
<asp:Label runat="server" ID="lblMessageOnPanel1" />
<br />
<asp:Button ID="Button1" Text="text" runat="server" />
<br />
On every post on Panel 1: <%:DateTime.Now %>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<asp:UpdatePanel runat="server" ID="up2" UpdateMode="Conditional">
<ContentTemplate>
<asp:Calendar ID="calendarOnPanel2" runat="server" >
<DayHeaderStyle CssClass="dayheaderStyle" />
<NextPrevStyle />
<OtherMonthDayStyle BackColor="#ffffff" />
<SelectedDayStyle />
<TitleStyle CssClass="titleStyle" />
<TodayDayStyle BackColor="#ffffa0" ForeColor="#6699cc" />
<WeekendDayStyle />
<DayStyle CssClass="dayStyle" />
</asp:Calendar>
<br />
<asp:Label ID="lblMessageOnPanel2" runat="server" />
<br />
On every post On Panel 2: <%:DateTime.Now %>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddl1OnPanel1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
Simple Output
You could change the UpdateMode="Always" on the UpdatePanel 2, to see the difference, if you do it, this panel will be updated on every post, either full posts or posts coming from the UpdatePanel1
I used this successfully for 4 updatepanel.
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="true" CombineScripts="false" ScriptMode="Release">
</asp:ToolkitScriptManager>
Remove the Autopostback="True" from the DropdownLists if you want an asyncpostback to happen.
Also, what exactly is wrong at the moment? The updatepanels don't update at all?
EDIT. Also remove childrenAsTriggers as it is not needed at this occasion
If you are using nested update panels refer below sample code:
<asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<fieldset>
<legend>Parent UpdatePanel</legend>
Last refresh <%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button1" runat="server" Text="Refresh Outer Panel" />
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<fieldset>
<legend>Nested UpdatePanel</legend>
Last refresh <%=DateTime.Now.ToString() %> <br />
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
If not using nested update panels then remove "UpdateMode" conditions from both Updatepanels of your code.

Using GridView inside UpdatePanel

I have an Updatepanel and Gridview inside it.
<asp:UpdatePanel ID="uplPanel" UpdateMode="Conditional" runat="server" OnLoad="uplPanel_Load">
<ContentTemplate>
<asp:GridView ID="gvPrList" runat="server" AutoGenerateColumns="false" AllowPaging="false"
AllowSorting="false" CssClass="list-table" HeaderStyle-CssClass="header">
<Columns>
<ItemTemplate>
<asp:Button ID="btnEdit" runat="server" Text="Edit" CssClass="button save" OnCommand="onPrItemCmd"
CommandName="editRow" CommandArgument='<%#Bind("ID") %>' Style="width: 80px" />
<asp:Button ID="btnDelete" runat="server" Text="Delete" CssClass="button save" OnCommand="onPrItemCmd"
CommandName="deleteRow" CommandArgument='<%#Bind("ID") %>' Style="width: 80px" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
When I click on my buttons inside the Griview, it does not fire the events.
Any idea?
You need to add OnCommand event of GridView and then handle that inside that event like this:
OnRowCommand="gvPrList_OnRowCommand"
or alternatively add a click event for the individual button and then handle in the code behind file:
<asp:Button ID="btnEdit" runat="server" OnClick="btnEdit_Click" Text="Edit" CssClass="button save"
OnCommand="onPrItemCmd" CommandName="editRow" CommandArgument='<%#Bind("ID") %>' Style="width: 80px" />
I had the same issue where column buttons with a OnClick were causing a postback but the OnClick method was not being hit. When I commented out the update panel and it all worked.
I resolved this issue by adding a postback trigger for the grid within the update panel:
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="uxWebDataGrid" />
</Triggers>
</asp:UpdatePanel>
Hope this helps someone else!
I did the following and it works
I replace asp button with html button and call javascript method to fire Update Panal Load event.
<input id="btnDelete1" type="button" onclick="javascript:DeletePrItem('<%# Eval("ID") %>');" value="Delete" class="button save" style="width: 80px" />
My Js :
function DeletePrItem(_Id) {
__doPostBack('<%= uplPanel.ClientID %>', _Id);
}
My Code behind :
protected void uplPanel_Load(object sender, EventArgs e)
{
var arg = Request.Params.Get("__EVENTARGUMENT");
if (arg != null)
{
if (arg != "")
{
string recordId = arg.ToString();
//Do deletetion and rebind data grid
}
}
}
This would be the Event Handler for your command in the codebehind:
protected void onPrItemCmd(object sender, CommandEventArgs e)
{
//do whatever you want
//probably you will need the "ID" or "CommandArgument":
string myArgumentID = e.CommandArgument.ToString();
uplPanel.Update(); //since the UpdatePanel is set *UpdateMode="Conditional"*
}
UPDATE:
Probably, you might be doing some validation when you click on buttons. If so, you need to add CausesValidation="false" in your buttons or links properties
I had a similar issue.
Depending on your situation, as in mine...All of the clickable controls inside of the update panel I will want to be triggers; So i was simply able to use the UpdatePanel property 'ChildrenAsTriggers="true"' so solve the issue.
<asp:UpdatePanel runat="server" ID="UPCommunicationlogForm" ChildrenAsTriggers="true" >
This solved my issue, now my edit and delete buttons that are generated from the ItemTemplate inside my gridview call their respective methods on the server.
Please add this code into the UpdatePanel.
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="gvPrList" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
I added an OnRowCommand Event and add this trigger to the UpdatePanel:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="gvPrList" EventName="RowCommand" />
</Triggers>
Note that it's an Async trigger.
This helped me.
In my case I was changing a value in a asp:DropDownList control and then going back to the server to update my asp:GridView which is in a different asp:UpdatePanel. I just forgot to add code to refresh the Update Panel with the list. Once I did that everything worked fine.
Server side
System.Data.DataSet ds = MySQL.DAL.GetRecord(sql);
GV_View.DataSource = ds;
GV_View.DataBind();
UP_MainList.Update(); //refresh the update panel
Aspx code
<asp:UpdatePanel runat="server" ID="UP_ListChange" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList runat="server" ID="ddFilter" DataTextField="Desc" AutoPostBack="true" DataValueField="Detail" OnSelectedIndexChanged="GV_CodeView_RefreshScreen" ></asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
<div class="medium">Select Filter to view database codes</div>
</div>
<div class="div-row-header" runat="server" id="divList">
<asp:UpdatePanel runat="server" ID="UP_MainList" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GV_View" runat="server" AllowSorting="True" AutoGenerateColumns="false" DataKeyNames="id">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" Visible="false" />
<asp:BoundField DataField="Type_Cd" HeaderText="Code" />
<asp:BoundField DataField="Short_Desc" HeaderText=" Description" />
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:Button ID="Code_Edit" runat="server" Text="Edit" onClick="GV_Code_Edit_Click" class="button" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</ContentTemplate>
</asp:UpdatePanel>
</div>

Categories

Resources