I have recently developed a user control which allows a user to select a person from a datastore of some type (AD in my case).  There are two parts to the control.  The first part is a asp textbox and an imagebutton.  The second part is a panel which allows the user to search by first name, last name, and e-mail to locate a user.  Once they have located a user they can click on that user and it will populate the textbox in the first part.  I implemented this functionality with the ModalPopupExtender and two UpdatePanels.  Initially I thought the user control was working perfectly, that was until I added to a page with a UpdatePanel of it's own.  The outside UpdatePanel caused the user control to start doing all kinds of crazy things.  I tried everything I could think of to correct this issue for the last two days and I am totally lost on what is causing the problem.

Here is the code

User Control - PeoplePicker.ascx

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="PeoplePicker.ascx.vb" Inherits="Controls_PeoplePicker" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<style type="text/css">
    .DarkenBackground 
    {
        background-color: rgb(0, 0, 0);
        opacity: 0.7; /* Safari, Opera */
        -moz-opacity:0.70; /* FireFox */
        filter: alpha(opacity=70); /* IE */
        z-index: 20;
        height: 100%;
        width: 100%;
        background-repeat:repeat;
        position:fixed;
        top: 0px;
        left: 0px;
    }
    .ModalPopup
    {
        background-color: #003e74;
        filter: alpha(opacity=100); /* IE */
        -moz-opacity: 1.00; /* FireFox */
        font-family: Verdana;
        border-style: solid;
        border-width: 0.75pt;
        border-color: White; 
    }
    .ModalPopup h
    {
        background-color: #003e74;
        filter: alpha(opacity=100); /* IE */
        -moz-opacity: 1.00; /* FireFox */
        font-family: Verdana;
    }
    .GridViewFixedHeader 
    {
        POSITION: relative; 
        color: White;
        background-color: #646464;
    }
    .GridScrollBar
    {
        overflow-y: auto;
        height: 200px;
        width: 300px;
    }
    .DefaultCursor
    {
        cursor: default;
    }
    .MainPageTable
    {
        border-collapse: collapse; 
        padding: 0; 
        margin: 0
    }
    .ModalTable
    {
        height:100%; 
        width:95%; 
        margin-left:auto; 
        margin-right: auto;     
    }
    .ModalTableLabelTD
    {
        font-size: 8pt; 
        font-weight: bold; 
        color: White; 
        width: 25%
    }
    .ModalTableControlTD
    {
        Width: 160px;
    }
    .GridViewResult
    {
        background-color: White;
        Width: 282px;
        padding: 20px;
    }
    .GridViewResultRows
    {
        color: Black;
        background-color: White;
        height: 30px;
    }
</style>

<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler)

    function BeginRequestHandler(sender, args) 
    {
        var btn = document.getElementById("<%= btnSearch.ClientID %>");
        btn.disabled = true;
    }

    function EndRequestHandler(sender, args) 
    {
        var btn = document.getElementById("<%= btnSearch.ClientID %>");
        btn.disabled = false;
    }
</script>

<table class="MainPageTable">
    <tr>
        <td>
            <asp:UpdatePanel runat="server" ID="upPerson">
                <ContentTemplate>
                    <asp:TextBox runat="server" ID="txtPerson" ReadOnly="true"></asp:TextBox>
                    <asp:TextBox runat="server" ID="txtGUID" ReadOnly="true" Visible="false"></asp:TextBox>
                </ContentTemplate>
            </asp:UpdatePanel>
        </td>
        <td valign="bottom">
            <asp:ImageButton runat="server" ID="btnPeoplePicker" ImageUrl="~/Images/Person.jpg" />
            <input id="dummy" type="button" style="display: none" runat="server" />
        </td>
    </tr>
</table>
    
<cc1:modalpopupextender 
    runat="server" 
    id="mpeThePopup" 
    TargetControlID="dummy"
    PopupDragHandleControlID="PickerHeader" 
    PopupControlID="pnlModalPopUpPanel" 
    CancelControlID="btnClose"
    BackgroundCssClass="DarkenBackground" 
    DropShadow="true">
</cc1:modalpopupextender>
        
<!-- Must have style="display:none" in the panel to prevent a flashing bug from happening with the 
     ModalPopupExtender style="display:none"-->         
