Post
Ask Question

Always Visible Control Extender in ASP.NET Ajax

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.

  1.  <asp:ScriptManager ID="ScriptManager1" runat="server">  
  2.         </asp:ScriptManager>  
  3.          <cc1:AlwaysVisibleControlExtender    
  4.             ID="AlwaysVisibleControlExtender1"   
  5.             runat="server"   
  6.             TargetControlID="Panel1"   
  7.             VerticalSide="Top"   
  8.             HorizontalSide="Right"   
  9.             >   
  10.         </cc1:AlwaysVisibleControlExtender>     
  11.         <asp:Panel    
  12.             ID="Panel1"    
  13.             runat="server"   
  14.             Width="174px"   
  15.             Height="62px"   
  16.             BorderWidth="2"   
  17.             BorderColor="LightPink"   
  18.             BackColor="OrangeRed"   
  19.             HorizontalAlign="Center"   
  20.             >   
  21.               <div>  
  22.     <table>  
  23.     <tr>  
  24. <td bgcolor="black" height="45">  
  25. <img src="dg8.gif" name="hr1">  
  26. <img src="dg8.gif" name="hr2">  
  27. <img src="dgc.gif" name="c">  
  28. <img src="dg8.gif" name="mn1">  
  29. <img src="dg8.gif" name="mn2">  
  30. <img src="dgc.gif" name="c">  
  31. <img src="dg8.gif" name="se1">  
  32. <img src="dg8.gif" name="se2">  
  33. <img src="dgpm.gif" name="ampm">  
  34. </td></tr></table>  
  35.   
  36. <script language="javascript"><!--    start  
  37.   
  38.     dg0 = new Image(); dg0.src = "dg0.gif";  
  39.     dg1 = new Image(); dg1.src = "dg1.gif";  
  40.     dg2 = new Image(); dg2.src = "dg2.gif";  
  41.     dg3 = new Image(); dg3.src = "dg3.gif";  
  42.     dg4 = new Image(); dg4.src = "dg4.gif";  
  43.     dg5 = new Image(); dg5.src = "dg5.gif";  
  44.     dg6 = new Image(); dg6.src = "dg6.gif";  
  45.     dg7 = new Image(); dg7.src = "dg7.gif";  
  46.     dg8 = new Image(); dg8.src = "dg8.gif";  
  47.     dg9 = new Image(); dg9.src = "dg9.gif";  
  48.     dgam = new Image(); dgam.src = "dgam.gif";  
  49.     dgpm = new Image(); dgpm.src = "dgpm.gif";  
  50.     dgc = new Image(); dgc.src = "dgc.gif";  
  51.   
  52.     function dotime() {  
  53.         theTime = setTimeout('dotime()', 1000);  
  54.         d = new Date();  
  55.         hr = d.getHours() + 100;  
  56.         mn = d.getMinutes() + 100;  
  57.         se = d.getSeconds() + 100;  
  58.         if (hr == 100) { hr = 112; am_pm = 'am'; }  
  59.         else if (hr < 112) { am_pm = 'am'; }  
  60.         else if (hr == 112) { am_pm = 'pm'; }  
  61.         else if (hr > 112) { am_pm = 'pm'; hr = (hr - 12); }  
  62.         tot = '' + hr + mn + se;  
  63.         document.hr1.src = 'dg' + tot.substring(1, 2) + '.gif';  
  64.         document.hr2.src = 'dg' + tot.substring(2, 3) + '.gif';  
  65.         document.mn1.src = 'dg' + tot.substring(4, 5) + '.gif';  
  66.         document.mn2.src = 'dg' + tot.substring(5, 6) + '.gif';  
  67.         document.se1.src = 'dg' + tot.substring(7, 8) + '.gif';  
  68.         document.se2.src = 'dg' + tot.substring(8, 9) + '.gif';  
  69.         document.ampm.src = 'dg' + am_pm + '.gif';  
  70.     }  
  71.     dotime();  
  72. //end -->  
  73. </script>  
  74.    
  75.     </div>  
  76.         </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:

  1. <cc1:AlwaysVisibleControlExtender    
  2.    ID="AlwaysVisibleControlExtender1"   
  3.    runat="server"   
  4.    TargetControlID="Panel1"   
  5.    VerticalSide="Top"   
  6.    HorizontalSide="Right"   
  7.    >   
  8. lt;/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.


Similar Articles