如何使用更新面板的模式弹出式扩展器

我有一个网页有一个下拉列表，Linkbutton和ModualPopupExtender。 modualpopupetentender面板内部是一个文本框，一个“确定”按钮和一个“取消”按钮。如何使用更新面板的模式弹出式扩展器

所以会发生的是，当用户点击链接按钮弹出面板出现，用户在文本框中输入一个字符串。然后用户点击“确定”按钮，弹出消失，在弹出文本框中输入的字符串现在在下拉文本中。

问题是，当用户点击'确定'按钮时，页面会执行回发并且屏幕会变黑一秒，然后网页就会以字符串的形式出现在下拉文本中。

我想使用updatepannel，所以当用户点击'确定'按钮时，转换是没有用处的。但我无法得到这个工作。

这里是我的源代码：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="UpdatePannel.aspx.vb" Inherits="PDFforms.UpdatePannel" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> 
<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style> 
     .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; 
     } 


    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 


    <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> 

    </ajaxToolkit:ToolkitScriptManager> 
    <div>  


      <table border="0" style="border-width: 2px; width: 100%; background-color:lightgray"> 

       <tr id="tr8"> 
        <th colspan="6">PRODUCT INFORMATION</th> 
       </tr> 
       <tr id="tr3"> 

        <td>PRODUCT FORM 
         <asp:LinkButton ID="lbProductForm" Font-Size="XX-Small" runat="server">ADD</asp:LinkButton> 
         <br /> 
         <asp:DropDownList ID="ddlProductForm" Width="100px" runat="server"> 
          <asp:ListItem Text="" Value="0"> </asp:ListItem> 
          <asp:ListItem Value="1">LIQUID</asp:ListItem> 
          <asp:ListItem Value="2">SOLID</asp:ListItem> 
          <asp:ListItem Value="3">GAS</asp:ListItem> 
         </asp:DropDownList></td>      
       </tr> 
       </table> 
     </div>   
     <div> 
      <%-- ------------------------------------------------------------Product popup------------------------------------------------------------------------------ --%> 

       <asp:UpdatePanel ID="UpdatePanel1" CssClass="popup" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false"> 
        <ContentTemplate> 
       <fieldset> 

       <table> 
        <tr> 
         <td>Product Form Name: 
         </td> 
         <td> 
          <asp:TextBox ID="txtProductFormName" runat="server"></asp:TextBox> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <asp:Button ID="btnProdFormName" runat="server" Text="Enter" Style="margin-left: 100px" OnClick="btnProdFormName_Click" /> 
         </td> 
         <td> 
          <asp:Button ID="btnCancel1" runat="server" Text="Cancel" /> 
         </td> 
        </tr> 
       </table> 
        </fieldset> 
      </ContentTemplate> 

      </asp:UpdatePanel> 
      <asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" PopupControlID="UpdatePanel1" TargetControlID="lbProductForm" DropShadow="true" BackgroundCssClass="modalBackground" CancelControlID="btnCancel1" PopupDragHandleControlID="Panel1" OnOkScript="onOk()"> 
      </asp:ModalPopupExtender> 
     </div> 
    </form> 
</body> 
</html>

这里是我的代码隐藏：

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

请让我知道我做错了。

谢谢

来源

2014-09-23 Matt Porterfield

嗨，如果这个答案有帮助，请投票并接受它。干杯! – Sam 2014-12-09 22:19:56

-1

让您UpdatePanel内ModalPopupExtender控制和使用AsyncPostBackTrigger打电话给你的OK按钮的点击事件异步

例如

<asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" PopupControlID="UpdatePanel1" TargetControlID="lbProductForm" DropShadow="true" BackgroundCssClass="modalBackground" CancelControlID="btnCancel1" PopupDragHandleControlID="Panel1" OnOkScript="onOk()"> 

<asp:UpdatePanel ID="UpdatePanel1" CssClass="popup" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false"> 
        <ContentTemplate> 
       <fieldset> 

       <table> 
        <tr> 
         <td>Product Form Name: 
         </td> 
         <td> 
          <asp:TextBox ID="txtProductFormName" runat="server"></asp:TextBox> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <asp:Button ID="btnProdFormName" runat="server" Text="Enter" Style="margin-left: 100px" OnClick="btnProdFormName_Click" /> 
         </td> 
         <td> 
          <asp:Button ID="btnCancel1" runat="server" Text="Cancel" /> 
         </td> 
        </tr> 
       </table> 
        </fieldset> 
      </ContentTemplate> 

<Triggers> 
     <asp:AsyncPostBackTrigger ControlID="btnProdFormName" EventName="Click" /> 
</Triggers> 
      </asp:UpdatePanel> 

</asp:ModalPopupExtender>

来源

2014-09-24 01:22:13 Sam

嗨，如果这个答案有帮助，请投票并接受它。干杯! – Sam 2014-12-09 22:20:21

如何使用更新面板的模式弹出式扩展器

回答

相关问题