Click here to Skip to main content
Click here to Skip to main content
Go to top

CustomValidator with XMLHttpRequest object

, 8 Feb 2004
Rate this:
Please Sign up or sign in to vote.
CustomValidator which uses XMLHTTpRequest to make validation.

Introduction

ASP.NET supplies a few validator controls to ensure that user input data will match application needs. Most of them check if control data is not empty or entered data matches specific data type etc. In real world ASP.NET applications, we very often need to check inserted value against database. ASP.NET supplies a CustomValidator which can be useful for this task. CustomValidator uses server-side events where programmer may write code to check whatever or not control value meets business rules. Of course, this kind of validation needs submit. In this article, I will provide an alternate way to solve this problem.

Background

Since the beginning of my career as a web programmer, I wondered if there is any way to get data from web server to HTML page which is open on client machine. This problem is solved in many ways including the use of IFRAME or XML. For me, it was very useful to read this great article: Client Side Validation Using the XMLHTTPRequest Object By Jonathan Zufi, to understand how this things work and how I can use XMLHTTPRequest in ASP.NET server control.

Using the code

In a few sentences, I'll explain how my validator works: I inherit my validator from CustomValidator. CustomValidator has ClientValidateFunction property which may be useful when developers want to validate on client. I insert my function which makes XMLHTTPRequest to SAME PAGE with a few parameters in QueryString. I override onLoad() event. Inside it, I check by QueryString parameters if I should raise custom event (called ClientValidate).

using System;
using System.Data; 
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.IO;
using System.Web;
using System.Design;
using System.Drawing.Design;
using System.Collections.Specialized;  

