如何使用更新面板的模式彈出式擴展器

我有一個網頁有一個下拉列表，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

如何使用更新面板的模式彈出式擴展器

回答

相關問題