Question

我有一个网页，其中包含下拉列表，Linkbutton和ModualPopupExtender。在modualpopupextender的面板内部是一个文本框和一个“确定”按钮和一个“取消”按钮。

所以当用户点击链接按钮时会出现弹出式面板并且用户在文本框中输入一个字符串。然后，用户单击“确定”按钮，弹出窗口消失，弹出文本框中输入的字符串现在位于下拉文本中。

问题在于，当用户点击“确定”按钮时，页面会进行回发，并且屏幕会变黑一秒，然后网页会显示下拉文本中的字符串。

我想使用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

请让我知道我做错了什么。

谢谢

Answer 1

将UpdatePanel置于ModalPopupExtender控制范围内并使用AsyncPostBackTrigger异步拨打确定按钮的点击事件

E.g。

<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>

如何使用带有更新面板的模态弹出扩展器

1 个答案: