How to create Slider in ASP.NET using AJAX?

In this article I have explained about slider concept in ASP.NET using AJAX. For example we need to search product in shopping page between two prices, that time user search product based on the price, if we use two slider then user select from price and to price amount for search. Find how to create Slider in ASP.NET using AJAX?

Learn how to create Slider in ASP.NET using AJAX?

Description:
Here I gave detailed explanation how to use single and multi handler slider in ASP.NET using AJAX slider control. Follow the below explanation and source code.

Client side
In the client side of the page I have create two slider control one for show single slider in web page and another is show example of multi slider in your webpage.

Single slider:
Single slider is used to show only single selected value in textbox, so we can get product from database from minimum amount to entered amount.


<%--Single slider Example--%>
<asp:MultiHandleSliderExtender ID="multiHandleSliderExtender1" runat="server" TargetControlID="TextBox1"
    BehaviorID="multiHandleSliderOne" Minimum="1" Maximum="100" BoundControlID="TextBox2"
    Steps="5" Length="100" TooltipText="{0}">          
    </asp:MultiHandleSliderExtender>            
<table width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2"><b>Single slider Extender</b></td>
</tr>
<tr>
<td height="40">Select price to be search</td>
<td style="padding-left:10px;"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td height="40">Selected Value</td>
<td style="padding-left:10px;"><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
</tr>
 <tr>
<td height="40" align="center" colspan="2"><asp:Button ID="Button1" runat="server" 
        Text="Search" CssClass="btn" onclick="Button1_Click" /></td>
</tr>
</table>

In server side write query for search (single slider) search like this


protected void Button1_Click(object sender, EventArgs e)
{
    sqlcon.Open();
    sqlcmd = new SqlCommand("select * from prod where price between 0 and " + TextBox2.Text, sqlcon);
    da = new SqlDataAdapter(sqlcmd);
    da.Fill(dt);
    GridView1.DataSource = dt;
    GridView1.DataBind();
    sqlcon.Close();
}

Multi Slider:
If we use MultiHandle slider is show two or more slider in a web page for user select values like from and to price.


<%--Multi slider Example--%>
<asp:MultiHandleSliderExtender ID="multiHandleSliderExtenderTwo" runat="server" TargetControlID="sliderTwo"
    BehaviorID="multiHandleSliderTwo" Minimum="1" Maximum="100"
    Steps="5" Length="100" TooltipText="{0}">            
    <MultiHandleSliderTargets>
        <asp:MultiHandleSliderTarget ControlID="txtfrm" />
        <asp:MultiHandleSliderTarget ControlID="txtto"/>
    </MultiHandleSliderTargets>
    </asp:MultiHandleSliderExtender>
<table width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2"><b>Multi slider Extender</b></td>
</tr>
<tr>
<td height="40">Select price to be search</td>
<td style="padding-left:10px;"><asp:TextBox ID="sliderTwo" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td class="style1">From</td>
<td style="padding-left:10px;" class="style1"><asp:TextBox ID="txtfrm" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td height="40">To</td>
<td style="padding-left:10px;"><asp:TextBox ID="txtto" runat="server" Text="100"></asp:TextBox></td>
</tr>
<tr>
    <td height="40" align="center" colspan="2"><asp:Button ID="Button2" runat="server" 
            Text="Search" CssClass="btn" onclick="Button2_Click" /></td>
</tr>
</table>

In server side write query for search (Multi slider) search like this


protected void Button2_Click(object sender, EventArgs e)
{
    sqlcon.Open();
    sqlcmd = new SqlCommand("select * from prod where price between " + txtfrm.Text + " and " + txtto.Text , sqlcon);
    da = new SqlDataAdapter(sqlcmd);
    da.Fill(dt);
    GridView1.DataSource = dt;
    GridView1.DataBind();
    sqlcon.Close();
}

Complete Code
Client side


