locked
preventing multiple clicks on image buttons inside a gridview in an update panel RRS feed

  • Question

  • User-1921563048 posted

    I have posted this in Web Forms Data Controls section, but it wasn't solved. And since this is related to partial postbacks, I am requesting here.

    I appreciate if someone can please help me with, preventing multiple clicks on image button that is in template field in a gridview that is inside an update panel. Do I need to add some code to any of the methods like add_initializeRequest, add_beginRequest?

    I have an update panel.

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

    In this update panel I have a gridview. 

    <asp:GridView ID="GridView1" 
                AutoGenerateColumns="False"  Width="100%" 
                runat="server" GridLines="None" OnRowDataBound="GridView1_RowDataBound" 
                OnRowCommand = "GridView1_RowCommand">

    In this gridview I have a Templatefield with Image button.

    <asp:TemplateField HeaderText="">
         <ItemTemplate>
            <asp:ImageButton ID="btnDelete" runat="server" CausesValidation="False" CommandName="DeleteSomething"                                    ImageUrl="delete.png" />
    </ItemTemplate>
    </asp:TemplateField>

    The update panel has trigger.

    <asp:AsyncPostBackTrigger ControlID = "GridView1" />

    So when page loads and data is loaded in grid view, there will be one image button for each row. And on each of these buttons I need to prevent multiple clicks. If btnDelete on Row2 is clicked it should delete the row2, and while the server is still processing the row deletion, it should prevent the user from clicking that button on row2 again. Or in other words clicking the same image button multiple times should not cause multiple partial postbacks.

    thank you in advance

    Tuesday, March 10, 2015 11:29 AM

All replies

  • User61956409 posted

    Hi,

    Thanks for your post.

    You could refer to the following sample to rebind your GridView after you delete the record.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <div>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="SqlDataSource1">
                            <Columns>
                                <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" />
                                <asp:BoundField DataField="Values" HeaderText="Values" SortExpression="Values" />
                                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                                <asp:TemplateField>
                                    <ItemTemplate>
                                        <asp:LinkButton ID="btndel" runat="server" OnClick="btndel_Click">Delete</asp:LinkButton>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [ChartInfo]"></asp:SqlDataSource>
    
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>
    </html> 
    
    protected void btndel_Click(object sender, EventArgs e)
    {
        string Id = ((sender as LinkButton).NamingContainer as GridViewRow).Cells[0].Text;
    
        SqlConnection conn = new SqlConnection("connectionstring");
    
        string sqlstr = "delete from ChartInfo where Id='" + Id + "'";
    
        SqlCommand comm = new SqlCommand(sqlstr,conn);
        conn.Open();
        comm.ExecuteNonQuery();
        conn.Close();
    
        SqlDataSource1.DataBind();
        GridView1.DataBind();
    
    }
    



    Best Regards,

    Fei Han

    Tuesday, March 10, 2015 10:31 PM
  • User-1921563048 posted

    Hello Fei Han,

    It's not about rebinding the gridview. Some customers of our site have very slow connections and they are clicking on the image buttons, multiple times and causing multiple postbacks. I need to prevent that. Something like below. 

    var lastPostBackElement = '';
    
         $(document).ready(function () {
             var prm1 = Sys.WebForms.PageRequestManager.getInstance();
             prm1.add_initializeRequest(initializeRequest);
             prm1.add_endRequest(endRequest);
             function initializeRequest(sender, args) {
                 if (prm1.get_isInAsyncPostBack()) {
                     if (args.get_postBackElement().id === lastPostBackElement) {
                         prm1.abortPostBack();
                     }
                 }
                 lastPostBackElement = args.get_postBackElement().id;
             }
             function endRequest(sender, args) {
                 lastPostBackElement = '';
             }

    I ma not sure if the above code is correct and prevent multiple postbacks as I am not able to recreate the issue as I have faster internet connection and and soon as I click the button ,the row is deleted. The better option would be, as soon as the user clicks on  Delete image button in any row in the gridview, the UI should be blocked with some progress bar and prevent the user from clicking anything on screen. How can I do this.

    thank you

    Wednesday, March 11, 2015 8:41 PM
  • User61956409 posted

    Hi,

    Have you tried my solution? Besides, if you worry about it will cause some error when users click the delete button more than once, you could check if the record exists in database before deleting it.

    Best Regards,

    Fei Han

    Tuesday, March 24, 2015 6:09 AM