• Download source - 19.8 KB

Introduction

ASP.NET has introduced a new property for the TextBox called TextMode="Range". Even though we use the TextBox, ASP.NET provides tremendous look and feel like track bar. This tip is going to explain how to display selected value on ASP.NET page without any postback or Ajax.

Background

As explained a little in the introduction, Textbox's TextMode property has many values. Out of them there is one value which I am going to explain - Range. We are going to make use of this property for real time scenarios.

Code Walkthrough

• Simply create a New project and add an ASPX page.
• After this, drag and drop the TextBox control from the toolbar.
• Modify the TextMode property to "Range".
• Run the project.

The interesting thing was that TextBox was converted to like TrackBar shown below:

When I tried to select some value, the selected value appeared to be on ToolTip field. (See the below image.)

But this was only when your mouse is used to change value otherwise it was simply blank. Then I realized that the missing part is the display the current value which is selected by this control. To get the selected value and display on the page something like below, we have two options (Both are explained below).

1. In order to display selected value, we can have another label and at the server side TextChanged event sets the label to selected value. This requires the server side code execution which is time consuming and overhead as an extra web request by browser to server.
2. Another option would be on client side. To achieve the display, I have created a sample application which uses JavaScript to display selected value. By this means, all display is handled by the client browser and there is no server post needed. You can easily change the display style if you want to make it consistent, even you can place the display anywhere as per your requirement.

Now modify the added web page with “TextMode=Range”.

<asp:TextBox ID="TextBox1" 
runat="server" TextMode="Range" />

Then, I added a JavaScript event “OnClick” to this textbox so handle the client side click. Next I added another control to display the selected value. You can use any other control.

<input id="Text1" type="text" 
readonly="true"/>

After the UI work, I wrote the JavaScript code block and some methods. One of them was hooked to OnClick event of TextBox. Something like below:

<script type="text/javascript">
        function onValueChanged() {
            document.getElementById("Text1").value = 
            		document.getElementById("TextBox1").value;
        }

        function onLoad() {
            document.getElementById("Text1").value = 
            		document.getElementById("TextBox1").value;
        }
        window.onload = onLoad;

</script>

Note:

getElementById method in JavaScript identifies the control by the Id of assigned to control. If you are using Master pages, then this may not be a valid Id and you may get an error at JavaScript. Find the proper Id of control using any debugging tool and assign it.

After this, I just added the OnClick event handler for the TextBox.

<asp:TextBox ID="TextBox1" runat="server" OnClick="onValueChanged();" TextMode="Range" /> 

That’s it. All done!!!

Download the code from the link at the top of this tip.

Run your application to view the effect.