<asp:Panel runat="server" ID="pnlModalPopUpPanel" CssClass="ModalPopup" Width="500px" >
    <div style="text-align:right; padding:10px; cursor: move" id="PickerHeader">
        <asp:ImageButton runat="server" ID="btnClose" ImageUrl="~/Images/close.png" CssClass="DefaultCursor" Height="100%" />
    </div>
    <asp:UpdatePanel ID="udpInnerUpdatePanel" runat="Server" UpdateMode="Conditional"> 
        <ContentTemplate>
            <table class="ModalTable" cellspacing="10">
                <tr>
                    <td style="font-size: 13pt; font-weight:900; color: White;" colspan="2">
                        People Picker 
                    </td>
                </tr>
                <tr style="height:18px;">
                    <td colspan="2"><hr style="color:White; height: 1px;" /></td>
                </tr>
                <tr>
                    <td class="ModalTableLabelTD">
                        First Name: 
                    </td>
                    <td>
                        <asp:TextBox runat="server" ID="txtFirstName" CssClass="ModalTableControlTD"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="ModalTableLabelTD">
                        Last Name: 
                    </td>
                    <td>
                        <asp:TextBox runat="server" ID="txtLastName" CssClass="ModalTableControlTD"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="ModalTableLabelTD">
                        E-Mail: 
                    </td>
                    <td>
                        <asp:TextBox runat="server" ID="txtEmail" CssClass="ModalTableControlTD"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="ModalTableLabelTD" valign="top">
                        Results: 
                    </td>
                    <td>
                        <div id="dHorizontalScroll" runat="server" class="GridScrollBar">
                            <asp:GridView runat="server" ID="gvUserInfo" DataKeyNames="objectGUID" CssClass="GridViewResult" AutoGenerateColumns="false" GridLines="None" 
                                    CellPadding="1" AutoGenerateSelectButton="false" EmptyDataText="No results">
                                <Columns>
                                    <asp:ButtonField ButtonType="Image" ItemStyle-Width="15%" ImageUrl="~/Images/AddPerson.jpg" CommandName="Select" ItemStyle-HorizontalAlign="Center" />
                                    <asp:BoundField HeaderStyle-HorizontalAlign="left" DataField="displayName" HeaderText="Name" />
                                </Columns>
                                <RowStyle CssClass="GridViewResultRows" />
                                <HeaderStyle CssClass="GridViewFixedHeader" />
                            </asp:GridView>
                        </div>
                    </td>
                </tr>
        </table>
        </ContentTemplate>
        <Triggers> 
            <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" /> 
        </Triggers>
    </asp:UpdatePanel>
    <div style="text-align: center; padding: 8px; width: 100%">
        <asp:button runat="server" id="btnSearch" Text="Search" Width="85px" Height="25px" />
    </div>
    <asp:UpdateProgress ID="upPickerStatus" runat="server">
        <ProgressTemplate>
            <div style="vertical-align: middle; margin-left: auto; margin-right: auto; padding: 10px; color: White; width: 100%; text-align: center">
                <img src="Images/ajax-loader.gif" alt="" id="iUpdating" /> SEARCHING... 
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
</asp:Panel>

User Control - PeoplePicker.ascx.vb

 

Imports ADWebService.ADLookup
Imports System.Data

