For simplification's sake, I use XML as Data Source in this
tutorial. There are two XML file in the App_Data folder namely CarsList.xml and SliderRange.xml.
The former file contains all the data in the table shown in figure 3. The
latter xml file hold the result set that is shown in figure 4. Create two custom
entity classes named CarsList and Range
to hold the public properties. See listing 1.
Listing 1
public class CarsList
{
public CarsList(){}
public int CarCount { get; set; }
public int YearMonth { get; set; }
public string CarBrand { get; set; }
public string Date { get; set; }
}
public class Range
{
public Range(){}
public string Year { get; set; }
public string Month { get; set; }
public int RowNumber { get; set; }
}Let start by adding a Script Manager on to the page and set
the EnablePageMethods and EnablePartialRendering
properties to true. By setting the EnablePageMethods property to true the
client script can access the static page methods in an ASP.NET page. The
EnablePartialRendering property allows us to specify
only the region of the page to be refreshed. Next, drag a TextBox,
MultiHandleSliderExtender, four HiddenField
and two Label controls on to the page and wrap it inside
an UpdatePanel. Set the TargetControlID
of the MultiHandleSliderExtender control to the ID of
the TextBox control. Add two handles to the control
and set its ControlID to rangeStart
and rangeEnd respectively. See listing 2. The purpose
of the Label controls is to display the selected range
values. The HiddenField controls are used to hold the
handles' values. Initialize the MultiHandleSliderExtender
with the setting shown below.
·
OnClientDrag= Drag, The event raised
when the user drags the handle.
·
OnClientDragEnd = DragEnd, The event
raised when the user stops dragging the handle.
·
Increment = 1, determines the number of
points to increment or decrement the slider values.
·
RaiseChangeOnlyOnMouseUp = true, fires
the change event on the extended TextBox only when the left mouse button is
released.
·
EnableRailClick = false
Listing 2
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"
EnablePartialRendering="true" />
<div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table>
<tr><td colspan="2">
<asp:TextBox ID="txtSlider" runat="server"></asp:TextBox>
<cc1:MultiHandleSliderExtender ID="MultiHandleSliderExtender1" runat="server"
ShowHandleDragStyle="true"
BehaviorID="mhSlider" TargetControlID="txtSlider" Length="500" ShowInnerRail="true"
EnableMouseWheel="false" Increment="1"
RaiseChangeOnlyOnMouseUp="true" EnableRailClick="false"
OnClientDragEnd="DragEnd" OnClientDrag="Drag"
ShowHandleHoverStyle="true" Maximum="222" Minimum="1">
<MultiHandleSliderTargets>
<cc1:MultiHandleSliderTarget ControlID="rangeStart" />
<cc1:MultiHandleSliderTarget ControlID="rangeEnd" />
</MultiHandleSliderTargets>
</cc1:MultiHandleSliderExtender>
<br />
</td></tr>
<tr>
<td><asp:Label ID="lblStartRange" runat="server" Text=""></asp:Label></td>
<td><asp:Label ID="lblEndRange" runat="server" Text=""></asp:Label> </td>
</tr>
<tr><td>
<asp:HiddenField ID="rangeEnd" Value="10" runat="server" />
<asp:HiddenField ID="rangeStart" Value="1" runat="server" />
<asp:HiddenField ID="hdfTrackRangeStart" runat="server" Value="0" />
<asp:HiddenField ID="hdfTrackRangeEnd" runat="server" Value="0" />
</td></tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Shown below is the client-side code. Dragging the handle
will trigger the ASP.NET page method SliderRange to
update the lblStartRange and lblEndRange
value. Once the users release the handle, the DragEnd
function will be executed.
Listing 3
<script type="text/javascript">
var isDragging = false;
function Drag(sender, args) {
GetSliderRange($get("rangeStart").value, $get("rangeEnd").value);
}
function DragEnd(sender, args) {
//prevent postback on slider click
if ($get("hdfTrackRangeStart").value !== $get("rangeStart").value) {
// __doPostBack("btnLoadChart", "");
}
if ($get("hdfTrackRangeEnd").value !== $get("rangeEnd").value &&
$get("hdfTrackRangeEnd").value !== '0') {
// __doPostBack("btnLoadChart", "");
}
}
function GetSliderRange(startV, endV) {
PageMethods.SliderRange(startV, endV, this.callback);
}
function callback(result) {
var arrResult = result.split("--");
$get("lblStartRange").innerHTML = arrResult[0];
$get("lblEndRange").innerHTML = arrResult[1];
}
</script>Create a generic List<T> of Range objects in the code behind and mark it as static so
that is accessible from the client script or other static method. Shown below
are the contents in the Page_Load event. The PopulateSlider() method read the contents in the
SliderRange.xml file and store it in the lstSliderRange.
Initialize the MultiHandleSliderExtender minimum and
maximum value to 1 and biggest RowNumber in lstSliderRange respectively. See listing 4.
Listing 4
protected static List<Range> lstSliderRange = null;
protected void Page_Load(object sender, EventArgs e)
{
Chart1.Click += new ImageMapEventHandler(Chart1_Click);
PopulateSlider();
if (!Page.IsPostBack)
{
//slider min and max value
MultiHandleSliderExtender1.Minimum = 1;
MultiHandleSliderExtender1.Maximum =
int.Parse(lstSliderRange.Max(r => r.RowNumber).ToString());
//hidden field
rangeEnd.Value = MultiHandleSliderExtender1.Maximum.ToString();
rangeStart.Value = MultiHandleSliderExtender1.Minimum.ToString();
PopulateChart(int.Parse(rangeStart.Value), int.Parse(rangeEnd.Value));
}
SetLabel();
}Displayed below is the implementation of PopulateSlider()
method. The lstSliderRange object is cached to
increase performance and its contents are fetched again when the file contents
changes. Depending on how often we update the data source, we can cache it
based on the changes in the database, folder, file or time based expiration.
Read more about ASP.NET Caching technique from here.
Listing 5
//get slider range
void PopulateSlider()
{
//Cache the frequently used data
if (Cache["Cache_lstSliderRange"] == null)
{
XDocument xmlDoc =
XDocument.Load(Server.MapPath(Utilities.Instance.SliderRangeXMLPath));
lstSliderRange = (from c in xmlDoc.Descendants("Range")
select new Range
{
Month = (string)c.Attribute("Month"),
Year = (string)c.Attribute("Year"),
RowNumber = (int)c.Attribute("RowNumber")
}).ToList();
Cache.Insert("Cache_lstSliderRange", lstSliderRange,
new System.Web.Caching.CacheDependency
(Server.MapPath(Utilities.Instance.SliderRangeXMLPath)));
}
else
{
lstSliderRange = Cache["Cache_lstSliderRange"] as List<Range>;
}
}The SetLabel() method display the MultiHandleSliderExtender start and end range values in
the lblStartRange and lblStartEnd
Label controls. The SliderRange
method is decorated with [System.Web.Services.WebMethod] making the method
accessible from client-side JavaScript. The GetSliderText method accept two parameters, the first
parameter refer to the row number and the second parameter refers to the left
or right handle. For instance, calling SliderRange(2, 10)
will yield "From Year: 2005 Month:02--To Year: 2005 Month:10". First,
it will query the lstSliderRange object and retrieve
the Year and Month from the result set. If the pos==s, set
the text to From and To if pos==e. See listing 6.
Listing 6
//set the slider start and end label
void SetLabel()
{
string[] arrLabel = SliderRange(rangeStart.Value, rangeEnd.Value)
.Split("--".ToCharArray());
lblStartRange.Text = arrLabel[0];
lblEndRange.Text = arrLabel[2];
}
[System.Web.Services.WebMethod]
public static string SliderRange(string start, string end)
{
if (lstSliderRange != null)
{
return GetSliderText(start, "s") + "--" + GetSliderText(end, "e");
}
else
{
return "";
}
}
protected static string GetSliderText(string rn, string pos)
{
string strRangeText = string.Empty;
IEnumerable<Range> rangeText;
rangeText = lstSliderRange.Where(r => r.RowNumber == int.Parse(rn))
.Select(r => new Range
{
Year = r.Year,
Month = r.Month
});
if (pos == "s")
{
strRangeText = "<b>From</b> Year: " + rangeText.First().Year + " Month: "
+ rangeText.First().Month;
return strRangeText;
}
else
{
strRangeText = "<b>To</b> Year: " + rangeText.First().Year + " Month: "
+ rangeText.First().Month;
return strRangeText;
}
}At this point, you should see something like below on the
browser.
Figure 5
