Showing Validation ErrorMessages in Modal Popup

• Download source - 748.33 KB

Introduction

Hi guys! Here I have tried a sample project of showing the validation error messages of a page in a Modal Popup. The modal popup stays in the Master Page whenever the content page requires to validate the page and show the error messages if there are any... they can accomplish this by calling a method of the master page.

I have used Ajax Control Toolkit version 3.0 for this sample.

Bits of Code

I have created a sample page that consists of few Text Boxes and ASP.NET Validators hooked into it. Every validator control has a property called ValidationGroup. This property is used to group a set of validations to happen at a particular action and to be shown at a common place.

<asp:TextBox ID="txtName" runat="server" Width="200px"></asp:TextBox>

<asp:RequiredFieldValidator ID="reqValName" runat="server" 
	ErrorMessage="Name is required."
ControlToValidate="txtName" Display="None" ValidationGroup="valGroup" 
	EnableClientScript="false"></asp:RequiredFieldValidator>        

The above code snippet shows a Required Field Validator that checks a name is required in the textbox. A couple of properties to note down are the ValidationGroup and EnableClientScript. The EnableClientScript property is set to false to make the validation happen only at the server side, not at the client. For all the validators, the ValidationGroup property is set to a common value "valGroup".

Here we are showing the validation error messages in summary so we have to set the Display="None" for all the validators.

Let's see the Master Page. It consists of a ValidationSummary control inside a panel that acts as the popup as shown below:

<asp:Panel ID="errorsPanel" runat="server" Style="display: none; border-style: solid;
border-width: thin; border-color: #FFDBCA" Width="175px" BackColor="White">

<div style="text-align: left">

        <asp:ValidationSummary ID="valSummary" runat="server" 
	DisplayMode="BulletList" ShowSummary="true"
        ValidationGroup="valGroup" />

<div style="text-align: right">
       <asp:Button ID="okBtn" runat="server" Text="Ok" /></div>

</div>
</asp:Panel>

The important properties of ValidationSummary control are the ValidationGroup that has to be the same value that we have set for the validators, and the DisplayMode is set to displays all the error messages as a BulletList. The panel also has an Ok button for closing the error popup.

The next important control to note down is the ModalPopupControlExtender.

<Ajax:ModalPopupExtender ID="modalPopupEx" runat="server" PopupControlID="errorsPanel"
TargetControlID="invisibleTarget" CancelControlID="okBtn" 
	BackgroundCssClass="modalBackground">
</Ajax:ModalPopupExtender>

The important properties of this control are PopupControlID, TargetControlID, CancelControlID and BackgroundCssClass.

• PopupControlID - The control usually the panel that has to be popped up
• TargetControlID - The control that fires the popup
• CancelControlID - The control in the popup that closes it
• BackgroundCssClass - The CSS of the background

Here the popup is shown programmatically so the TargetControlID is set to an invisible label.

<asp:Label ID="invisibleTarget" runat="server" Style="display: none" />

The panel and the modulpopup extender are wrapped inside an update panel.

<asp:UpdatePanel ID="update" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Panel ID="errorsPanel" runat="server" 
		Style="display: none; border-style: solid;
border-width: thin; border-color: #FFDBCA" Width="175px" BackColor="White">

    <div style="text-align: left">
        <asp:ValidationSummary ID="valSummary" runat="server" 
		DisplayMode="BulletList" ShowSummary="true"
        ValidationGroup="valGroup" />

    <div style="text-align: right">
        <asp:Button ID="okBtn" runat="server" Text="Ok" /></div>

    </div>
    </asp:Panel>

<asp:Label ID="invisibleTarget" runat="server" Style="display: none" />

<Ajax:ModalPopupExtender ID="modalPopupEx" runat="server" 
	PopupControlID="errorsPanel"
TargetControlID="invisibleTarget" CancelControlID="okBtn" 
	BackgroundCssClass="modalBackground">
</Ajax:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>

Now let's have a look at the public method that opens the popup on errors.

public bool CheckErrors()
{
    Page.Validate(valSummary.ValidationGroup);
    if (!Page.IsValid)
    {
        update.Update();
        modalPopupEx.Show();
        return false;
    }
    return true;
}

Validate() is an overloaded method of the page that takes the ValidationGroup string as the input parameter and validates all the validators that have been set to that ValidationGroup.

Now in the content page on click of a save button we call the method like below:

protected MasterPage PageMaster
{
    get
    {
        return this.Master as MasterPage;
    }
}

protected void btnSave_Click(object sender, EventArgs e)
{
    if (PageMaster.CheckErrors())
    {
        //Save..
    }
}

Points of Interest

1. The important thing to note down is that here, the validation is happening on the server side. So if you don't set the EnableClientScript property of validators to false, the validation happens at the client-side avoiding the popup from showing off.
2. The ValidationGroup of the validators and the ValidationSummary should have the same value. Even you can have a public property in the Master Page to set the ValidationGroup of the ValidationSummary from the content page as shown below:

   public String ValidationGroup
   {
   	set
   	{ valSummary.ValidationGroup = value; }
   }

3. The Error panel and the modal popup extender are wrapped inside an update panel. This is because if the content page has update panels and the button that calls the master page method is also inside the update panel, that makes the error messages not to be shown in the popup.

That's all the coding. Please free to post your comments and suggestions.

History

• 5^th March, 2010: Initial post