Parital Page Validation using validation controls and java script

• Download source files - 31 Kb

Introduction

A common practice in web development is to divide up a page into logical portion like Header, Footer,Left Panel, Right Panel and Content Area. Now In ASP.NET you can divide up your whole page or a logical portion of the page into physical parts in the form of WEB USER CONTROLS that perform specific tasks, like user authentication in one Control or Portion and doing some sort of search in other. Of course every portion is independent of each other and requires some sort of validation before being submitted to server.

ASP.NET provides validation controls that perform basic validation on a page.Whenever a control on the page causes post back and has its Causevalidation property true ASP.net validate all validators of that page.We want to validate different parts of the page independently so our Control or that particular portion of page should validate itself without affecting anything else that might be on the page and also these validator should not be validated against any other component or control that raises a post back on the server.

There are two possible solutions

1) Validating portions of page at client side

2) Validating implicitly through validator controls at server side

Client side validation has its advantage that values will be validated before being submitting to the server and also quick response to user but has disadvantage that user can modify the page validation logic and now is ready to submit invalid values to server that might result in a website crash.Server side validation require a post back but the validation logic is safe enough.

After Reading this article you will be able to

1. Do partial validation of page using client side (Java Script)
2. Do partial validation of page using Server Side (Validator controls)
3. Add Client Side Script for a server control
4. Describe how ASP.NET Engine generate server Control ID's
5. Describe how validation mechanism works
6. Describe how to raise a post Back from JavaScript
7. Conditionally prevent a post back from client side

8. Supporting browsers other than IE for validation

CLIENT SIDE SOLUTION

Client side consist of adding client side validation script for our WEBUSER CONTROL and if validation successes raise a post back for this control from client side so doesn�t affecting other server validation controls ,following statement is doing the same for you.

HOW TO ADD CLIENT SIDE SCRIPT FOR A SERVER CONTROL

serverConrol.Attributes.Add("onmousedown", "Validatethis, 
                            WCtrlLogin_txtLoginName)");

Add method adds an attribute to this server control while generating html for this control.serverControl is the name of control for which you are going to write client side script.onmousedown is the client side event name for whom you write script and second parameter for add method is the function name optionally with parameter that will execute on the particular event.

HOW ASP.Net GENRATE ID FOR A CONTROL ON WEB USER CONTROL

second parameter of validation function is WCtrlLogin_txtLoginName that looks amazing where text before _ WCtrlLogin is the name of web user control and after _ txtLoginName is the name of child control and this is the logic of ASP.net engine to create a unique id for Childs of Webusercontrols.

Now you are ready to write script now you can optional add script to the page by writing Response.write(�All validation script�) or you can add scripting logic in separate file and link that file to your aspx page in my case I have write it in a separate file and just check the passing text box for empty you can implement you complex validation here depending upon the requirement.

HOW TO RAISE AND PREVENT A POST BACK FROM CLIENT SIDE

Here is the function that check for empty value of text box and if something is found what does it do is call its click method cause the post back to occur and in case of empty value it alerts user and post back of this control will be prevented by default

NOTE: Click method is written on server side

function Validate(obj,obj1)
{
    if(obj1.value=="") 
    {
        alert("Please Enter Login Name");
        obj1.focus();
    }
    else
    {
        obj.click();
    }
}

SERVER SIDE SOLUTION

To implement the server side solution you have to do the following steps

Set Enableclientscript property to false for every validator on your controls

Add the following snip of code in the load event of your control.which loops through each of the controls in your User control.

foreach (object item in Controls)
{
   if (item.GetType().IsSubclassOf(typeof(BaseValidator)))
        ((BaseValidator)item).Enabled=false;
}

And, it checks controls type, by checking if it's a subclass of BaseValidator. BaseValidator, is the name of the base validator class from which all validator controls must derive. Set its Enabled property to false.

Step2:

On the button�s click event add the following snip of code:

private void btnSearch_Click(object sender, System.EventArgs e)
{
    bool bCheck=true;

    foreach (object ctrl in Controls)
    {

        if (ctrl.GetType().IsSubclassOf(typeof(BaseValidator)))
        {

            BaseValidator validator=(BaseValidator)ctrl;
            validator.Enabled=true;
            validator.Validate();

            if(!validator.IsValid) 
            {
                bCheck=validator.IsValid;
            }
        }
    }

    if(bCheck)
    {
        this.Label1.Text="doing search now";
    }
    else
    {
        this.Label1.Text="";
    }
}

Now post back will occur without being validating any controls and one the server we are again looping through controls of and finding validation controls in it. Here we will first enable our validation controls and explicitly validating each control if validation is passed we will write the code to do actual search and if fails validation messages will be appear and nothing will be happened.

Conclusion

You can implement partial page validation with combination of client side and server side solution for Rock sold and efficient validation using validator controls and may be one them can be used.