Introduction
In this
article we will see how to use the AlwasyVisibleControlExtender of AJAX controls
in an ASP.Net web page. As all you know about AJAX, AJAX is Asynchronous
JavaScript and XML can be used to design your webpage with some advanced
controls.
Background
In so many
cases we need to show some content on a web page which cannot be hidden by
scrolling of the webpage like some clock or e.g. you have a GridView and that
grid contains so many records with a status field which contains only
abbreviations of status like A, O, R and X (Accepted, Open, Rejected and
Closed). And the user cannot understand these abbreviations that we use to
maintain our logic in the database so for the user we have to show the full
forms of those abbreviations. In this situations we can use
AlwaysVisibleControlExtender to show the full forms of abbreviations. In this
article we will show the clock in alwasyvisibleextender for creating clock you
can read
Clock's Using Javascript in Asp.Net. So let's proceed with how to use the
AlwaysVisibleControlExtender in an ASP.Net web page.
Step 1
Start a new website then add a reference to AjaxControlToolkit.
Step 2
On
webpage keep one ScriptManager Control and AlwaysVisibleControlExtender and one
panel in which we will show the clock which is always visible.
<asp:ScriptManager
ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<cc1:AlwaysVisibleControlExtender
ID="AlwaysVisibleControlExtender1"
runat="server"
TargetControlID="Panel1"
VerticalSide="Top"
HorizontalSide="Right"
>
</cc1:AlwaysVisibleControlExtender>
<asp:Panel
ID="Panel1"
runat="server"
Width="174px"
Height="62px"
BorderWidth="2"
BorderColor="LightPink"
BackColor="OrangeRed"
HorizontalAlign="Center"
>
<div>
<table>
<tr>
<td
bgcolor="black"
height="45">
<img
src="dg8.gif"
name="hr1">
<img
src="dg8.gif"
name="hr2">
<img
src="dgc.gif"
name="c">
<img
src="dg8.gif"
name="mn1">
<img
src="dg8.gif"
name="mn2">
<img
src="dgc.gif"
name="c">
<img
src="dg8.gif"
name="se1">
<img
src="dg8.gif"
name="se2">
<img
src="dgpm.gif"
name="ampm">
</td></tr></table>
<script
language="javascript"><!--
start
dg0 = new
Image(); dg0.src = "dg0.gif";
dg1 = new Image(); dg1.src =
"dg1.gif";
dg2 = new Image(); dg2.src =
"dg2.gif";
dg3 = new Image(); dg3.src =
"dg3.gif";
dg4 = new Image(); dg4.src =
"dg4.gif";
dg5 = new Image(); dg5.src =
"dg5.gif";
dg6 = new Image(); dg6.src =
"dg6.gif";
dg7 = new Image(); dg7.src =
"dg7.gif";
dg8 = new Image(); dg8.src =
"dg8.gif";
dg9 = new Image(); dg9.src =
"dg9.gif";
dgam = new Image(); dgam.src =
"dgam.gif";
dgpm = new Image(); dgpm.src =
"dgpm.gif";
dgc = new Image(); dgc.src =
"dgc.gif";
function
dotime() {
theTime = setTimeout('dotime()',
1000);
d = new Date();
hr = d.getHours() + 100;
mn = d.getMinutes() + 100;
se = d.getSeconds() + 100;
if (hr == 100) { hr = 112; am_pm =
'am'; }
else if
(hr < 112) { am_pm = 'am'; }
else if
(hr == 112) { am_pm = 'pm'; }
else if
(hr > 112) { am_pm = 'pm'; hr = (hr - 12); }
tot = '' + hr + mn + se;
document.hr1.src = 'dg' +
tot.substring(1, 2) + '.gif';
document.hr2.src = 'dg' +
tot.substring(2, 3) + '.gif';
document.mn1.src = 'dg' +
tot.substring(4, 5) + '.gif';
document.mn2.src = 'dg' +
tot.substring(5, 6) + '.gif';
document.se1.src = 'dg' +
tot.substring(7, 8) + '.gif';
document.se2.src = 'dg' +
tot.substring(8, 9) + '.gif';
document.ampm.src = 'dg' + am_pm +
'.gif';
}
dotime();
//end -->
</script>
</div>
</asp:Panel>
In the panel I
show a clock; you can replace the content of the panel with whatever you want to
on the webpage. In the above lines of code see the lines:
<cc1:AlwaysVisibleControlExtender
ID="AlwaysVisibleControlExtender1"
runat="server"
TargetControlID="Panel1"
VerticalSide="Top"
HorizontalSide="Right"
>
</cc1:AlwaysVisibleControlExtender>
Which is the always visible control extender? We have to set some properties of
the AlwaysVisibleControlExtender in that ID and runat you know very well and
remaining are TargetControlId is the Id of control which you want to show always
visible I've set it to Panel1 in which my clock is present. And another on which
location you want to show you can adjust it with VerticleSide and
HorizontalSide.
Step 3
Run
the application and see the output of AlwaysVisibleControlExtender control.
Conclusion:
In
this way we can use AlwaysVisibleControlExtender on our ASP.Net webpage.