skip to the main content area of this page
Patterns and Practices

ServerSideValidationExtender - ASP.NET Server-Side Validation via AJAX Partial Page PostBack


The ServerSideValidationExtender in the Validation Guidance Bundle provides a richer user experience for the PropertyProxyValidator in the Validation Appplication Block by doing Server-Side Validation via AJAX using a Partial-Page Postback.

It not only improves the ASP.NET user experience when needing server-side validation on your web pages, but it also is very, very simple to use.

Shown below is a simple ASP.NET web page that allows one to add a contact to a web application. The validation of the name, phone number, and email address are validated using PropertyProxyValidator Controls in the Validation Application Block in Enterprise Library 3.1.

 

ServerSideValidationExtender

 

The PropertyProxyValidators get their validation rules from a Contact Business Object in the Business Logic Layer, which contains validator attributes such as NotNullValidator, StringLengthValidator, and RegexValidator to validate the properties on the Contact Business Object:

 

public class Contact

{

    private string _name;

    private string _phoneNumber;

    private string _emailAddress;

 

    [NotNullValidator(MessageTemplate = "Required. ")]

    [StringLengthValidator(1, 5,

        MessageTemplate = "Name must be between {3} - {5} chars.")]

    public string Name

    {

        get { return _name; }

        set { _name = value; }

    }

 

    [RegexValidator(@"((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}",

        MessageTemplate="Invalid Phone Number.")]

    [NotNullValidator(MessageTemplate = "Required. ")]

    public string PhoneNumber

    {

        get { return _phoneNumber; }

        set { _phoneNumber = value; }

    }

 

    [RegexValidator(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*",

        MessageTemplate = "Invalid EmailAddress.")]

    [NotNullValidator(MessageTemplate = "Required. ")]

    public string EmailAddress

    {

        get { return _emailAddress; }

        set { _emailAddress = value; }

    }

}

 

The new control that has been added to the mix to improve user experience and more real-time validation of the TextBoxes is the ServerSideValidationExtender Control found in the Validation Guidance Bundle that is a part of the Web Client Software Factory v2.0.

The PropertyProxyValidator requires a post back to the web server to do validation server-side, but we are able to do this partial-page postback in the background using the ServerSideValidationExtender. A ServerSideValidationExtender is added for each PropertyProxyValidator and its TargetControlID is set to the ID of an appropriate PropertyProxyValidator:

 

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
    <h1>Add Contact</h1><p>&nbsp;</p>
    <p>
        Name:<br />
        <asp:TextBox ID="txtName" runat="server" Width="320px" />
        <cc1:PropertyProxyValidator
            ID="NameValidator"
            ControlToValidate="txtName"
            SourceTypeName="SampleApp.BLL.Contact"
            PropertyName="Name"
            SpecificationSource="Attributes"
            DisplayMode="SingleParagraph"
            OnValueConvert="NameValidator_ValueConvert" 
            runat="server" >
        </cc1:PropertyProxyValidator>
        <cc2:ServerSideValidationExtender
            ID="ServerSideValidationExtender1" 
            TargetControlID="NameValidator"
            ValidateEmptyText="true"
            runat="server">
        </cc2:ServerSideValidationExtender> 
    </p>
    <p>
        Phone Number:<br />
        <asp:TextBox ID="txtPhone" runat="server" Width="320px" />
        <cc1:PropertyProxyValidator
            ID="PhoneValidator"
            ControlToValidate="txtPhone"
            SourceTypeName="SampleApp.BLL.Contact"
            PropertyName="Phone"
            SpecificationSource="Attributes"
            DisplayMode="SingleParagraph"
            OnValueConvert="PhoneValidator_ValueConvert" 
            runat="server" >
        </cc1:PropertyProxyValidator>
        <cc2:ServerSideValidationExtender
            ID="ServerSideValidationExtender2" 
            TargetControlID="PhoneValidator"
            ValidateEmptyText="true"
            runat="server">
        </cc2:ServerSideValidationExtender>
    </p>
    <p>
        Email Address:<br />
        <asp:TextBox ID="txtEmail" runat="server" Width="320px" />
        <cc1:PropertyProxyValidator
            ID="EmailValidator"
            ControlToValidate="txtEmail"
            SourceTypeName="SampleApp.BLL.Contact"
            PropertyName="Email"
            SpecificationSource="Attributes"
            DisplayMode="SingleParagraph"
            OnValueConvert="EmailValidator_ValueConvert" 
            runat="server" >
        </cc1:PropertyProxyValidator>
        <cc2:ServerSideValidationExtender
            ID="ServerSideValidationExtender3" 
            TargetControlID="EmailValidator"
            ValidateEmptyText="true"
            runat="server">
        </cc2:ServerSideValidationExtender>
    </p>
        <p>&nbsp;</p>
    <p>
        <asp:Button ID="btnSubmit" runat="server" Text="Add" /></p>
</div>
</form>

 

The end result is that after a user enters a value in the texbox and tabs away from the TextBox, the ServerSideValidationExtender does a Partial-Page PostBack to the web server and checks if the value entered is valid based on validation rules on the business object without requiring the Add Button to be pressed and the entire page to be submitted back to the server. If the value entered is not valid, broken validation rule error messages are displayed immediately.

For those using the PropertProxyValidator Controls in the Enterprise Library 3.1 Validation Application Block, the new ServerSideValidationExtender Control in the Validation Guidance Bundle is fantastic.


Tags: AJAX, GuidanceBundles, PropertyProxyValidator, ServerSideValidationExtender, ValidationApplicationBlock, ValidationGuidanceBundle


Topics



Popular Tags



Recent Links