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.