<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!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>AJAX Single and Multi slider Example</title>
    <style type="text/css">
    .btn
    {
        background-color: #033280;
        color: White;
        font-size: 12px;
        font-weight: bold;   
    }   
        .style1
        {
            height: 40px;
        }
  </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <%--Single slider Example--%>
        <asp:MultiHandleSliderExtender ID="multiHandleSliderExtender1" runat="server" TargetControlID="TextBox1"
            BehaviorID="multiHandleSliderOne" Minimum="1" Maximum="100" BoundControlID="TextBox2"
            Steps="5" Length="100" TooltipText="{0}">          
            </asp:MultiHandleSliderExtender>            
        <table width="600" cellpadding="0" cellspacing="0" align="center">
        <tr>
        <td colspan="2"><b>Single slider Extender</b></td>
        </tr>
        <tr>
        <td height="40">Select price to be search</td>
        <td style="padding-left:10px;"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
        <td height="40">Selected Value</td>
        <td style="padding-left:10px;"><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
        </tr>
         <tr>
        <td height="40" align="center" colspan="2"><asp:Button ID="Button1" runat="server" 
                Text="Search" CssClass="btn" onclick="Button1_Click" /></td>
        </tr>
        </table> 
            
         
      <%--Multi slider Example--%>
              
            <asp:MultiHandleSliderExtender ID="multiHandleSliderExtenderTwo" runat="server" TargetControlID="sliderTwo"
            BehaviorID="multiHandleSliderTwo" Minimum="1" Maximum="100"
            Steps="5" Length="100" TooltipText="{0}">
            <MultiHandleSliderTargets>
            <asp:MultiHandleSliderTarget ControlID="txtfrm" />
            <asp:MultiHandleSliderTarget ControlID="txtto"/>
            </MultiHandleSliderTargets>
            </asp:MultiHandleSliderExtender>
        <table width="600" cellpadding="0" cellspacing="0" align="center">
        <tr>
        <td colspan="2"><b>Multi slider Extender</b></td>
        </tr>
        <tr>
        <td height="40">Select price to be search</td>
        <td style="padding-left:10px;"><asp:TextBox ID="sliderTwo" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
        <td class="style1">From</td>
        <td style="padding-left:10px;" class="style1"><asp:TextBox ID="txtfrm" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
        <td height="40">To</td>
        <td style="padding-left:10px;"><asp:TextBox ID="txtto" runat="server" Text="100"></asp:TextBox></td>
        </tr>
        <tr>
            <td height="40" align="center" colspan="2"><asp:Button ID="Button2" runat="server" 
                    Text="Search" CssClass="btn" onclick="Button2_Click" /></td>
        </tr>
        </table> 
        
         <%--Grid View for Display search record--%>
           
          <table width="600" cellpadding="0" cellspacing="0" align="center">
        <tr>
        <td colspan="2" height="60" align="center">
            <asp:GridView ID="GridView1" runat="server">
            </asp:GridView>
        </td>
        </tr>
        </table>
      
    </div>
    </form>
</body>
</html>

Server side


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;

public partial class _Default : System.Web.UI.Page 
{
    SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["Con"].ConnectionString);
    SqlCommand sqlcmd = new SqlCommand();
    SqlDataAdapter da = new SqlDataAdapter();
    DataTable dt = new DataTable();

    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        sqlcon.Open();
        sqlcmd = new SqlCommand("select * from prod where price between 0 and " + TextBox2.Text, sqlcon);
        da = new SqlDataAdapter(sqlcmd);
        da.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();
        sqlcon.Close();
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        sqlcon.Open();
        sqlcmd = new SqlCommand("select * from prod where price between " + txtfrm.Text + " and " + txtto.Text , sqlcon);
        da = new SqlDataAdapter(sqlcmd);
        da.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();
        sqlcon.Close();
    }
}

Output
Slider_ouput

Source code:
Download the attached source code and try to learn AJAX Slider control and its uses.

Front End: ASP.NET
Code Behind: C#

Conclusion:
I hope this article is help to know about AJAX Slider control in ASP.NET.

Attachments

Source_code (43508-221843-AJAXMultiSlider.rar)

How to create Slider in ASP.NET using AJAX?

Learn how to create Slider in ASP.NET using AJAX?

Attachments

Comments

Ajax Control Toolkit Example: Using SliderExtender

About dotnetspider.com

Quick Links

General

Services