Partial Class Controls_PeoplePicker
    Inherits System.Web.UI.UserControl

    Protected Sub btnSearch_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSearch.Click
        Dim search As New ADWebService.ADLookup
        Dim results As New ADWebService.EmailAddressData

        ' Call the AD web service to search for a user 
        results = search.ADSearch(Me.txtLastName.Text, Me.txtFirstName.Text, Me.txtEmail.Text)

        Me.gvUserInfo.DataSource = FormatUserInfo(results.dsData)
        Me.gvUserInfo.DataBind()

        Me.mpeThePopup.Show()
    End Sub

    Protected Sub btnPeoplePicker_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles btnPeoplePicker.Click
        Me.txtFirstName.Text = String.Empty
        Me.txtLastName.Text = String.Empty
        Me.txtEmail.Text = String.Empty

        Me.gvUserInfo.DataSource = Nothing
        Me.gvUserInfo.DataBind()

        If Not txtPerson.Text = String.Empty Then
            If Not IsNothing(Me.txtPerson.Text.IndexOf(",")) AndAlso Not Me.txtPerson.Text.IndexOf(",") = -1 Then
                Dim FirstName As String

                FirstName = Me.txtPerson.Text.Substring(Me.txtPerson.Text.IndexOf(",") + 1).Trim
                Me.txtFirstName.Text = FirstName.Substring(0, FirstName.IndexOf(" "))
                Me.txtLastName.Text = Me.txtPerson.Text.Substring(0, Me.txtPerson.Text.IndexOf(",")).Trim
            End If
        End If

        Me.mpeThePopup.Show()
    End Sub

    Protected Sub gvUserInfo_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles gvUserInfo.SelectedIndexChanged
        ' Get the value from the GridView and populate the textbox on the parent form
        Me.txtPerson.Text = Server.HtmlDecode(gvUserInfo.SelectedRow.Cells(1).Text)
        Me.txtGUID.Text = Me.gvUserInfo.DataKeys(Me.gvUserInfo.SelectedRow.RowIndex).Value
        Me.mpeThePopup.Hide()
    End Sub

    ' This function allows you to format the result set.  The only thing I have chosen to
    ' do is remove the rows which do not have e-mails.
    Private Function FormatUserInfo(ByVal userInfo As Data.DataSet) As Data.DataTable
        Dim table As DataTable
        Dim selectExpression As String
        Dim rowsToRemove() As DataRow

        table = userInfo.Tables("UserInformation")
        ' Select all rows that do not have an e-mail address
        selectExpression = "mail = ''"
        rowsToRemove = table.Select(selectExpression)

        For Each row As DataRow In rowsToRemove
            table.Rows.Remove(row)
        Next

        Return table
    End Function

    Public Property UserGUID() As String
        Get
            Return Me.txtGUID.Text
        End Get
        Set(ByVal value As String)
            Me.txtGUID.Text = value
        End Set
    End Property

    Public Property Text() As String
        Get
            Return Me.txtPerson.Text
        End Get
        Set(ByVal value As String)
            Me.txtPerson.Text = value
        End Set
    End Property

End Class

Page the control is being used on that is causing the problems

 

<%@ Page Title="" Language="VB" MasterPageFile="~/Main.master" ValidateRequest="false" AutoEventWireup="false" CodeFile="DepartmentAdmin.aspx.vb" EnableEventValidation="false" Inherits="DepartmentAdmin" %>
<%@ Register src="Controls/PeoplePicker.ascx" tagname="PeoplePicker" tagprefix="uc1" %>

