.NET在WebForm里实现类似WinForm里面TrackBar控件的效果(AJAX Control Toolkit的使用)

　　WinForm 里面有一个 TrackBar 控件，表示一个标准的 Windows 跟踪条，是类似于 ScrollBar 控件的可滚动控件。用这个控件可以实现很多可以实时调整的功能，比如最常见的音量调节，播放进度调节等，很方便。但是，在 WebForm 里面没有类似的控件。那么在 WebForm 里要实现这样的功能怎么办呢？

　　这里介绍一种简单高效的方法。其实就是使用 AJAX Control Toolkit 里面的 SliderExtender 控件。

　　要想在 VS 里使用 AJAX Control Toolkit 的控件，最简单的方法是在项目里添加引用。首先，要获得 AjaxControlToolkit.dll 和 AjaxControlToolkit.pdb。然后在工具栏中新添加一个选项卡起名：AjaxControltoolkit，在这个选项卡上右键选择项->浏览找到 AjaxControlToolkit.dll，添加进来。这样就把 AJAX Control Toolkit 控件成功引用到 VS 中了。接下来就可以像使用其他工具栏中的控件一样使用 AJAX Control Toolkit 的控件了。

　　AJAX Control Toolkit 控件里面有个 ToolkitScriptManager，要使用其他控件前先要添加这个，而且必须放在所有 AJAX Control Toolkit 控件的前面。具体使用SliderExtender 控件的方法见代码。

　　前台代码：　　

 1 <ajaxToolkit:ToolkitScriptManager id="ScriptManager1" runat="server" EnablePartialRendering="true" />
<table>
　　<tr>
　　　　<td style="width: 140px;">
　　　　　　<asp:TextBox ID="Slider1" runat="server" AutoPostBack="true" Style="right: 0px" Text="0" />
       </td>
       <td style="width: 15px">
       </td>
       <td style="width: auto">
       　　<asp:Label ID="Slider1_BoundControl" runat="server" Style="text-align: right" />
       </td>
12 　　</tr>
13 　　<tr>
14 　　　　<td colspan="3">
       　　<div style="padding-top: 10px; text-align: center">
          　　<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
　　　　　　　　　　<ContentTemplate>
                 　　<asp:Label ID="lblUpdateDate" runat="server" Style="font-size: 80%;" Text="&nbsp;" />
                 </ContentTemplate>
                 <Triggers>
                 　　<asp:AsyncPostBackTrigger ControlID="Slider1" EventName="TextChanged" />
                 </Triggers>
23 　　　　　　　　</asp:UpdatePanel>
　　　　　　</div>
　　　　</td>
　　</tr>
</table>
<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" BehaviorID="Slider1"
　　TargetControlID="Slider1" Minimum="-100" Maximum="100" BoundControlID="Slider1_BoundControl"
　　Steps="200" />

 

　　后台代码：

        protected void Page_Load(object sender, EventArgs e)
        {            
            ScriptManager1.RegisterAsyncPostBackControl(Slider1);

            if (Page.IsPostBack)
            {
                lblUpdateDate.Text = "Changed at: " + DateTime.Now.ToLongTimeString();
            }
        }

　　效果截图：