title: How to use a modal popup extender with update panel
body: <p>I have a webpage that has a dropdown list, Linkbutton and ModualPopupExtender. Inside the panel for the modualpopupextender is a textbox and an 'OK' button and a 'Cancel' button.</p>
  
  <p>So what happens is that when the user clicks the linkbutton the popup panel comes up and the user enters a string in the textbox. Then the user clicks the 'OK' button and the popup goes away and the string entered in the popup textbox is now on the dropdown text.</p>
  
  <p>The problem is that when the user clicks the 'OK' button the page does the postback and the screen goes black for a second then the webpage appears with the string in the dropdown text.</p>
  
  <p>I would like to use an updatepannel so when the user clicks the 'OK' button the transition is seemless. But I can't get that to work.</p>
  
  <p>Here is my Source Code:</p>
  
  <pre><code>&lt;%@ Page Language="vb" AutoEventWireup="false" CodeBehind="UpdatePannel.aspx.vb" Inherits="PDFforms.UpdatePannel" %&gt;
  &lt;%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %&gt;
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style&gt;
          .modalBackground
          {
              position: absolute;
              top: 0px;
              left: 0px;
              filter: alpha(opacity=60);
              -moz-opacity: 0.6;
              opacity: 0.6;
          }
  
          .popup
          {
              background-color: #ddd;
              margin: 0px auto;
              width: 330px;
              position: relative;
              border: Gray 2px inset;
          }
  
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
  
  
      &lt;ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"&gt;
  
      &lt;/ajaxToolkit:ToolkitScriptManager&gt;
     &lt;div&gt;     
  
  
              &lt;table border="0" style="border-width: 2px; width: 100%; background-color:lightgray"&gt;
  
                  &lt;tr id="tr8"&gt;
                      &lt;th colspan="6"&gt;PRODUCT INFORMATION&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr id="tr3"&gt;
  
                      &lt;td&gt;PRODUCT FORM
                          &lt;asp:LinkButton ID="lbProductForm" Font-Size="XX-Small" runat="server"&gt;ADD&lt;/asp:LinkButton&gt;
                          &lt;br /&gt;
                          &lt;asp:DropDownList ID="ddlProductForm" Width="100px" runat="server"&gt;
                              &lt;asp:ListItem Text="" Value="0"&gt; &lt;/asp:ListItem&gt;
                              &lt;asp:ListItem Value="1"&gt;LIQUID&lt;/asp:ListItem&gt;
                              &lt;asp:ListItem Value="2"&gt;SOLID&lt;/asp:ListItem&gt;
                              &lt;asp:ListItem Value="3"&gt;GAS&lt;/asp:ListItem&gt;
                          &lt;/asp:DropDownList&gt;&lt;/td&gt;                    
                  &lt;/tr&gt;
                  &lt;/table&gt;
          &lt;/div&gt;        
          &lt;div&gt; 
              &lt;%-- ------------------------------------------------------------Product popup------------------------------------------------------------------------------ --%&gt;
  
                  &lt;asp:UpdatePanel ID="UpdatePanel1" CssClass="popup"  runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false"&gt;
                      &lt;ContentTemplate&gt;
                  &lt;fieldset&gt;
  
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Product Form Name:
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;asp:TextBox ID="txtProductFormName" runat="server"&gt;&lt;/asp:TextBox&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;asp:Button ID="btnProdFormName" runat="server" Text="Enter" Style="margin-left: 100px" OnClick="btnProdFormName_Click" /&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;asp:Button ID="btnCancel1" runat="server" Text="Cancel" /&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
                      &lt;/fieldset&gt;
              &lt;/ContentTemplate&gt;
  
             &lt;/asp:UpdatePanel&gt;
              &lt;asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" PopupControlID="UpdatePanel1" TargetControlID="lbProductForm" DropShadow="true" BackgroundCssClass="modalBackground" CancelControlID="btnCancel1" PopupDragHandleControlID="Panel1" OnOkScript="onOk()"&gt;
              &lt;/asp:ModalPopupExtender&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my codebehind:</p>
  
  <pre><code>Public Class UpdatePannel
      Inherits System.Web.UI.Page
  
      Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
          Response.Cache.SetCacheability(HttpCacheability.NoCache)
      End Sub
  
      Protected Sub btnProdFormName_Click(sender As Object, e As EventArgs) Handles btnProdFormName.Click
          Dim ss As String
          ss = txtProductFormName.Text
  
  
          ddlProductForm.Items.Add("New")
          ddlProductForm.Items.Insert(0, New ListItem(ss))
          ddlProductForm.SelectedIndex = 0
      End Sub
  End Class
  </code></pre>
  
  <p>Please let me know what I am doing wrong.</p>
  
  <p>Thank you</p>