How to Update Specific update panel and prevent other to be refreshed? - asp.net

Question

i am trying to add time attendance at dashboard but i have other
update panels with filter tools such as month and year when tick event
of the timer occured the dropdown options collapsed and i can't choose
one of them. i need to update only TimerUpdatePanel not other update
panels the code :
<asp:UpdatePanel ID="TimerUpdatePanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<div class="row">
<div class="offset-2 col-md-4">
<div id="timer" class="bg-primary timer-div">
<div>
<h2 id="Timer_Time" runat="server">00:00:00</h2>
<h2 id="Timer_Day" runat="server">-------</h2>
<h2 id="Timer_Date" runat="server">00-00-0000</h2>
</div>
</div>
</div>
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick" />
</div>
<div class="hr-line-dashed"></div>
<div class="row">
<div class="col-md-4 offset-5" style="padding-top: 12px; letter-spacing: 2px;">
<span id="PunchMsg" runat="server"></span>
<br />
<span id="TimerOption" runat="server"></span>
</div>
<div class="col-md-3">
<h2 id="stopWatch" runat="server"><span></span><span id="Hours"
runat="server">00:00:00
<asp:Button ID="PunchIN" Text="Punch In" runat="server" Visible="true" CssClass="btn btn-primary"
OnClick="PunchIN_Click"></asp:Button>
<asp:Button ID="PunchOut" Text="Punch Out" runat="server" Visible="false" CssClass="btn btn-warning"
OnClick="PunchOut_Click"></asp:Button>
</asp:UpdatePanel>
Protected Sub Timer1_Tick(sender As Object, e As EventArgs)
Dim CurrentDay = DateTime.Now.ToString("dddd")
Dim CurrentDate = DateTime.Now.ToString("dd-MM-yyyy")
Dim CurrentTime = DateTime.Now.ToString("H:mm tt")
Timer_Day.InnerText = CurrentDay
Timer_Date.InnerText = CurrentDate
Timer_Time.InnerText = CurrentTime
If PunchIN.Visible = False AndAlso PunchOut.Visible = True Then
If Session("TimerStatement") <> "" Then
Dim h = Val(Hours.InnerText)
Dim m = Val(Minutes.InnerText)
Dim s = Val(Seconds.InnerText)
s += 1
If s = 60 Then
s = 0
m = m + 1
End If
If m = 60 Then
m = 0
h = h + 1
End If
Hours.InnerText = h.ToString("00")
Minutes.InnerText = m.ToString("00")
Seconds.InnerText = s.ToString("00")
Else
TimerOption.InnerText = "Please select one of the below options first"
End If
End If
TimerUpdatePanel.Update()
End Sub
[this image show filter tools that be collpsed every 1 second][1]
[1]: https://i.stack.imgur.com/QYBCW.jpg

Answer 1