<asp:Content ID="cDpartmentAdmin" ContentPlaceHolderID="form" runat="Server">
    <table width="90%" border="0" style="margin-left: auto; margin-right: auto" cellpadding="0" cellspacing="0">
        <tr>
            <!-- Changing the layout of these TDs will result in the rounded corners getting out of alignment -->
            <td style="width: 16px"><img src="images/top_lef.gif" alt="" width="16px" height="16px" /></td>
            <td style="background: url(images/top_mid.gif); height: 16px"><img src="images/top_mid.gif" width="16px" height="16px" alt="" /></td>
            <td style="width: 24px"><img src="images/top_rig.gif" alt="" width="24px" height="16px" /></td>
        </tr>
        <tr>
            <td style="background: url(images/cen_lef.gif); width: 16px">
                <img src="images/cen_lef.gif" alt="" width="16px" height="11px" />
            </td>
            <td style="background-color: #F7F8FB">
            <asp:UpdatePanel ID="upDepartmentAdministration" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                <ContentTemplate>
                    <table class="MainContentTable" cellpadding="0" cellspacing="10" border="0">
                        <tr align="left">
                            <td colspan="2">
                                <label class="MainContentTableHeader">
                                    Department Administration</label>
                            </td>
                            <td align="right">
                                <asp:Label runat="server" ID="lblStatus" ForeColor="Red"></asp:Label>
                            </td>
                        </tr>
                        <tr style="height: 20px">
                            <td colspan="3">
                                <hr />
                            </td>
                        </tr>
                        <tr>
                            <td class="FirstColumnRequiredLabel">
                                Action:
                            </td>
                            <td class="SpanColumnsControl" colspan="2">
                                <asp:DropDownList runat="server" ID="ddlDepartmentAction" AutoPostBack="true">
                                    <asp:ListItem Value="-1" Selected="True">Select One</asp:ListItem>
                                    <asp:ListItem Value="1">New Department</asp:ListItem>
                                    <asp:ListItem Value="2">Edit Department</asp:ListItem>
                                </asp:DropDownList>
                            </td>
                        </tr>
                    </table>
                     
                    <table runat="server" id="tDepartmentAction" visible="false" border="0" class="MainContentTable" cellpadding="0" cellspacing="10">
                        <tr>
                            <td class="FirstColumnRequiredLabel">
                                Department:
                            </td>
                            <td class="SecondColumnControl">
                                <asp:TextBox runat="server" ID="txtDepartment" Visible="false" Width="75%"></asp:TextBox>
                                <asp:DropDownList runat="server" ID="ddlDepartment" Visible="false" 
                                    AutoPostBack="true"></asp:DropDownList>
                            </td>
                            <td class="ThirdColumnRequiredLabel">
                                Manager:
                            </td>
                            <td class="FourthColumnControl">
                                <uc1:PeoplePicker runat="server" ID="ppManager" />
                            </td>
                        </tr>
                        <tr>
                            <td class="FirstColumnRequiredLabel">
                                Value Center:
                            </td>
                            <td class="SecondColumnControl">
                                <asp:DropDownList runat="server" AutoPostBack="true" ID="ddlValueCenter" DataTextField="Text" DataValueField="Value"></asp:DropDownList>
                            </td>
                            <td class="ThirdColumnRequiredLabel">
                                Administrator:
                            </td>
                            <td class="FourthColumnControl">
                                <uc1:PeoplePicker runat="server" ID="ppAdministrator" />
                            </td>
                        </tr>
                        <tr>
                            <td class="FirstColumnRequiredLabel">
                                Description:
                            </td>
                            <td class="SpanColumnsControl" colspan="3">
                                <asp:TextBox runat="server" ID="txtDescription" TextMode="MultiLine" Width="75%" Rows="4"></asp:TextBox>
                            </td>
                        </tr>
                        <tr style="height: 15px">
                            <td colspan="3"></td>
                        </tr>
                        <tr align="center">
                            <td colspan="4">
                                <asp:Button runat="server" ID="btnClearForm" Text="Clear Form" CssClass="StandardButton" />
                                <asp:Button runat="server" ID="btnSubmit" Text="Submit" CssClass="StandardButton" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="4">
                               <b>All bolded fields are required</b> 
                            </td>
                        </tr>
                    </table>
               </ContentTemplate>
               <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="ddlDepartmentAction" />
                    <asp:AsyncPostBackTrigger ControlID="ddlDepartment" />
               </Triggers>
            </asp:UpdatePanel>
            </td>
            <td style="background: url(images/cen_rig.gif); width: 24px">
                <img src="images/cen_rig.gif" alt="" width="24px" height="11px" />
            </td>
        </tr>
        <tr>
            <td style="width: 16px; height: 16px"><img src="images/bot_lef.gif" alt="" width="16px" height="16px" /></td>
            <td style="background: url(images/bot_mid.gif); height: 16px"><img src="images/bot_mid.gif" alt="" width="16px" height="16px" /></td>
            <td style="width: 24px; height: 16px"><img src="images/bot_rig.gif" alt="" width="24px" height="16px" /></td>
        </tr>
    </table>
</asp:Content>

I have tried everything I can think of.  Any help that the ASP.NET community can provide would be GREATLY appreciated.

 

I could really use help on this issue.  If anyone reading this needs additional details please let me know. 

I am still having this same problem.  I have tried everything I can think of to get this working.  If I don't receive any help from people on the boards I am going to be forced to have to use this user control outside of an UpdatePanel.  I find it hard to believe that nobody else has encountered this problem. 

Hi Gondore,

You can set the userControl’s click event as the UpdatePanel’s trigger.
Please refer to my reply in this thread:
http://forums.asp.net/p/1376313/2900267.aspx#2900267
http://forums.asp.net/p/1490897/3510559.aspx#3510559
http://forums.asp.net/t/1248060.aspx
http://forums.asp.net/p/1249173/2312275.aspx#2312275
http://forums.asp.net/p/1260529/2365641.aspx#2365641
http://forums.asp.net/p/1263128/2375935.aspx#2375935
http://forums.asp.net/p/1270002/2410443.aspx#2410443

