In this article I will explain with an example, how to implement ASP.Net AJAX MultiHandleSliderExtender control of the ASP.Net AjaxControlToolkit Library using C# and VB.Net.
This article explains how to use ASP.Net AJAX MultiHandleSliderExtender control along with ASP.Net DataList control to display and filter database records based on the minimum and maximum price.
Database
The Products table has the following schema. This table will store the Product details.
![ASP.Net AJAX MultiHandleSliderExtender example]()
Note: You can download the database table SQL by clicking the download link below.
HTML Markup
The HTML Markup consists of an ASP.Net AJAX UpdatePanel with an associated ASP.Net AJAX UpdateProgress control. The ASP.Net AJAX UpdatePanel consists of a Label, an ASP.Net AJAX MultiHandleSliderExtender and a TextBox, two HiddenFields, a hidden LinkButton and a DataList control.
The ID of the TextBox is set as TargetControlID while the ID of the two HiddenFields are set as MultiHandleSliderTarget for the ASP.Net AJAX MultiHandleSliderExtender.
The ASP.Net AJAX MultiHandleSliderExtender is specified with OnClientDragEnd event handler and when the Slider is changed the LinkButton click event is triggered.
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="modal">
<div class="center">
<img alt="" src="loader.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="margin: 10px">
<asp:Label ID="lblSliderValue" runat="server" />
<asp:MultiHandleSliderExtender ID="MultiHandleSliderExtender1" runat="server" TargetControlID="txtSlider"
Minimum="100" Maximum="600" Increment="1" RaiseChangeOnlyOnMouseUp="true" EnableRailClick="false"
Length="600" OnClientDragEnd="OnClientDragEnd">
<MultiHandleSliderTargets>
<asp:MultiHandleSliderTarget ControlID="hfStart" />
<asp:MultiHandleSliderTarget ControlID="hfEnd" />
</MultiHandleSliderTargets>
</asp:MultiHandleSliderExtender>
<asp:HiddenField ID="hfStart" runat="server" />
<asp:HiddenField ID="hfEnd" runat="server" />
<asp:TextBox ID="txtSlider" runat="server"></asp:TextBox>
<asp:LinkButton ID="lnkSliderChanged" OnClick="SliderChanged" runat="server" />
<script type="text/javascript">
function OnClientDragEnd(sender, args) {
document.getElementById("<%=lnkSliderChanged.ClientID %>").click();
}
</script>
</div>
<br />
<hr />
<asp:DataList ID="dlProducts" runat="server" RepeatLayout="Table" RepeatColumns="3"
CellPadding="2" CellSpacing="20">
<ItemTemplate>
<table class="item" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" class="header">
<span class="name">
<%# Eval("Name") %></span>
</td>
</tr>
<tr>
<td align="center" class="body">
<asp:Image ID="Image1" ImageUrl='<%# Eval("ProductId", "~/images/{0}.png")%>' runat="server"
CssClass="image" />
</td>
</tr>
<tr>
<td class="footer" align="center">
<span class="button">
<%# Eval("Price") %></span>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Implementing the ASP.Net AJAX MultiHandleSliderExtender and populating the DataList
Inside the Page Load event of the page, the BindDataList function is executed. Inside
the BindDataList function, first the values of the HiddenFields are fetched and set to the values of start and end variables. Initially the values of HiddenFields are blank and hence the values of start and end variables is set to 0.
Using the values of start and end variables the list of Products is fetched from database and is used to populate the DataList control.
Along with the Product records, the Minimum and Maximum cost of the Product is also fetched and the values are set to the respective HiddenFields.
When the Slider is changed, the OnClientDragEnd event of ASP.Net AJAX MultiHandleSliderExtender is triggered which raises the SliderChanged event handler and the BindDataList function is executed.
On this occasion the HiddenFields have the Slider start and end values and these values are used to fetch the filtered Product records based on the price range selected in the ASP.Net AJAX MultiHandleSliderExtender.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindDataList();
}
}
protected void SliderChanged(object sender, EventArgs e)
{
this.BindDataList();
}
private void BindDataList()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
int start = !string.IsNullOrEmpty(Request.Form[hfStart.UniqueID]) ? int.Parse(Request.Form[hfStart.UniqueID]) : 0;
int end = !string.IsNullOrEmpty(Request.Form[hfEnd.UniqueID]) ? int.Parse(Request.Form[hfEnd.UniqueID]) : 0;
lblSliderValue.Text = string.Format("Rs. {0} - Rs. {1}", start, end);
using (SqlConnection con = new SqlConnection(constr))
{
string query = "SELECT * FROM Products WHERE (Price BETWEEN @Start AND @End) OR (@Start = 0 AND @End = 0);";
query += "SELECT MIN(Price) [Min], MAX(Price) [Max] FROM Products";
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.Connection = con;
cmd.Parameters.AddWithValue("@Start", start);
cmd.Parameters.AddWithValue("@End", end);
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
DataSet ds = new DataSet();
sda.Fill(ds);
dlProducts.DataSource = ds.Tables[0];
dlProducts.DataBind();
if (!this.IsPostBack)
{
hfStart.Value = ds.Tables[1].Rows[0]["Min"].ToString();
hfEnd.Value = ds.Tables[1].Rows[0]["Max"].ToString();
lblSliderValue.Text = string.Format("Rs. {0} - Rs. {1}", hfStart.Value, hfEnd.Value);
}
}
}
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs)
If Not Me.IsPostBack Then
Me.BindDataList()
End If
End Sub
Protected Sub SliderChanged(sender As Object, e As EventArgs) Handles Me.Load
Me.BindDataList()
End Sub
Private Sub BindDataList()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim start As Integer = If(Not String.IsNullOrEmpty(Request.Form(hfStart.UniqueID)), Integer.Parse(Request.Form(hfStart.UniqueID)), 0)
Dim [end] As Integer = If(Not String.IsNullOrEmpty(Request.Form(hfEnd.UniqueID)), Integer.Parse(Request.Form(hfEnd.UniqueID)), 0)
lblSliderValue.Text = String.Format("Rs. {0} - Rs. {1}", start, [end])
Using con As New SqlConnection(constr)
Dim query As String = "SELECT * FROM Products WHERE (Price BETWEEN @Start AND @End) OR (@Start = 0 AND @End = 0);"
query &= "SELECT MIN(Price) [Min], MAX(Price) [Max] FROM Products"
Using cmd As New SqlCommand(query)
cmd.Connection = con
cmd.Parameters.AddWithValue("@Start", start)
cmd.Parameters.AddWithValue("@End", [end])
Using sda As New SqlDataAdapter(cmd)
Dim ds As New DataSet()
sda.Fill(ds)
dlProducts.DataSource = ds.Tables(0)
dlProducts.DataBind()
If Not Me.IsPostBack Then
hfStart.Value = ds.Tables(1).Rows(0)("Min").ToString()
hfEnd.Value = ds.Tables(1).Rows(0)("Max").ToString()
lblSliderValue.Text = String.Format("Rs. {0} - Rs. {1}", hfStart.Value, hfEnd.Value)
End If
End Using
End Using
End Using
End Sub
CSS styles
Below are the CSS classes that were used for this article.
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
margin: 0;
padding: 0;
}
.loader
{
height: 50px;
width: 100px;
}
.item
{
width: 202px;
border: 1px solid #ccc;
box-shadow: 2px 2px 8px 2px #ccc;
}
.item .header
{
height: 30px;
background-color: #9F9F9F;
color: #fff;
}
.item .body
{
width: 200px;
height: 200px;
}
.item .image
{
height: 200px;
width: 200px;
}
.item .footer
{
height: 50px;
}
.button, .button:hover
{
height: 45px;
padding: 10px;
color: White;
line-height: 23px;
text-align: center;
font-weight: bold;
cursor: pointer;
border-radius: 4px;
text-decoration: none;
background-color: #9F9F9F;
border: 1px solid #5C5C5C;
}
.modal
{
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
.center
{
z-index: 1000;
margin: 300px auto;
padding: 10px;
width: 130px;
background-color: White;
border-radius: 10px;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
}
.center img
{
height: 128px;
width: 128px;
}
</style>
Screenshot
![ASP.Net AJAX MultiHandleSliderExtender example]()
Demo
Downloads