Well, some panel that updates with a timer? It should not bother other bits and parts on the page.
but, DO keep in mind the following:
While a update panel does prevent a page re-fresh, it DOES DO A post-back, or better said what we call a PARTICAL post back.
that means on each timer click, the web page LOAD event WILL fire each time. So, just like clicking any button on the form, you do get a post-back, and page load event will trigger each time.
What this means?
Well, if you load up say a drop down list, or other controls say like some grid view?
You BETTER make sure that the page load event ONLY loads up that grid, or drop down ON THE REAL first page load - since page load always will trigger over and over.
So, say we drop in this div to the page - (your example - stripped down).
<asp:UpdatePanel ID="TimerUpdatePanel" runat="server"
UpdateMode="Conditional" ChildrenAsTriggers="true" >
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick"
Enabled="false" />
<div style="width:20%;padding:15px;border:solid">
<h2 id="Timer_Time" runat="server">00:00:00</h2>
<h2 id="Timer_Day" runat="server">-------</h2>
<h2 id="Timer_Date" runat="server">00-00-0000</h2>
<hr />
<span id="PunchMsg" runat="server"></span>
<span id="TimerOption" runat="server" > </span>
<h2 id="stopWatch" runat="server" >
<span id="Hours" runat="server" >00:00:00</span>
</h2>
<asp:Button ID="PunchIN" Text="Punch In" runat="server" Visible="true"
style="float:left"
CssClass="btn btn-primary" OnClick="PunchIN_Click" >
</asp:Button>
<asp:Button ID="PunchOut" Text="Punch Out" runat="server" Visible="false"
style="float:right"
CssClass="btn btn-warning" OnClick="PunchOut_Click">
</asp:Button>
<br />
<br />
</div>
</ContentTemplate>
</asp:UpdatePanel>
And for code behind? Well, just like a date? We don't have to +1 to month etc.. ALL we need is the staring time when you punch in. From that we can get the elapsted time. We don't even need a timer here, and we could say update every 5 seconds, 10 seconds - it just don't matter.
So, our code can look like this now:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
Call Update
End Sub
Sub Update()
Dim dtNow As DateTime = DateTime.Now
Timer_Day.InnerText = dtNow.ToString("dddd")
Timer_Date.InnerText = dtNow.ToString("dd-MM-yyyy")
Timer_Time.InnerText = dtNow.ToString("H:mm tt")
' now show elapsed time
Dim dtPunchIn As DateTime = Session("PunchIn")
Dim MyTimeSpan As TimeSpan = (dtNow - dtPunchIn)
Hours.InnerText = MyTimeSpan.ToString("hh\:mm\:ss")
End Sub
Protected Sub PunchIN_Click(sender As Object, e As EventArgs) Handles PunchIN.Click
Session("PunchIn") = DateTime.Now
Timer1.Enabled = True
PunchIN.Visible = False
PunchOut.Visible = True
End Sub
Protected Sub PunchOut_Click(sender As Object, e As EventArgs) Handles PunchOut.Click
Timer1.Enabled = False
Call Update()
PunchOut.Visible = False
PunchIN.Visible = True
Session("PunchIn") = Nothing
End Sub
And now we see this:
Hit punch in, and we now have this:
Ok, so at this point, assuming our page load event does not mess things up?
Then your other controls - such as drop down etc. should not matter - not one bit.
(but, if you re-load combo box on each page load - then you have big issue).
So, lets drop in two more "div" and while they do NOT need to be up-date panels,
we can and will mmake them as such (in a bit!!!).
The 2nd panel will be some filter options, and the 3rd panel will be a grid that 2nd panel can filter.
So, we drop in this filter panel. (float left next to punch in panel)
<div style="width:20%;padding:15px;border:solid 1px;float:left;margin-left:20px">
<h3>Panel 2</h3>
<h4>Filters</h4>
<div style="float:left">
<asp:Label ID="Label1" runat="server" Text="Select City"></asp:Label>
<br />
<asp:DropDownList ID="cboCity" runat="server" Width="160px"
DataValueField="City"
DataTextField="City" >
</asp:DropDownList>
</div>
<div style="float:left;margin-left:20px">
<asp:Label ID="Label2" runat="server" Text="Select Province"></asp:Label>
<br />
<asp:DropDownList ID="cboProvince" runat="server" Width="160px"
DataValueField="Province"
DataTextField="Province" >
</asp:DropDownList>
</div>
<div style="clear:both"></div>
<br />
<div style="float:left">
<asp:Label ID="Label3" runat="server" Text="Must Have Description"></asp:Label>
<br />
<asp:CheckBox ID="chkDescripiton" runat="server" />
</div>
<div style="float:left;margin-left:20px">
<asp:Label ID="Label4" runat="server" Text="Show only Active Hotels"></asp:Label>
<br />
<asp:CheckBox ID="chkActiveOnly" runat="server" />
</div>
<div style="clear:both"></div>
<br />
<div style="float:left;">
<asp:Button ID="cmdSearch" runat="server" Text="Search" CssClass="btn"/>
</div>
<div style="float:right;">
<asp:Button ID="cmdClear" runat="server" Text="Clear Fitler" CssClass="btn"/>
</div>
</div>
And then our grid view: (panel 3)
<div style="width:40%;padding:15px;border:solid 1px;float:left;margin-left:20px">
<h3>Panel 3</h3>
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="ID" CssClass="table" Width="60%">
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="HotelName" HeaderText="HotelName" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Province" HeaderText="Province" />
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:BoundField DataField="Active" HeaderText="Active" />
</Columns>
</asp:GridView>
</div>
Code to load?
This:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
LoadData
End If
End Sub
Sub LoadData()
' load combo box for filters
Dim cmdSQL As New _
SqlCommand("SELECT City FROM tblHotels WHERE City is not null GROUP by City")
cboCity.DataSource = MyrstP(cmdSQL)
cboCity.DataBind()
cboCity.Items.Insert(0, New ListItem("All", "All"))
cmdSQL.CommandText =
"SELECT Province FROM tblHotels WHERE Province is not null GROUP by Province"
cboProvince.DataSource = MyrstP(cmdSQL)
cboProvince.DataBind()
cboProvince.Items.Insert(0, New ListItem("All", "All"))
' load grid data
cmdSQL.CommandText = "SELECT * FROM tblHotelsA ORDER BY HotelName"
GridView1.DataSource = MyrstP(cmdSQL)
GridView1.DataBind()
End Sub
NOTE SUPER care, we test/check IsPostBack = false - else our loading code will trigger each time. ALL YOUR web pages need this IsPostBack test on page load - even if no update panel. (your page will not work correctly if you don't add the above stub).
So, now we have this:
So, really, the combo boxes etc. in that 2nd panel (which is not yet a panel) does not really matter.
but, I could have any post-back from panel 2, say update panel 3. I don't really need to do this, but I could.
So, if I wrap a update panel around 2 and 3 above?
Then for 2nd panel (filter), I need to trigger update of panel 3
So, I add this to panel 2
<Triggers>
<asp:PostBackTrigger ControlID="cmdSearch" />
</Triggers>
but, all in all? use of combo boxes etc on your page? Should not matter.
But then again, every other day - we see posts here in that on page load event, they are re-loading drop downs, grids etc., and THEY REALLY only need to run and load on FIRST page load. As noted, failure to include the If NOt IsPostback code block will break most pages - even without a update panel.
But, do keep in mind, that page load WILL trigger on any post-back from a update panel - including button clicks, and the timer event. While the post-back is not a full page re-fresh, it does trigger page load each time.