RangeValidator Control With AJAX Using ASP.NET

Davin Martyn
12y
25.2k
0
0

Article

Introduction : Ajax (Asynchronous JavaScript and XML) is a new web development technique used for interactive websites. With AJAX help we can develop web applications and retrieve small amounts of data from the web server. AJAX consists of a different type of technology.

JavaScript.
XML.
Asynchronous Call to the server.

RangeValidator Control

The RangeValidator control is used to ensure that the user has entered an input value that is between two values. It is possible to check ranges within numbers, dates, and characters. The RangeValidator control allows you to check whether a user's entry is between a specified upper and lower boundary. You can check ranges within pairs of numbers, alphabetic characters, and dates. Boundaries are expressed as constants. The RangeValidator is used to validate if the given data is in the specified range or not.

Property

ControlToValidate
EnableClientScript
ErrorMessage
IsValid
Enabled

Step 1 : Open Visual Studio 2010.

Go to File->New->WebSite.
Select ASP.NET WebSite.

Step 2 : Go to Solution Explorer and right-click.

Select Add->New Item.
Select WebForm.
Default.aspx page open

Step 3 : Open Default.aspx page and click in [Design option] and drag ScriptManager, TextBox, Button control from Toolbox.

Step 4 : The ASP.NET Ajax toolkit has a CalendarExtender control which is very cool as you can associate the CalendarExtender to a TextBox and also to a Button. Drag the CalendarExtender Control from the AjaxControlToolkit so that you can popup the Calendar.

Step 5 : Now add a Textbox, Button Deafult.aspx page and define all the properties in the CalenderExtenderControl.

Code

<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1" PopupButtonID="Button1" Format="dd/MM/yyyy" OnClientDateSelectionChanged="checkData()">
</asp:CalendarExtender>

Step 6 : Now run the application by pressing F5 and click on the Textbox; the following popup will show.

my cal.gif
Step 7 : Now go to the Default.aspx[Design] option and drag the RangeValidator control from the Toolbox. The RangeValidators can be used to check whether the date is within a given range (minimum & maximum). The following is the code for the RangeValidator:

Code

<asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="TextBox1" MaximumValue='09/20/2011' MinimumValue="09/01/2011" ErrorMessage="Date should be between 09/01/2011 and 09/20/2011" Type="Date" Display="Dynamic" />

Define JavaScript

Step 8 : The CalendarExtender has a property called OnClientDateSelectionChanged which can be set to a piece of JavaScript code.

Code
<script type="text/javascript">
function checkDate(sender,args)
{
    var dt = new Date();
    if(sender._selectedDate > dt)
    {
        sender._textbox
       .set_Value(dt.format(sender._format));
    }
}
</script>

Step 9 : Now go to the Default.aspx[Source] option and write the code:

Code

<title></title>
<style type="text/css">
    .watermarked
    {
    color: Green;
    </style>
    <script type="text/javascript">
function checkDate(sender,args)
{
    var dt = new Date();
    if(sender._selectedDate > dt)
    {
        sender ._textbox
       .set_Value(dt.format(sender._format));
    }
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div style="background-color: #CAB7C7">
       Define Date <asp:TextBox ID="TextBox1" runat="server" Width ="150"></asp:TextBox>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1" PopupButtonID="Button1" Format="dd/MM/yyyy" OnClientDateSelectionChanged="checkData()">
        </asp:CalendarExtender>
         <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="TextBox1" MaximumValue='09/20/2011' MinimumValue="09/01/2011" ErrorMessage="Date should be between 09/01/2011 and 09/20/2011" Type="Date" Display="Dynamic" />
    </div>
    </form>

Step 10 : Now go to the Default.aspx.cs option and write the code:

Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        RangeValidator1.MinimumValue = new DateTime(1600, 01, 01).ToString("dd/MM/yyyy");
        RangeValidator1.MaximumValue = DateTime.Now.ToString("dd/MM/yyyy");
    }
}

Step 11 : Now run the application by pressing F5.