静以思

Microsoft .NET[C#] - SQL SERVER - ORACLE - Web Design
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::
AJAXControlToolKit 之Slider 使用实例

对于滑片的效果，在Ctrip, Elong也看到过，感觉效果不错，在这之前帮客户开发一个钻石交易系统时，客户当时也想做这个，不过由于本人当时能力有限，这个功能就没有做，不过看过AJAXControlToolKit的Slider受益非潜， 所以这几天有空就特地结发AJAX框架使用了一下，感觉不错，在这里就给大家共享一下吧。

一、运行效果图（注：可以与数据库无刷新连动）


效果就上面这样的

二、前台HTML代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Slider._Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Slider 使用实例</title>
    <style type="text/css">
<!--
body {
 font-size: 12px;
 color: #999999;
}
.STYLE3 {color: #FF6633}
#lySearch {
 position:absolute;
 left:308px;
 top:178px;
 width:410px;
 height:194px;
 z-index:1;
}
.STYLE1 {
 color: ##999999;
 font-weight: bold;
}
-->
</style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>Slider 使用实例...</div><br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
         <ContentTemplate>
         <table align="left" width="100%" height="245" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="20%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td><img src="arrow.gif" width="11" height="11" /> 价格范围： <span class="STYLE3">¥570 - ¥<asp:Label ID="lblPrice1" runat="server"/></span><br /><br /></td>
              </tr>
              <tr>
                <td>
                    <table border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td colspan="2"><asp:TextBox ID="Slider1" runat="server" AutoPostBack="true" style="display:none" Text="1130" OnTextChanged="Slider1_TextChanged" /></td>
                      </tr>
                      <tr>
                        <td><div align="left">￥570</div></td>
                        <td><div align="right">￥1700</div></td>
                      </tr>
                    </table>
                </td>
              </tr>
              <tr>
                <td><br /><br /><img src="arrow.gif" width="11" height="11" /> 价格范围： <span class="STYLE3">¥570 - ¥<asp:Label ID="lblPrice2" runat="server"/></span><br /><br /></td>
              </tr>
              <tr>
            <td></td>
          </tr>
          <tr><td>￥570</td></tr>
          <tr>
            <td><asp:TextBox ID="Slider2" runat="server" AutoPostBack="true" style="display:none"  Text="1130" OnTextChanged="Slider2_TextChanged"/></td>
          </tr>
          <tr><td>￥1700</td></tr>
            </table></td>
            <td width="80%" valign="top">
                <asp:GridView ID="GridView1" runat="server" Width="520px">
                        <AlternatingRowStyle BackColor="#EEEEEE" />
                    <HeaderStyle BackColor="#FFE0C0" Height="24px" />
                <RowStyle Height="22px" />
                    </asp:GridView>
            </td>
          </tr>
        </table>
     
        <ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server"
            BehaviorID="Slider1"
            TargetControlID="Slider1"
            Minimum="0"
            Maximum="1130"
            Steps="11" />
                                       
        <ajaxToolkit:SliderExtender ID="SliderExtender2" runat="server"
            BehaviorID="Slider2"
            TargetControlID="Slider2"
            Orientation="Vertical"
            EnableHandleAnimation="true"
            Minimum="0"
            Maximum="1130"
            Steps="11" />
           
</ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Slider1" EventName="TextChanged" />
        <asp:AsyncPostBackTrigger ControlID="Slider2" EventName="TextChanged" />
    </Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server"  DynamicLayout= "true ">
<ProgressTemplate>
<div id="lySearch">
<table align=left" width="351" height="67" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999">
  <tr>
    <td bgcolor="#FFFFCC"><div align="center" class="STYLE1"><br />请稍等，您查询的数据正在搜索中...<br />
    <img src="loading.gif" width="189" height="38" border="0" />
    </div></td>
  </tr>
</table>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
    </form>
</body>
</html>

三、后台代码

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace Slider
{
    public partial class _Default : System.Web.UI.Page
    {
        private int intMinRange = 570;
        private int intMaxRange = 1700;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                this.lblPrice1.Text = intMaxRange.ToString();
                this.lblPrice2.Text = intMaxRange.ToString();

                this.DataBindView(string.Empty);
            }
        }

        /// <summary>
        /// init Bind
        /// </summary>
        /// <param name="dt"></param>
        private void DataBindView(string strFilter)
        {
            if (string.IsNullOrEmpty(strFilter))
                strFilter = " Price >= " + intMinRange + " AND  Price <= " + intMaxRange;

            DataView dv = this.GetInitData().DefaultView;
            dv.RowFilter = strFilter;

            this.GridView1.DataSource = dv;
            this.GridView1.DataBind();
        }

        /// <summary>
        /// init Data
        /// </summary>
        /// <returns></returns>
        private DataTable GetInitData()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("AirID", typeof(int));
            dt.Columns.Add("StartCity", typeof(string));
            dt.Columns.Add("EndCity", typeof(string));
            dt.Columns.Add("Price", typeof(int));
            dt.Columns.Add("Date", typeof(DateTime));

            // init row
            dt.Rows.Add(this.GetComDataRow(dt, 10, "上海", "北京", 620));
            dt.Rows.Add(this.GetComDataRow(dt, 20, "上海", "南昌", 710));
            dt.Rows.Add(this.GetComDataRow(dt, 30, "上海", "广州", 1280));
            dt.Rows.Add(this.GetComDataRow(dt, 40, "上海", "宁波", 570));
            dt.Rows.Add(this.GetComDataRow(dt, 50, "上海", "南宁", 1050));
            dt.Rows.Add(this.GetComDataRow(dt, 60, "上海", "青岛", 780));
            dt.Rows.Add(this.GetComDataRow(dt, 70, "上海", "成都", 1500));
            dt.Rows.Add(this.GetComDataRow(dt, 80, "上海", "重庆", 1600));
            dt.Rows.Add(this.GetComDataRow(dt, 90, "上海", "西安", 890));
            dt.Rows.Add(this.GetComDataRow(dt, 100, "上海", "太原", 900));
            dt.Rows.Add(this.GetComDataRow(dt, 110, "上海", "大连", 1140));
            dt.Rows.Add(this.GetComDataRow(dt, 120, "上海", "厦门", 1000));
            dt.Rows.Add(this.GetComDataRow(dt, 130, "上海", "南京", 540));
            dt.Rows.Add(this.GetComDataRow(dt, 140, "上海", "武汉", 970));
            dt.Rows.Add(this.GetComDataRow(dt, 150, "上海", "深圳", 1350));
            dt.Rows.Add(this.GetComDataRow(dt, 160, "上海", "昆明", 1400));
            dt.Rows.Add(this.GetComDataRow(dt, 170, "上海", "呼和浩特", 1550));
            dt.Rows.Add(this.GetComDataRow(dt, 180, "上海", "天津", 1100));
            dt.Rows.Add(this.GetComDataRow(dt, 190, "上海", "长春", 1350));
            dt.Rows.Add(this.GetComDataRow(dt, 200, "上海", "哈尔滨", 1400));

            return dt;
        }

        /// <summary>
        /// init Row
        /// </summary>
        /// <param name="dt"></param>
        /// <param name="intAirID"></param>
        /// <param name="strStartCity"></param>
        /// <param name="strEndCity"></param>
        /// <param name="intPrice"></param>
        /// <returns></returns>
        private DataRow GetComDataRow(DataTable dt, int intAirID, string strStartCity, string strEndCity, int intPrice)
        {
            DataRow dr = dt.NewRow();
            dr["AirID"] = intAirID;
            dr["StartCity"] = strStartCity;
            dr["EndCity"] = strEndCity;
            dr["Price"] = intPrice;
            dr["Date"] = DateTime.Now;

            return dr;
        }

        protected void Slider1_TextChanged(object sender, EventArgs e)
        {
            int intPriceValue = Convert.ToInt16(this.Slider1.Text.ToString());
            this.Slider2.Text = intPriceValue.ToString();

            intPriceValue += intMinRange;
            this.lblPrice1.Text = intPriceValue.ToString();
            this.lblPrice2.Text = intPriceValue.ToString();

            string strFilter = " Price >= " + intMinRange.ToString() + " AND  Price <= " + intPriceValue.ToString();
            this.DataBindView(strFilter);

            System.Threading.Thread.Sleep(1000);
        }

        protected void Slider2_TextChanged(object sender, EventArgs e)
        {
            int intPriceValue = Convert.ToInt16(this.Slider2.Text.ToString());
            this.Slider1.Text = intPriceValue.ToString();

            intPriceValue += intMinRange;
            this.lblPrice1.Text = intPriceValue.ToString();
            this.lblPrice2.Text = intPriceValue.ToString();

            string strFilter = " Price >= " + intMinRange.ToString() + " AND  Price <= " + intPriceValue.ToString();
            this.DataBindView(strFilter);

            System.Threading.Thread.Sleep(1000);
        }

    }
}
 
posted on 2008-01-08 17:18  plife  阅读(431)  评论(0)    收藏  举报