.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="" />
        </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="">
        　　<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="" BoundControlID="Slider1_BoundControl"
 　　Steps="" />

　　后台代码：

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

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

　　效果截图：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAABGCAIAAADgqYclAAAFV0lEQVR4nO2cT076TBiAewlu0UXPwCW6IdEDQAwxSFyoTUwXysKFBhMxKlisxT9EJCoxuFADhjlBdyaw/fUTTvAtiu30r22FGWzfJ11Y7HTedp7OO1NlGA0A5g9DOwAgEYBnAAnAM4AE4BlAAvAMIAF4BpAAPANIAJ4BJEiWZ5+fn91ut91u39/ft1qtZrN5e3t7fX19c3PT7/dpRxdnkuVZp9N5fHxsNpuNRkNRFFmWLy4uKpXK7u5urVajHV2cSZZnb29vumdXV1eyLMuyXK/XK5XKzs7O4eEh7ejiTLI8QwhNJpPxePwfxmg0Qgg1Gg3a0cWZZHk2GAzG4/HX1xfu2XA4RAgpikI7ujiTLM8+Pj4mk4nNs9FoNBgMLi8vaUe30ChChmEYhmEyQpQHMlme9ft9r7wpyzLt6BYXJIkMwyFN0zTEMYwoobBnSJZn7+/vXnmzXq/Tjm5hUTNsynALSWKKzaghT5Esz15fX515U/dMkiTa0S0siGNSSm+qltpTUtO+LQR+nt0/3Mdse3l5cR2fIYRqtRr18Ga+RRXLgkMsi3YB8fPs699nzDZXz4bD4WAwqFar1MOb+RZNLBvgWeit2+065wF63jw7O6Me3sy3aGLZmLtn8eP5+dk5D9Dfa5ycnNCObmGZ8/gsfnQ6HfAsPDDfDMnT05NX3jw+PqYd3eIC78/C8fDw4DUPqFQqtKNbaODvASFot9te78+Ojo5oRxdnkuVZq9Xyypvwf0FzJVme3d3dec0DyuUy7ejiTLI8q1ar5+fn5XK5VCqJori1tbW+vp7NZpeXlwuFAu3o4kyyPCuVSqenpwcHB6VSaXt7e3Nzs1gsZrPZpaWlYrFIO7o4kyzPWq3WxsbG2tpaoVBYXV3N5/P5fH5lZSWXy+3t7dGOLs4kyzOAFuAZQALwDCABeAaQADwDSACeASQAzwASgGcACcAzgATgGUAC8AwgAXgGkAA8A0gAngEkAM8AEoBnAAnAM4AE4BlAAmKeIY6ZwvGipmkizzHhl2n4VQSSyET6LvVM6tUv3Vq3Kgj7UYurGTbldk47Im/ceNtXfAPVPivIeGZZoEHkeTT9ME24zRUhE80zJO2HXSHHKJr+Xo1CETJGS+tf79YfuQjFRZ7TL8T4wYt9QXDGHbj2mUHCM4+VP/6SZyKfjuYZvrqO2lPSWNPadoMXV3sKG3QlFc9OK0jtM4SEZ/iDiKFm2LQwXbXB7PyNdRwMNfUM6zwSSygM871wktpTUtbi+Icsy/p75qzdKOtMUoqQCbVyDpJEvHbXlvY5p1EcSSLHi98J0T8kVRBynOOGeNU+P+h6ltI/N7oZ/OKxLsTlSKw7xPtFNcfnDD9y00oR990Y/lnGo3aXXeO6wniGeGu7hvTMLI4PNHXnvIubN8fWConyzLwFWPMbM4YU5pnzSBfPrH3PdPyB39AAedNZu6b9Im9ip7UP2MO0tKW41S1zAOdPhKw9QwiNz/BnDkmSzQ+8P0uZfU/a1zPTKkNi13uHdWw/eOZRu8tuSFwk84o2SHHr+MzPs1+ODmcImfkmvvCk0f+72GOdUvl7ZqZIr4oEe960THudeNSO76qS9IAfHyBvWqY7+OrxwfKma3HzQvzzpnUkwP04OpwfhN6fYRnNHCrpqe37V7of5ms2lmX1Dz2OdH8z5KxIM2cMKZ5PM35r+LrUbjsDXjaIZ9bJCmN7r/HjOb2Ku053XEMyzmDT0bX2+fFX/x6AJBEb89mH2MCi8Vc90yz9GaGHEojMH/YM+EOAZwAJwDOABOAZQALwDCABeAaQADwDSACeASQAzwASgGcACf4HcLuRMR3ts/UAAAAASUVORK5CYII=" alt="" />　　aaarticlea/png;base64,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" alt="" />　　aaarticlea/png;base64,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" alt="" />