如何在按钮单击时显示从服务器端弹出div

时间:2012-11-22 11:24:59

标签: c# asp.net

我正在处理付款页面,我想显示一个弹出窗口,显示您的付款正在处理的邮件。所以现在我使用CustomValidator和Submit Button。我希望在Args有效时显示此弹出窗口。我的代码是。

<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="" OnServerValidate="CustomValidator1_ServerValidate"
                                            EnableClientScript="true" ValidationGroup="Authorize"></asp:CustomValidator>

<asp:Button ID="SubmitButton" runat="server" Text="Pay now" CausesValidation="true" CssClass="blue paynow" style="width:200px;"
                                                ValidationGroup="Authorize" OnClick="SubmitButton_Click" OnClientClick="validate(ContentPlaceHolder1_chk_agree);" />

2 个答案:

答案 0 :(得分:1)

要在验证后显示消息框,您可以执行以下操作:
将以下javascript添加到您的<head>

<script language="javascript">
    function SubmitButton_ClientClick()
    {
       bool isValid = Page_ClientValidate("Authorize"); //triggers validation
       if (isValid)
       {
           alert('Your payment is processing');
       }

       return isValid;
    }
</script>

然后,按照以下方式更改按钮:

<asp:Button ID="SubmitButton" runat="server" Text="Pay now" CausesValidation="true" 
            CssClass="blue paynow" style="width:200px;"
            ValidationGroup="Authorize" OnClick="SubmitButton_Click"  
            OnClientClick="return SubmitButton_ClientClick();" />

更好的方法是使用弹出式div - 这是一个非常基本的例子:

<body>

中添加此内容
<div id="popup_box" style="height:300;width:300;position:absolute;top:150;left:350;border:3px solid red;background:#d8d8d8;display:none;">
    <h1>Payment is processing</h1>
    <button id="popupBoxClose" onclick="document.getElementById("popup_box").style.display = 'none';">Close</button>
</div>

并像这样修改SubmitButton_ClientClick

function SubmitButton_ClientClick()
{
   bool isValid = Page_ClientValidate("Authorize"); //triggers validation
   if (isValid)
   {
      document.getElementById("popup_box").style.display = '';
   }

   return isValid;
}

答案 1 :(得分:1)

更好的方法是使用“updateProgress”。

将提交按钮放在updatePanel中,并在updateProgress中放置一个加载的gif图片,当付款进度正在进行时,将在加载图片下方显示,并在付款完成后自动关闭。

enter image description here 正在加载....

<asp:UpdateProgress id="updateProgress" runat="server">
     <ProgressTemplate>
            <asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/images/loadingNew.gif" AlternateText="Loading ..." ToolTip="Loading ..."/>
     </ProgressTemplate>
</asp:UpdateProgress>
相关问题