Click here to Skip to main content
15,867,308 members
Articles / Web Development / ASP.NET

Showing Validation ErrorMessages in Modal Popup

Rate me:
Please Sign up or sign in to vote.
3.40/5 (5 votes)
4 Mar 2010CPOL3 min read 92.7K   3.1K   12   5
The validation error messages of each content page is shown in the common modal popup of master page

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.NET
<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.NET
<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.

ASP.NET
<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.NET
<asp:Label ID="invisibleTarget" runat="server" Style="display: none" />

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

ASP.NET
<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.

C#
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:

C#
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:
    C#
    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

  • 5th March, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Trigent Software Private Limited
India India
I'm a software developer from south tip of India. I spent most of the time in learning new technologies. I've a keen interest in client-side technologies especially JavaScript and admire it is the most beautiful language ever seen.

I like sharing my knowledge and written some non-popular articles. I believe in quality and standards but blames myself for lagging them.

I believe in small things and they makes me happy!

Comments and Discussions

 
QuestionHelp writing code in VB Pin
Member 830945811-Oct-11 10:52
Member 830945811-Oct-11 10:52 
AnswerRe: Help writing code in VB Pin
thatraja26-Jan-12 20:18
professionalthatraja26-Jan-12 20:18 
Member 8309458 wrote:
Hi! I'm fairly new to writing in VB. Would you be able to help me with converting the code to VB from CheckErrors() and below? Thanks!

Check this .NET Code Conversion[^]
thatraja

FREE Code Conversion VB6 ASP VB.NET C# ASP.NET C++ JAVA PHP DELPHI | Nobody remains a virgin, Life screws everyone Sigh | :sigh:

Generalremove duplicate errormessages Pin
darkdusky12-Apr-11 5:29
darkdusky12-Apr-11 5:29 
GeneralRe: remove duplicate errormessages Pin
After205014-Apr-11 0:49
After205014-Apr-11 0:49 
GeneralRe: remove duplicate errormessages Pin
darkdusky14-Apr-11 1:27
darkdusky14-Apr-11 1:27 

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

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