Prevent Form Resubmit

Question

I've been looking for this answer for a couple weeks now but many other questions/answers don't fit my project or simply don't work.

Let me explain my project. It is a simple View Page which on page load it would set the Text to different fields throughout the page. On the bottom I have a container with buttons which control which div is displayed in the container. On each click of the button, I run some code to set data sources to grid views or fill fields with text. I noticed when I click F5 to refresh the page I get that pesky "form resubmission" popup which will cause the last button click such as appending a note to a listview to be duplicated.

Here is some code to understand what I am doing

HTML(Not complete, just necessary to understand my question)


    
    
    
    
    
    
    



    
        
            
                
                    
                        
                            
                                
                                
                                    
                                        
                                            
                                                
                                                
                                                
                                            
                                        
                                    
                                
                            
                        
                        
                            
                                
                                    
                                        <%# Eval("Note") %>
                                    
                                
                            
                            
                                >
                                    Document Attached : <%# Eval("Document_Title").ToString() %>
                                
                                >
                                    
                                
                            
                            
                                
                                    
                                        <%# Convert.ToDateTime(Eval("Created_DateTime")).ToShortDateString() + " " + Convert.ToDateTime(Eval("Created_DateTime")).ToShortTimeString() %>
                                    
                                
                                
                                    
                                        <%# Eval("Full_Name") %>
                                    
                                
                            
                            
                                
                            
                        
                    
                
            
        
        
            
                
                    
                        New Note

C# Codebehind

protected void Button_Sub_Menu_Notes_Click(object sender, EventArgs e)
{
    resetSubMenuButtons();
    Button_Sub_Menu_Notes.BackColor = System.Drawing.Color.Orange;
    Div_Sub_Menu_Notes.Visible = true;
    string bondID = Request.QueryString["BondID"];
    bindNotes(bondID);
}

protected void bindNotes(string bondID)
{
    DataTable dt = Common_Functions.GetData("SELECT * FROM View_Bond_Notes_With_Name WHERE Bond_ID='" + bondID + "' ORDER BY Created_DateTime DESC");
    LV_Notes.DataSource = dt;
    LV_Notes.DataBind();
}

protected void LV_Notes_PagePropertiesChanging(object sender, PagePropertiesChangingEventArgs e)
{
    (LV_Notes.FindControl("DataPager_Notes") as DataPager).SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
    string bondID = Request.QueryString["BondID"];
    bindNotes(bondID);
}

protected void LV_Notes_ItemCommand(object sender, ListViewCommandEventArgs e)
{
    if (String.Equals(e.CommandName, "View_Document"))
    {
        ListViewDataItem dataItem = (ListViewDataItem)e.Item;
        string documentID = e.CommandArgument.ToString();
        Session["BondDocumentID"] = documentID;
        Page.ClientScript.RegisterStartupScript(GetType(), "openDocument", "window.open('/FileServing/Bond_Document_Server.aspx');", true);
    }
}

protected void Button_Append_New_Note_Click(object sender, EventArgs e)
{
    string bondID = Request.QueryString["BondID"];
    string UserID = Request.Cookies["UserID"].Value;
    string newNote = TextArea_New_Note.Value;
    if (String.IsNullOrWhiteSpace(newNote))
    {
        return;
    }
    cmd = new SqlCommand("INSERT INTO Bond_Notes " +
        "(Bond_ID, Created_DateTime, Created_By, Note) " +
        "VALUES " +
        "(@Bond_ID, @Created_DateTime, @Created_By, @Note)", conn);
    cmd.Parameters.AddWithValue("@Bond_ID", bondID);
    cmd.Parameters.AddWithValue("@Created_DateTime", DateTime.Now);
    cmd.Parameters.AddWithValue("@Created_By", UserID);
    cmd.Parameters.AddWithValue("@Note", (String.IsNullOrWhiteSpace(newNote) ? (object)DBNull.Value : newNote));
    conn.Open();
    cmd.ExecuteNonQuery();
    conn.Close();
    TextArea_New_Note.Value = "";
    bindNotes(bondID);
}

So when the user clicks "Button_Append_New_Note", the code will fire to run the sqlcommand and then refreshes the ListView by calling the "bindNotes(bondID)". If the user clicks F5 or hits refresh for whatever reason, they are resubmitting that form and add duplicates. I've read many solutions to redirect to the same page, this will not work in my case since the div would be hidden again and I would prefer the Notes div to stay visible so the user can see their new note in the listview. I also prefer not to have an sql check to look for a duplicate and prevent an insert since I may want the user to insert duplicates if they chose to at another time, but the user would manually type in the duplicate.

Any recommendations or suggestions on how to avoid the form resubmission?

Also please no criticizing on the code, I am looking for answers, not a lecture on why its bad to build an SQL sentence with inline string addition. I will correct and optimize these faults eventually.

If you found my solution elsewhere, please ensure it would work in my case cause I have found my same question many times, but not with my scenario.

Thanks in advance.

user_5209322 · Answer

As you probably know, ASP.NET Web Forms send POST requests back to the server and then re-render the Page in the same request. This is why we see the form re-submission message when we click "reload".

To avoid this issue, we should employ the post-then-redirect pattern used by many web applications. Here's a quick overview:

A user clicks a button which submits the form as a POST request.
The server receives the request and saves the data.
The server issues a redirect response along with any needed state.
The browser receives the redirect and loads the appropriate page by sending a GET request.

Because we redirect the browser to a new (or the same) location, this clears the POST data from the previous request so we can hit "reload" without re-submitting the same data again. The URL that we redirect to should contain only the data needed for the server to interpret what to display on the page. This pattern provides a durable way to maintain state between requests in HTTP.

To apply this to the Web Form in the question, we need to change some assumptions about how the page loads. Instead of binding the notes to the page after running each POST action, we'll redirect the user first, and then bind the notes:

protected void Button_Append_New_Note_Click(object sender, EventArgs e)
{
    string bondID = Request.QueryString["BondID"];

    // Save the new note...

    Response.Redirect("http://example.com/Page.aspx?BondID=" + bondID);
}

Then, when the browser loads the redirect:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        bindNotes(Request.QueryString["BondID"]); 
    }
}

We'll need to change each of the post-back methods to use this pattern. Some of the methods may need to add additional parameters to the redirect URL that the page reads to configure the display.

user_16641227 · Answer

This is quite easy and blocks the pop up asking for form resubmission on refresh once the form is submitted. Just place this line of javascript code at the footer of your file and see the magic.

Prevent Form Resubmit

2 Answers