Best regards,

Zhi-Qiang Ni

I appreciate you response.  I have reviewed the links you have provided and they did not provide the information needed to come to a solution.  Can you give me an example using my code of what you mean by, "set the userControl’s click event as the UpdatePanel’s trigger"?  I have three different UpdatePanels in the code posted above and there are numerous properties that can be set on an UpdatePanel.  If you could give specifics on what to try that would be great!

Hi Gondore,

I have tested all your code locally (except the DataTable). It can work perfectly. Here is my test code based on yours:

.ascx file

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PeoplePicker.ascx.cs"
    Inherits="SoluTest_ModalOutsideUDP.PeoplePicker" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<style type="text/css">
    .DarkenBackground
    {
        background-color: rgb(0, 0, 0);
        opacity: 0.7; /* Safari, Opera */
        -moz-opacity: 0.70; /* FireFox */
        filter: alpha(opacity=70); /* IE */
        z-index: 20;
        height: 100%;
        width: 100%;
        background-repeat: repeat;
        position: fixed;
        top: 0px;
        left: 0px;
    }
    .ModalPopup
    {
        background-color: #003e74;
        filter: alpha(opacity=100); /* IE */
        -moz-opacity: 1.00; /* FireFox */
        font-family: Verdana;
        border-style: solid;
        border-width: 0.75pt;
        border-color: White;
    }
    .ModalPopup h
    {
        background-color: #003e74;
        filter: alpha(opacity=100); /* IE */
        -moz-opacity: 1.00; /* FireFox */
        font-family: Verdana;
    }
    .GridViewFixedHeader
    {
        position: relative;
        color: White;
        background-color: #646464;
    }
    .GridScrollBar
    {
        overflow-y: auto;
        height: 200px;
        width: 300px;
    }
    .DefaultCursor
    {
        cursor: default;
    }
    .MainPageTable
    {
        border-collapse: collapse;
        padding: 0;
        margin: 0;
    }
    .ModalTable
    {
        height: 100%;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }
    .ModalTableLabelTD
    {
        font-size: 8pt;
        font-weight: bold;
        color: White;
        width: 25%;
    }
    .ModalTableControlTD
    {
        width: 160px;
    }
    .GridViewResult
    {
        background-color: White;
        width: 282px;
        padding: 20px;
    }
    .GridViewResultRows
    {
        color: Black;
        background-color: White;
        height: 30px;
    }
</style>

<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler)

    function BeginRequestHandler(sender, args) {
        var btn = document.getElementById("<%= btnSearch.ClientID %>");
        btn.disabled = true;
    }

    function EndRequestHandler(sender, args) {
        var btn = document.getElementById("<%= btnSearch.ClientID %>");
        btn.disabled = false;
    }   
</script>

<table class="MainPageTable">
    <tr>
        <td>
<%--            <asp:UpdatePanel runat="server" ID="upPerson">
                <ContentTemplate>--%>
                    <asp:TextBox runat="server" ID="txtPerson" ReadOnly="true"></asp:TextBox>
                    <asp:TextBox runat="server" ID="txtGUID" ReadOnly="true" Visible="false"></asp:TextBox>
<%--                </ContentTemplate>
            </asp:UpdatePanel>--%>
        </td>
        <td valign="bottom">
            <asp:ImageButton runat="server" ID="btnPeoplePicker" ImageUrl="~/Control_Button.bmp"
                OnClick="btnPeoplePicker_Click" />
            <input id="dummy" type="button" style="display: none" runat="server" />
        </td>
    </tr>
</table>
<cc1:ModalPopupExtender runat="server" ID="mpeThePopup" TargetControlID="dummy" PopupDragHandleControlID="PickerHeader"
    PopupControlID="pnlModalPopUpPanel" CancelControlID="btnClose" BackgroundCssClass="DarkenBackground"
    DropShadow="true">
</cc1:ModalPopupExtender>
<!-- Must have style="display:none" in the panel to prevent a flashing bug from happening with the    
     ModalPopupExtender style="display:none"-->
<asp:Panel runat="server" ID="pnlModalPopUpPanel" CssClass="ModalPopup" Width="500px">
    <div style="text-align: right; padding: 10px; cursor: move" id="PickerHeader">
        <asp:ImageButton runat="server" ID="btnClose" ImageUrl="~/Control_Button.bmp" CssClass="DefaultCursor"
            Height="100%" />
    </div>
    <asp:UpdatePanel ID="udpInnerUpdatePanel" runat="Server" UpdateMode="Conditional">
        <ContentTemplate>
            <table class="ModalTable" cellspacing="10">
                <tr>
                    <td style="font-size: 13pt; font-weight: 900; color: White;" colspan="2">
                        People Picker
                    </td>
                </tr>
                <tr style="height: 18px;">
                    <td colspan="2">
                        <hr style="color: White; height: 1px;" />
                    </td>
                </tr>
                <tr>
                    <td class="ModalTableLabelTD">
                        First Name:
                    </td>
                    <td>
                        <asp:TextBox runat="server" ID="txtFirstName" CssClass="ModalTableControlTD"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="ModalTableLabelTD">
                        Last Name:
                    </td>
                    <td>
                        <asp:TextBox runat="server" ID="txtLastName" CssClass="ModalTableControlTD"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="ModalTableLabelTD">
                        E-Mail:
                    </td>
                    <td>
                        <asp:TextBox runat="server" ID="txtEmail" CssClass="ModalTableControlTD"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="ModalTableLabelTD" valign="top">
                        Results:
                    </td>
                    <td>
                        <div id="dHorizontalScroll" runat="server" class="GridScrollBar">
                            <%--<asp:GridView runat="server" ID="gvUserInfo" DataKeyNames="objectGUID" CssClass="GridViewResult"
                                AutoGenerateColumns="false" GridLines="None" CellPadding="1" AutoGenerateSelectButton="false"
                                EmptyDataText="No results">
                                <Columns>
                                    <asp:ButtonField ButtonType="Image" ItemStyle-Width="15%" ImageUrl="~/Images/AddPerson.jpg"
                                        CommandName="Select" ItemStyle-HorizontalAlign="Center" />
                                    <asp:BoundField HeaderStyle-HorizontalAlign="left" DataField="displayName" HeaderText="Name" />
                                </Columns>
                                <RowStyle CssClass="GridViewResultRows" />
                                <HeaderStyle CssClass="GridViewFixedHeader" />
                            </asp:GridView>--%>
                            <asp:GridView ID="gvUserInfo" runat="server" AutoGenerateColumns="False" CssClass="GridViewResult"
                                EmptyDataText="No results" DataKeyNames="ID" GridLines="None"
                                CellPadding="1" OnSelectedIndexChanged="gvUserInfo_SelectedIndexChanged">
                                <Columns>
                                    <asp:CommandField ShowSelectButton="True" />
                                    <asp:ButtonField ButtonType="Image" ItemStyle-Width="15%" ImageUrl="~/Control_Button.bmp"
                                        CommandName="Select" ItemStyle-HorizontalAlign="Center" />
                                    <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True"
                                        SortExpression="ID" />
                                    <asp:BoundField DataField="Field1" HeaderText="Field1" HeaderStyle-HorizontalAlign="left"
                                        SortExpression="Field1" />
                                    <asp:BoundField DataField="Field2" HeaderText="Field2" SortExpression="Field2" />
                                </Columns>
                                <RowStyle CssClass="GridViewResultRows" />
                                <HeaderStyle CssClass="GridViewFixedHeader" />
                            </asp:GridView>
                            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString2 %>"
                                ProviderName="<%$ ConnectionStrings:DatabaseConnectionString2.ProviderName %>"
                                SelectCommand="SELECT [ID], [Field1], [Field2] FROM [Detail]"></asp:SqlDataSource>
                        </div>
                    </td>
                </tr>
            </table>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
    <div style="text-align: center; padding: 8px; width: 100%">
        <asp:Button runat="server" ID="btnSearch" Text="Search" Width="85px" Height="25px"
            OnClick="btnSearch_Click" />
    </div>
    <asp:UpdateProgress ID="upPickerStatus" runat="server">
        <ProgressTemplate>
            <div style="vertical-align: middle; margin-left: auto; margin-right: auto; padding: 10px;
                color: White; width: 100%; text-align: center">
                <img src="Images/ajax-loader.gif" alt="" id="iUpdating" />
                SEARCHING...
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
</asp:Panel>

