Diary of a .NET Developer

December 25, 2011

ASP.NET AJAX ModalPopupExtender – Working with Validators

Filed under: AJAX, ASP.NET — Tags: , — ip3lee @ 11:38 am

Extending further from our previous example with the ASP.NET AJAX ModalPopupExtender, the lightbox may contain data input fields that require input validation.

When using validators with an ASP.NET AJAX ModalPopupExtender, there is one very important thing to keep in mind and that is the use of a ValidationGroup. The ValidationGroup ensures that only actions performed within lightbox only trigger the validators that are related to it and also ensures that they only fire when the relevant action is initiated.

See the source code below for an example of how the ValidationGroup is applied with the use of a RequiredFieldValidator:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ModalPopupExtendarWithPostback._Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .modalBackground
        {
            background-color: #CCCCFF;
            filter: alpha(opacity=40);
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div>
        <asp:Button ID="Button1" runat="server" Text="Popup" OnClick="Button1_Click"></asp:Button>
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
            BackgroundCssClass="modalBackground" PopupControlID="Panel1">
        </asp:ModalPopupExtender>
        <asp:Panel ID="Panel1" runat="server">
            <fieldset>
                <legend>Popup</legend>
                <asp:UpdatePanel ID="UpdatePanel1" runat="Server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" ValidationGroup="Popup"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator"
                            ControlToValidate="TextBox1" Display="Dynamic" SetFocusOnError="true" ValidationGroup="Popup"></asp:RequiredFieldValidator>
                        <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                            <asp:ListItem Text="1" Value="1"></asp:ListItem>
                            <asp:ListItem Text="2" Value="2"></asp:ListItem>
                            <asp:ListItem Text="3" Value="3"></asp:ListItem>
                            <asp:ListItem Text="4" Value="4"></asp:ListItem>
                            <asp:ListItem Text="5" Value="5"></asp:ListItem>
                        </asp:DropDownList>
                        <asp:Label ID="Label1" runat="server"></asp:Label>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
                    </Triggers>
                </asp:UpdatePanel>
                <asp:Button ID="Button3" runat="server" Text="Save" OnClick="Button3_Click" ValidationGroup="Popup" />
                <asp:Button ID="Button2" runat="server" Text="Close" OnClick="Button2_Click" />
            </fieldset>
        </asp:Panel>
    </div>
    </form>
</body>
</html>
About these ads

7 Comments »

  1. This is by far the best validation in an ajax Modalpopup extender published in internet.
    THANKS A LOT

    Comment by Dave — June 18, 2013 @ 7:11 am

    • Glad it helped. Definitely not a lot of information on this readily available on the Internet.

      Comment by ip3lee — June 19, 2013 @ 9:32 pm

  2. Thank you. Simple and easy to use.

    Comment by Greg Davis — August 16, 2013 @ 8:18 am

  3. really nice sir …
    you can try another example of it here this is also very helpful…

    http://www.alltechmantra.com/2013/12/how-to-use-pop-up-control-in-asp.net.html

    Comment by Shubh — December 6, 2013 @ 8:26 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Shocking Blue Green Theme. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: