防止gridview中的按钮使用javascript回发

Question

我有使用模板的gridview，我在模板中有两个按钮。这是我的gridview代码：

      <asp:GridView ID="gvtransaction" runat="server" AutoGenerateColumns="False" Width="60%">
            <Columns>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Label ID="lblid" runat="server" Text='<%# Bind("id") %>' Visible="false"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Consumer">
                    <ItemTemplate>
                        <asp:Label ID="lblfirstname" runat="server" Text='<%# Bind("FirstName") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <asp:Label ID="lbllastname" runat="server" Text='<%# Bind("LastName") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Amount">
                    <ItemTemplate>
                        <asp:Label ID="lblamount" runat="server" Text='<%# Bind("Amount") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Label ID="lblcurrencyID" runat="server" Text='<%# Bind("CurrencyID") %>' Visible="false"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Account Name">
                    <ItemTemplate>
                        <asp:Label ID="lblcurrencyname" runat="server" Text='<%# Bind("CurrencyName") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Status">
                    <ItemTemplate>
                        <asp:Label ID="lblstatus" runat="server" Text='<%# Bind("Status") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="DateCreated">
                    <ItemTemplate>
                        <asp:Label ID="lbldatecreated" runat="server" Text='<%# Bind("DateCreated") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Button ID="btnApprove" runat="server" Text="Approve" CommandName="Select" OnClick="btnApprove_Click" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Button ID="btnReject" runat="server" Text="Reject" CommandName="Select" OnClick="btnReject_Click" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

现在我想要发生的是防止按钮（如果单击两次）回发。如果用户第二次点击按钮，当它看到该行的状态字段不等于挂起时，它不应该回发。我怎么能用jquery做到这一点。？我不知道如何编码。我读过的一些文章建议我应该使用 AJAX（我不知道如何编写 AJAX 代码）...... 请帮忙..

Answer 1

您可以使用javascript函数和表单上的属性来防止第二次提交。

<script type="text/javascript"> 
    // start with true to allow the first submit.
    var _fAllowToSubmit = true;
    // here we check if the form all ready have been submited
    function fAllowToSubmit() 
    {
        if(_fAllowToSubmit)
        {
          _fAllowToSubmit = false;
          return true;
        }
        else
        {
          alert("Please wait for the page to be updated");
          return false;
        }
     }
</script>

并将其添加到表单后面的代码中

Page.Form.Attributes["onsubmit"] = "return fAllowToSubmit();";

现在在每次调用时，标志都设置为 false，不会发生第二次点击。

如果你使用 UpdatePanel，同样的想法会有所不同：How to prevent double submit with jQuery in ASP.NET app with UpdatePanels

Answer 2

当按钮单击时，您可以通过 javascript 添加加载程序 css

.loader 
{    
position:   fixed;
z-index:    1000;
top:        0;
left:       0;
height:     100%;
width:      100%;
-moz-opacity:0.6; /* Mozilla */
opacity: 0.6; /* CSS3 */
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)'; /* first!*/
filter: alpha(opacity=40); /* second!*/    
background: #C0C0C0
            url('../images/Loader.gif')    
            50% 50%              
            no-repeat
 }

html

<div id="mask" class="loader">
</div>

jquery 加载

 $('#mask').css('display', 'none');

jquery 按下按钮

$('#mask').css('display', 'block');

完成点击程序后

$('#mask').css('display', 'none');

通过这种方式，用户将点击一次。程序完成后只会按它。