.ascx.cs file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace SoluTest_ModalOutsideUDP
{
    public partial class PeoplePicker : System.Web.UI.UserControl
    {
        protected void btnSearch_Click(object sender, System.EventArgs e)
        {
            //ADWebService.ADLookup search = new ADWebService.ADLookup();
            //ADWebService.EmailAddressData results = new ADWebService.EmailAddressData();

            //// Call the AD web service to search for a user    
            //results = search.ADSearch(this.txtLastName.Text, this.txtFirstName.Text, this.txtEmail.Text);

            //this.gvUserInfo.DataSource = FormatUserInfo(results.dsData);
            gvUserInfo.DataSourceID = "SqlDataSource1";
            this.gvUserInfo.DataBind();

            this.mpeThePopup.Show();
        }

        protected void btnPeoplePicker_Click(object sender, System.Web.UI.ImageClickEventArgs e)
        {
            this.txtFirstName.Text = string.Empty;
            this.txtLastName.Text = string.Empty;
            this.txtEmail.Text = string.Empty;

            this.gvUserInfo.DataSource = null;
            this.gvUserInfo.DataBind();

            //if (txtPerson.Text != string.Empty)
            //{
            //    if ((this.txtPerson.Text.IndexOf(",") != null) && this.txtPerson.Text.IndexOf(",") != -1)
            //    {
            //        string FirstName;

            //        FirstName = this.txtPerson.Text.Substring(this.txtPerson.Text.IndexOf(",") + 1).Trim();
            //        this.txtFirstName.Text = FirstName.Substring(0, FirstName.IndexOf(" "));
            //        this.txtLastName.Text = this.txtPerson.Text.Substring(0, this.txtPerson.Text.IndexOf(",")).Trim();
            //    }
            //}

            this.mpeThePopup.Show();
        }

        protected void  gvUserInfo_SelectedIndexChanged(object sender, System.EventArgs e)
        {
            // Get the value from the GridView and populate the textbox on the parent form   
            this.txtPerson.Text = Server.HtmlDecode(gvUserInfo.SelectedRow.Cells[2].Text);
            this.txtGUID.Text = this.gvUserInfo.DataKeys[this.gvUserInfo.SelectedRow.RowIndex].Value.ToString();
            this.mpeThePopup.Hide();
        }

        //// This function allows you to format the result set.  The only thing I have chosen to   
        //// do is remove the rows which do not have e-mails.   
        //private Data.DataTable FormatUserInfo(Data.DataSet userInfo)
        //{
        //    DataTable table;
        //    string selectExpression;
        //    DataRow[] rowsToRemove;

        //    table = userInfo.Tables("UserInformation");
        //    // Select all rows that do not have an e-mail address   
        //    selectExpression = "mail = ''";
        //    rowsToRemove = table.Select(selectExpression);

        //    foreach (DataRow row in rowsToRemove)
        //    {
        //        table.Rows.Remove(row);
        //    }

        //    return table;
        //}

        public string UserGUID
        {
            get { return this.txtGUID.Text; }
            set { this.txtGUID.Text = value; }
        }

        public string Text
        {
            get { return this.txtPerson.Text; }
            set { this.txtPerson.Text = value; }
        }

    }
}

From the code, I understand that you would like to select value from the GridView and then return the result outside the Modal. To achieve this goal, you can refer to my sample code in this thread:
http://forums.asp.net/p/1289945/2502659.aspx#2502659
http://forums.asp.net/p/1315032/2606428.aspx#2606428

Best regards,

Zhi-Qiang Ni

Thank you again for the prompt response.  It's hard to tell all the changes you made to my code but the main one I see is that you removed the UpdatePanel around the txtPerson and txtGUID textboxes. 

<%--            <asp:UpdatePanel runat="server" ID="upPerson"> 
                <ContentTemplate>--%> 
                    <asp:TextBox runat="server" ID="txtPerson" ReadOnly="true"></asp:TextBox> 
                    <asp:TextBox runat="server" ID="txtGUID" ReadOnly="true" Visible="false"></asp:TextBox> 
<%--                </ContentTemplate> 
            </asp:UpdatePanel>--%> 

