Asp.net Ajax 服务器控件使用 --- 2.AlwaysVisibleControl

AlwaysVisibleControl Demonstration

 <asp:ScriptManager id="ScriptManager" runat="server" EnablePartialRendering="true" />
    <div class="demoarea">
        <div class="demoheading">AlwaysVisibleControl Demonstration</div>
        <asp:UpdatePanel ID="update" runat="server">
            <ContentTemplate>
                <div style="width:230px;height:100px">
                    <asp:Panel ID="timer" runat="server"
                        Width="220px" BackColor="White" ForeColor="DarkBlue"
                        BorderWidth="2" BorderStyle="solid" BorderColor="DarkBlue" style="z-index: 1;">
                        <div style="width: 100%; height: 100%; vertical-align: middle; text-align: center;"><p>Current Time:</p><span id="currentTime" runat="server" style="font-size:xx-large;font-weight:bold;line-height:40px;"/></div>
                    </asp:Panel>
                    <ajaxToolkit:AlwaysVisibleControlExtender ID="avce" runat="server"
                            TargetControlID="timer"
                            VerticalSide="Top" VerticalOffset="10"
                            HorizontalSide="Right" HorizontalOffset="10"
                            ScrollEffectDuration=".1" />
                </div>
                <p>
                Choose a position for the clock from the list below, then scroll your browser window to see the demo.  
                </p>
                <p>
                
                Position: <asp:DropDownList ID="ddlPosition" runat="server" 
                    AutoPostBack="true" OnSelectedIndexChanged="OnChange">
                    <asp:ListItem Text="Default" Selected="true"  Value="None" />
                    <asp:ListItem Text="Top Left" Value="TL" />
                    <asp:ListItem Text="Top Center" Value="TC" />
                    <asp:ListItem Text="Top Right"  Value="TR" />
                    <asp:ListItem Text="Middle Left" Value="ML" />
                    <asp:ListItem Text="Middle Center" Value="MC" />
                    <asp:ListItem Text="Middle Right"  Value="MR" />
                    <asp:ListItem Text="Bottom Left" Value="BL" />
                    <asp:ListItem Text="Bottom Center" Value="BC" />
                    <asp:ListItem Text="Bottom Right" Value="BR" />
                </asp:DropDownList>
                </p>
                
            </ContentTemplate>
         </asp:UpdatePanel>
         <script type="text/javascript" language="javascript">
            function updateTime()
            {
                var label = document.getElementById('ctl00_ContentPlaceHolder1_currentTime');
                if (label) {
                    var time = (new Date()).toLocaleTimeString();
                    time = time.match(/^(\s*\d{1,2}\s*\:\s*\d{1,2}\s*\:\s*\d{1,2}\s*[A-Za-z]{2}).*$/)[1];
                    label.innerHTML = time;
                }
            }            
            updateTime();
            window.setInterval(updateTime, 1000);
        </script>
    </div>

对应的后台代码：

 protected void Page_Load(object sender, EventArgs e)
    {
        // Because we use JavaScript to set the time and we're using an update
        // panel, refreshes cause the display to be blank until the next javascript
        // event fires.  To prevent it from not showing up, we'll always set it here
        // as well and let JavaScript overwrite it
        currentTime.InnerText = DateTime.Now.ToLongTimeString();

        // Don't initially hook up the extender
        if (!IsPostBack)
            avce.Enabled = false;
    }

    /**//// <summary>
    /// Update properties of the extender
    /// </summary>
    protected void OnChange(object sender, EventArgs e)
    {
        if (string.IsNullOrEmpty(ddlPosition.SelectedValue) || ddlPosition.SelectedValue.Length != 2)
        {
            avce.Enabled = false;
            return;
        }

        avce.Enabled = true;
        switch (ddlPosition.SelectedValue[0])
        {
            case 'T' :
                avce.VerticalSide = VerticalSide.Top;
                break;
            case 'M' :
                avce.VerticalSide = VerticalSide.Middle;
                break;
            case 'B' :
                avce.VerticalSide = VerticalSide.Bottom;
                break;
            default:
                avce.Enabled = false;
                return;
        }

        switch (ddlPosition.SelectedValue[1])
        {
            case 'L':
                avce.HorizontalSide = HorizontalSide.Left;
                break;
            case 'C':
                avce.HorizontalSide = HorizontalSide.Center;
                break;
            case 'R':
                avce.HorizontalSide = HorizontalSide.Right;
                break;
            default:
                avce.Enabled = false;
                return;
        }
    }