namespace Gilat
{
    /// <summary>
    /// GilatValidator makes XMLHTTPRequest
    /// to server to validate without full page refresh
    /// </summary>
    [DefaultProperty("Text"), ToolboxData("<{0}:GilatValidator 
    runat="server"></{0}:GilatValidator>")]
    public class GilatValidator : System.Web.UI.WebControls.CustomValidator
    {
        //function makes XMLHTTPRequest
        const string XMLHTTPRequestScript = @"
        <script language="'javascript'">

            //GilatControlsUtils.RegisterXMLHTTPRequestScript
            function doXMLHTTPRequest(Url)
            {
                var oXMLHTTP = new ActiveXObject(""Microsoft.XMLHTTP"");
    
                oXMLHTTP.open(""POST"", Url, false);

                try
                {
                    oXMLHTTP.send();
                    return oXMLHTTP.responseText;
                }    
                catch(e) 
                {
                    alert(""XMLHTTPRequest failed"");
                    return """";
                }

            }
        </script>";

        string GilatValidatorClientScript = @"
        <script language="'javascript'">
        
        function {0}Validate(source, arguments)
        {{
            var sURL = ""{1}__serverSideRequest=true&__source="" + source.id;

            //add ControlToValidate
            if(source.controltovalidate != undefined)
            {{
                sURL += ""&ControlToValidateValue="" + 
                  document.all(source.controltovalidate).value;                
            }}
        
            var ControlsToValidate = source.ControlsToValidate;
            if(ControlsToValidate != undefined)
            {{
                var arrControlsToValidate = ControlsToValidate.split("";"");
                for(var i=0; i<arrControlsToValidate.length; i++)
                {{
                    var Control = document.all(arrControlsToValidate[i]);
                    if(Control) 
                    {{
                        sURL += ""&"" + Control.id + ""="" + Control.value;
                    }}    
                }} 
            }}

            arguments.IsValid = (doXMLHTTPRequest(sURL) == ""true"");
        }}
        </script>";

        //variable keeps delimited by ';' string of Control ID's
        private string _ControlsToValidate;

        public string ControlsToValidate
        {
            get
            {
                return _ControlsToValidate;
            }
            set
            {
                _ControlsToValidate = value;
            }
        }

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender (e);
            //add ControlsToValidate as attribute
            //so it will be available at client
            if(ControlsToValidate != string.Empty) 
                this.Attributes.Add("ControlsToValidate", ControlsToValidate);   
            this.ClientValidationFunction = this.ID + "Validate";
            //use existed QueryString collection
            string Url = Page.Request.Url.ToString();
            if(Page.Request.QueryString.ToString() != string.Empty)
                Url += "&";
            else
                Url += "?";
            Page.RegisterClientScriptBlock("GilatValidatorScript", 
               string.Format(GilatValidatorClientScript, ID, Url));  
            if(!Page.IsClientScriptBlockRegistered("XMLHTTPRequestScript"))
            {
                Page.RegisterClientScriptBlock("XMLHTTPRequestScript", 
                                                   XMLHTTPRequestScript);
            }    
        }

        public event 
          System.Web.UI.WebControls.ServerValidateEventHandler ClientValidate;

        /// <summary>
        /// overrides base event
        /// </summary>
        /// <PARAM name="e"></PARAM>
        protected override void OnLoad(EventArgs e)
        {
          base.OnLoad(e);
          //if this page called from client side validation
          //raise new event
          HttpRequest Request = this.Page.Request;

          if(Request.QueryString["__serverSideRequest"] == "true" && 
                Request.QueryString["__source"] == this.ID)
          {
            Page.Response.Clear();   
            ServerValidateEventArgs ServerValidateE = new 
              ServerValidateEventArgs(Request.QueryString["ControlToValidateValue"], 
              false);
            OnCallbackValidation(ServerValidateE); 
            if(ServerValidateE.IsValid)
                Page.Response.Write("true");   
            Page.Response.End(); 
          }
        }

        protected virtual void OnCallbackValidation(ServerValidateEventArgs e) 
        {     
            if (ClientValidate != null) 
            {
                ClientValidate(this, e);
            }  
        }

    }

}

Points of Interest

A few important issues:

  1. Events order: ClientValidation event happens after PageLoad event.
  2. Inside ClientValidation event, you can't use control values, because I do not pass ViewState.
  3. Property ControlsToValidate is the only way to pass control values to server.
  4. ControlsToValidate includes any Control ID delimited by ";".

Inside ClientValidate event, you may access these values like:

string MyComboValue = Request.QueryString[MyCombo.ID];

You can still use args.Value (if you use ControlToValidate) and args.IsValid like in normal ServerValidate event. See it in the attached sample project. Of course, validator will work only on browsers with XMLHTTPRequest installed. Another thing: if you're having an exception inside the ClientValidation event, you can't see it on page. But you may enable Application trace and then check it from there.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Anatoly Rapoport
Web Developer
Israel Israel
I work in MIS department of Gilat Satellite company in Israel.

Comments and Discussions

 
QuestionDoes it work with .NET 2.0? Pinmembertruongpham27-Aug-09 0:10 
GeneralCross-browser XmlHttpRequest PinsussRicardo Stuven10-Dec-04 8:33 
GeneralRe: Cross-browser XmlHttpRequest PinsussRicardo Stuven10-Dec-04 10:11 
GeneralRe: Cross-browser XmlHttpRequest PinmemberAnatoly Rapoport11-Dec-04 22:43 
GeneralRe: Cross-browser XmlHttpRequest PinmemberYazeed hs13-Dec-05 1:08 
GeneralDoesn't need submit PinmemberMark Focas9-Feb-04 11:32 
GeneralRe: Doesn't need submit PinsussAnatoly Rapoport9-Feb-04 20:02 
GeneralRe: Doesn't need submit Pinmemberdavidtjudd19-Feb-04 17:33 
combined with JSRS you would be able to create a cross platform/cross browser solution. the key here is to keep the amount of excess data on the transfer to a minimum.
GeneralRe: Doesn't need submit PinmemberPaul Russo20-Jun-06 6:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140922.1 | Last Updated 9 Feb 2004
Article Copyright 2004 by Anatoly Rapoport
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid