StaticGround

Let's say that we have the following simple page with one embedded server control (button) on the aspx page the following is the order of events that happen when the page is initially displayed:

1. The child controls' OnInit event is fired
2. The page OnInit event is fired
3. The Page's TrackViewState() is executed
4. The Page's OnLoad (Page_Load) event is fired
5. The child controls' OnLoad (Page_Load) event is fired
6. The Page's OnPreRender event is fired
7. The Page's SaveViewState() is run
8. The Page's SaveViewState() is run

If we have a click event defined for the button, called btn1_click, and inside this click event it executes a callback function called Page_Proceed on the page via postback, the order is:

1. The child controls' OnInit event is fired
2. The page OnInit event is fired
3. The Page's TrackViewState() is executed
4. The Page's OnLoad (Page_Load) event is fired
5. The child controls' OnLoad (Page_Load) event is fired
6. The Page's RaisePostBackEvent is fired
7. The child controls' btn1_Click event is fired
8. The Page's Page_Proceed() method is executed
9. The Page's OnPreRender event is fired
10. The Page's SaveViewState() is run
11. The Page's SaveViewState() is run

A few new events are added to the sequence: RaisePostBackEvent, btn1_Click, and the Page_Proceed event. The RaisePostBackEvent is used to trigger a server side event. The RaisePostBackEvent is defined as:

protected override void RaisePostBackEvent(IPostBackEventHandler sourceControl, string eventArgument)

RaisePostBackEvent takes two arguments: the IPostBackEventHandler derived control that is raising the event and a string argument. The RaisePostBackEvent will determine which function in the codebehind of the control to execute. If a textbox and a RangeValidator control are placed on the page, the following order is observerd (if the validation was successful):

1. The child controls' OnInit event is fired
2. The page OnInit event is fired
3. The Page's TrackViewState() is executed
4. The Page's OnLoad (Page_Load) event is fired
5. The child controls' OnLoad (Page_Load) event is fired
6. The Page's RaisePostBackEvent is fired
7. The Page's Validate() is fired
8. The child controls' btn1_Click event is fired
9. The Page's Page_Proceed() method is executed
10. The Page's RaisePostBackEvent finishes
11. The Page's OnPreRender event is fired
12. The Page's SaveViewState() is run
13. The Page's SaveViewState() is run

If the validation was not successful, no postback is processed, as all of the validation occurs on the client. One thing to note is that the fired event plus the Validate() methods are executed within the context of the RaisePostBackEvent. Usually a page processes only one event, so the RaisePostBackEvent waits until the fired event and its Validate() function to run before exiting. If the Validate() method of the Page fails, the fired event does not run. If we take a view of the source for the page in the browser, we see:

This basically calls the javascript function Page_ClientValidate(), which is located in /aspnet_client/system_web/1_1_4322/WebUIValidation.js:

  function Page_ClientValidate()

  {

   var i;

   for (i = 0; i < Page_Validators.length; i++) {

   ValidatorValidate(Page_Validators[i]);

   }

   ValidatorUpdateIsValid();

   ValidationSummaryOnSubmit();

   Page_BlockSubmit = !Page_IsValid;

   return Page_IsValid;

  }

This function iterates over each validator and calls the ValidatorValidate() function for each validator. Depending on the type of validator (RequiredField, RequiredRange, RegularExpression, etc.) a corresponding function exists in WebUIValidation.js:

* CompareValidatorEvaluateIsValid
* CustomValidatorEvaluateIsValid
* RegularExpressionValidatorEvaluateIsValid
* RequiredFieldValidatorEvaluateIsValid
* RangeValidatorEvaluateIsValid

The ValidatorValidate() uses the evaluationfunction property of each validator to execute one of the functions above:

 function ValidatorValidate(val)

 {

  val.isvalid = true;

  if (val.enabled != false) {

  if (typeof(val.evaluationfunction) == "function") {

  val.isvalid = val.evaluationfunction(val);

  }

  }

  ValidatorUpdateDisplay(val);

 }

Once evaluationfunction has run the isvalid field on each validator has been set. The ValidatorUpdateDisplay() function then runs. This function will then display the item within the span tag that is associated with the validator:

  !

The ValidatorUpdateDisplay() will toggle whether the item within the 'span' tag is set to the 'hidden' or 'visible' state.

 function ValidatorUpdateDisplay(val)

 {

  if (typeof(val.display) == "string") {

  if (val.display == "None") {

  return;

  }

  if (val.display == "Dynamic") {

  val.style.display = val.isvalid ? "none" : "inline";

  return;

  }

  }

  val.style.visibility = val.isvalid ? "hidden" : "visible";

 }

If the validation succeeds, the item within the span tag remains hidden, otherwise it is visible.