I tried making all the changes you made above and I am still having one issue.  When I select a name from the GridView the modal window will shut properly but the textbox will not be populated with the name.  This is the original reason why I added in the UpdatePanel that you commented out above.  I read the two links you provided on this topic but I am still not sure how to proceed.  Could you please provide some additional insight on how to do this without the UpdatePanel?

It should also be noted that the code above does work perfectly when the user control is used on a page that does not have an UpdatePanel. 

Hi Gondore,

I tested the code locally for several times and it can work perfectly whether it is inside an UpdatePanel or not. Please try to place that usercontrol into a new UpdatePanel. I think you need to check the events and trigger inside the page’s UpdatePanel.

Best regards,

Zhi-Qiang Ni

Thank you again for your reply.

I am not able to determine how you are reaching the conclusion that it is working fine.  I created your control in my project and created a test page for it and it's failing.  Here is the test page I am using:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestPageNoMaster.aspx.cs"
    Inherits="TestPageNoMaster" %>

<%@ Register Src="Controls/PeoplePicker.ascx" TagName="PeoplePicker" TagPrefix="uc1" %>
<%@ Register Src="Controls/PeoplePickerTest.ascx" TagName="PeoplePickerTest" TagPrefix="uc2" %>
<!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>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel runat="server" ID="upNewDepartment" UpdateMode="Conditional" ChildrenAsTriggers="false">
        <ContentTemplate>
            <table class="MainContentTable" cellpadding="0" cellspacing="10" border="0">
                <tr>
                    <td class="ThirdColumnRequiredLabel">
                       People Picker:
                    </td>
                    <td class="FourthColumnControl">
                        <uc1:PeoplePicker runat="server" ID="ppAdministrator" />
                        <%--<uc2:PeoplePickerTest ID="PeoplePickerTest1" runat="server" />--%>
                    </td>
                </tr>
                <tr align="center">
                    <td colspan="4">
                        <asp:Button runat="server" ID="btnClearForm" Text="Clear Form" CssClass="StandardButton" />
                        <asp:Button runat="server" ID="btnSubmit" Text="Submit" CssClass="StandardButton" />
                    </td>
                </tr>
            </table>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnClearForm" EventName="Click" />
            <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
    </form>
</body>
</html>

 Insert your control where my control currently is located (uc1:PeoplePicker) and give it a try.  It will work fine until you click something like the "Clear Form" button which causes a postback.  I get the following error when posting back:

Error: Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing the request on the server. The status code returned from the server was: 12029

Alright, it appears that adding 

ScriptMode="Release"

to the ScriptManager will fix the javascript error; however, I believe you will find that your control still does not work when you click the "Clear Form" button (postback). 

 This issue has not been resolved yet.

Gondore:

It should also be noted that the code above does work perfectly when the user control is used on a page that does not have an UpdatePanel. 

Sorry for interfering into your conversation.

But, I am vaguely recalling
that I read somewhere that
in order for user control to work with UpdatePanel,
the UpdatePanel should be plced unside UserControl
itself but not user control inside UpdatePanel....

Any way, I am impatient to hear about this more! 

 As of now my control that uses the ModalPopupExtender had two UpdatePanels.  The page that I use the control on then also has an UpdatePanel.  It's this outer UpdatePanel that causes the problems. 

After doing a LOT of reading on the ModalPopupExtender I have come to realize that the Atlas AJAX toolkit is just poorly supported in general.  Very few of the individuals that originally wrote the controls are supporting them still and Microsoft isn't providing any real support.  This has lead me to believe that this toolkit only has limited use for production applications.

Gondore:

It's this outer UpdatePanel that causes the problems.

What do you mean under "outer":
- outside of user control?
or
- just high-level wrapper on webpage? 

Gondore:

After doing a LOT of reading on the ModalPopupExtender I have come to realize that the Atlas AJAX toolkit is just poorly supported in general.  Very few of the individuals that originally wrote the controls are supporting them still and Microsoft isn't providing any real support.  This has lead me to believe that this toolkit only has limited use for production applications

IMO, server-side ajaxing appears on the surface as not requiring the knowledge of Ajax or even javascript
but in reality it requires even more thorough qualification to make something that have sense and does not worsen the same without ASP.NET server-side Ajax. 

 Server-side ASP.NET Ajax is real trap in disguise!

Any way,

I would appreciate any thoughts, notes that you found while digging