How to create the popup screen using model popup control 

Add the Ajax Control Tool Kit to the bin folder and add it as a reference to the project

01) To  add the Ajax Control

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

02) Create the your own popup div

     <div id="popupDiv"   style="border: 1px solid #CBCACA; background-color:White; width:754px; height:350px;  display:none">

           <div  style="width:754px;height:25px; background-color:#838080; text-align:right; ">

                <asp:ImageButton ID="imBtnClose" runat="server" Width="24px" BorderColor="White" BorderStyle="Solid" BorderWidth="0px" />

           </div>

           <div class="divRow">

                <asp:GridView ID="GridViewSearch" runat="server" AutoGenerateColumns="False" CssClass="gridview" DataKeyNames="StudentId"

                 onselectedindexchanged="GridViewSearch_SelectedIndexChanged">

                <Columns>

                <asp:BoundField DataField="StudentId" HeaderText="StudentId" Visible="False" />

                <asp:BoundField HeaderText="First Name" DataField="StudentFirstName" />

                <asp:BoundField HeaderText="Last Name" DataField="StudentLastName" />

                <asp:BoundField HeaderText="Max Qualification" DataField="MaxQualification" />

                <asp:BoundField HeaderText="Age" DataField="Age" />

                <asp:BoundField HeaderText="Location" DataField="Location" />

                <asp:TemplateField HeaderText="Edit">

                <ItemTemplate>

                    <asp:Button ID="btnEditNew" runat="server" Text="Edit" onclick="btnEdit_Click" />

                </ItemTemplate>

                </asp:TemplateField>

                </Columns>

                </asp:GridView>

    </div>

• Put the  div Id as  "div id="popupDiv"
•  Add the Style to the pop up  style="border: 1px solid #CBCACA; width:754px;  
• Put the Heading for the popup using the style
  <div  style="width:754px;height:25px; text-align:right; ">
• Add the popup Close button to the heading  <asp:ImageButton ID="imBtnClose"
• put the data key names to the Grid view  DataKeyNames="StudentId"
•             Add the Item template button
    
        
• <asp:TemplateField HeaderText="Edit">
  <ItemTemplate>
  <asp:Button ID="btnEditNew" runat="server" Text="Edit" onclick="btnEdit_Click" />
  </ItemTemplate>
  </asp:TemplateField>

03) Add the popup ModalPopupExtender (One Way )

      <div>

      <asp:LinkButton ID="lnkBtnTarget" style="display:none" runat="server">Target</asp:LinkButton>

         <cc1:ModalPopupExtender ID="ModalPopupExtender2" TargetControlID="lnkBtnTarget"

         PopupControlID="popupDiv"  runat="server"  Drag="True" DropShadow="True"

         CancelControlID="imBtnClose" BackgroundCssClass="modelPopup">

         </cc1:ModalPopupExtender>

      </div>

•        Add the link button
•       Set the Target Control as TargetControlID="lnkBtnTarget"( link button Id)
•       Set the Popup control as PopupControlID="popupDiv" 
•       Set the Cancel Control as CancelControlID="imBtnClose"
•       Call the model popup show method from the button

           protected void btnSearch_Click(object sender, EventArgs e)

      {

         ModalPopupExtender2.Show();

       }

03) Add the popup ModalPopupExtender (Second  Way )

      <div>

         <cc1:ModalPopupExtender ID="ModalPopupExtender2" TargetControlID="btnSearch"

         PopupControlID="popupDiv"  runat="server"  Drag="True" DropShadow="True"

         CancelControlID="imBtnClose" BackgroundCssClass="modelPopup">

         </cc1:ModalPopupExtender>

      </div>

•  Set the Target Control as TargetControlID="btnSearch"( button 
•  Set the Popup control as PopupControlID="popupDiv" 
•   Set the Cancel Control as CancelControlID="imBtnClose"

                then no need to call the show method

04) Set display none to all the Div controls

05)if we can see the post back when click the grid view button, put update panel for all the controls

  <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

  <ContentTemplate>

   ..................................................

  </ContentTemplate>

  </asp:UpdatePanel>

06)Add the script manager at the top of the page

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

07)Bind the grid view data, in the page load event

        private void BindStudentSearch()

        {

            try

            {

                StudentClient mbanxService = Common.GetWebService();

                studentlist = mbanxService.GetStudent().ToList();

                GridViewSearch.DataSource = studentlist;

                GridViewSearch.DataBind();

            }

            catch (Exception)

            {

                throw;

            }

         }

08)Add the grid edit button event

int rowIndex = ((sender as Button).NamingContainer as GridViewRow).RowIndex;

int StdId = 0; int.TryParse(GridViewSearch.DataKeys[rowIndex].Value.ToString(), out StdId);

          

 Student obj = studentlist.Find(a => a.StudentId == StdId);

            if (obj != null)

            {

                txtFName.Text = obj.StudentFirstName;

                txtLName.Text = obj.StudentLastName;

            }