In this
Example we will Crate MultiHandlerSlider in our Webpage so we can Set Range in
where we ant to set. Here we will Bind Data from Database and Create Datalist
for every Product and Set Range for Product using Slider. Using UpdatePanel we
will Update Product list in DataList Control.
Create Table:-
CREATE TABLE [dbo].[Products](
[Name] [varchar](50) NOT NULL,
[ProductId] [bigint] IDENTITY(1,1) NOT NULL,
[Price] [bigint] NULL,
CONSTRAINT
[PK_Products] PRIMARY KEY
CLUSTERED
(
[ProductId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS
= ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
Default.aspx:-
<div>
<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>
</div>
Style:-
Here I Have used some styles for Datalist controls to see data in webpage.
Here I Have used some styles for Datalist controls to see data in webpage.
<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>
Default.aspx.cs:-
Now Go to Code behind and Bind DataList and Set Range for Getting data and Create Query for Getting data from Sql Server.
Now Go to Code behind and Bind DataList and Set Range for Getting data and Create Query for Getting data from Sql Server.
private void
BindDataList()
{
string
constr = ConfigurationManager.ConnectionStrings["DBCS"].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);
}
}
}
}
}
Now Call Bind Method in your Page Load so when Page load first time then We
have to bind Datalist and want to show our products in Webpage.
protected void Page_Load(object
sender, EventArgs e)
{
if
(!this.IsPostBack)
{
this.BindDataList();
}
}
Now Create SliderChanged event So when we changed Slider Range then we have to
Bind Datalist from Sql Server and Get only that data.
protected void SliderChanged(object
sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000); //Added
for testing and hence remove.
this.BindDataList();
}
Now run your Web Application in your Browser and Check by Changing Slider
range.
Thanks for comments.....