Apsx.net C# Prevent Page reload on button click

Question

Hope you can help.

I have aspx web application, which has a list populated from SQlite which is stored for mobile numbers

I have a button, which i lets me enable / disable a textbox - which all works.

Now, when I filter the view and click on "Edit" the page reloads.

The button/textbox is dynamically created from SQLite.

          TextBox NES_editText = new TextBox();
                        NES_editText.CssClass = "editText";
                        NES_editText.Enabled = false;
                        NES_editText.Text = SQLReader["simName"].ToString();
                        NES_editText.ID = 300 + SQLReader["simNESID"].ToString();                            
                        Sim_Rows.Controls.Add(NES_editText);
                        Sim_Rows.Controls.Add(new LiteralControl("</div>")); // COL 2                                                    
                        Sim_Rows.Controls.Add(new LiteralControl("<div class=\"col col-3\" data-label=\"Edit Name\">"));
                        Button editButton = new Button();
                        editButton.CssClass = "editButton";
                        editButton.ID = SQLReader["simNESID"].ToString();                            
                        editButton.Click += new EventHandler(EditButton_Click);                         

                        Sim_Rows.Controls.Add(editButton);
                        Sim_Rows.Controls.Add(new LiteralControl("</div>")); // COL 3    

Here is my edit button code

private void EditButton_Click(object sender, EventArgs e)
    {
        Button NES_Edit = sender as Button;
        //TextBox NES_Text = new TextBox();

        String TxtID;

        //Response.Write(NES_Edit.ID);

            foreach (Control obj in Sim_Rows.Controls)
            {
                if (obj is TextBox)
                {
                    TxtID = obj.ID.Substring(3);
                    if (NES_Edit.ID == TxtID)  
                    {   
                        if (((TextBox)obj).Enabled == false)
                        {
                            ((TextBox)obj).Enabled = true;
                            ((TextBox)obj).Style.Add("border-bottom", "1px solid #000");
                            ((TextBox)obj).Style.Add("width", "270px");
                            NES_Edit.CssClass =  "button_enabled";
                            //Response.Write(NES_Edit.ID);
                            break;
                        }
                        else
                        {

                            ((TextBox)obj).Enabled = false;
                            ((TextBox)obj).Style.Remove("border-bottom");
                            NES_Edit.CssClass = "editButton";


                            SQL = "UPDATE Sims SET simName = @simName WHERE simNESID =" + NES_Edit.ID;

                            using (SQLiteConnection SQLCon = new SQLiteConnection(ConnectionString))
                            {

                                SQLiteCommand SQLCmd = new SQLiteCommand(SQL, SQLCon);
                                SQLCmd.Parameters.AddWithValue("@simName", ((TextBox)obj).Text );


                                try
                                {
                                    SQLCon.Open();
                                    SQLCmd.ExecuteNonQuery();

                                }
                                catch (SQLiteException Ex)
                                {
                                    Response.Write(Ex.Message);
                                }
                                SQLCon.Close();

                                // SEND EMAIL
                            }

                            break;

                        }



                    }

            }
        }



    }

When I filter the view, and i have two results and click on the edit, the page reloads.

Any way to stop that?

Answer 1

Sadly, when Microsoft released the framework they had the notion that a web application should work like a desktop application. This notion conflicted with protocol in which a web application is built upon. The web should embody a stateless architecture, but Microsoft's Web Form framework is driven by state.

The above is how a page inherently will work. So when you hit a button, the events will be resequenced and executed. In this case, execute what is called a PostBack. When this occurs the server takes the event, then will render the page again.

To combat this nuisance, Microsoft introduced a control called an UpdatePanel . The panel will load the entire page state into memory, then once the page is rendered again, will display the modified portion within the control. This allows the state driven architecture to not convey to the client that the server is reserving the content.

<asp:UpdatePanel id="upExample" runat="server">
     <ContentTemplate>
          <asp:Label id="lblExample" runat="server" Text="Initial Load."></asp:Label>
     </ContentTemplate>
</asp:UpdatePanel>

<asp:Button id="btnExample" runat="server" OnClick="UpdateLabel_Click" Text="Update" />

Currently, every time the page initially loads you have the default state. But within an update panel we have content, but now when we trigger our button:

protected void UpdateLabel_Click(object sender, EventArgs e) => 
 lblExample.Text = $"Button clicked at: {DateTime.Now:MMMM dd, yyyy hh:mm:ss}";

You will notice the screen flicker has vanished, because the control within the UpdatePanel is the only portion of the page being rendered after the server event. The other approach, would be to use the Ajax approach and handler.

Hopefully this provides enough information to help you.