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添加加载程序 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 onload

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

按下按钮时的jquery

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

完成点击程序后

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

用这种方式用户将点击一次。程序完成后，仅按下它。

Answer 2

您可以将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

，则应用相同的想法

阻止gridview内的按钮使用javascript回发

2 个答案: