删除动态创建的 HTML 表格行 - 生命周期/视图状态问题

Question

so i have an HTML table with dynamically added rows and ASP.NET text boxes. I have the rows and controls re-instantiated on page_load if the viewstate[dataonpage] = true, and I'm declaring it as true in the method that adds the rows and controls. (I need them to persist on other postbacks)

The problem is that I'm now I've added a CLEAR button that removes all of the html rows (excluding the headers) when it's clicked, and for some reason on button click it gets an index error, or if using Try/Catch it only removes half of the rows (every other row). I believe the problem is something to do with that the viewstate[dataonpage] is still "true", and the data is being re-added on page load. If i add viewstate["dataonpage"] = "false" into the clear button method, the same happens but at least this way on the second click it removes the second half of the rows.

I understand this happens because the button event handler isn't fired until after the page_load which is why it doesn't work on the first click. But what I don't fully understand is why even without this my clear button code doesn't clear all of the rows in the first place.

Any help on understanding why it doesn't work, and a work around will be greatly appreciated!

protected void Page_Load(object sender, EventArgs e)
        {
            if (Convert.ToString(ViewState["DataOnPage"]) == "true")
                {
                    Getmarketdata();
                }
        }

protected void Getdatabtn_Click(object sender, EventArgs e)
        {
            ViewState["DataOnPage"] = "true";
            Getmarketdata();
        }

Below is method that creates adds table rows and controls:

public void Getmarketdata()
        {
            String url = "https://api.rightmove.co.uk/api/rent/find?index=0&sortType=1&maxDaysSinceAdded=" + Dayssinceuploadtext.Text + "&locationIdentifier=OUTCODE%5e" + Outcodetext.Text + "&apiApplication=IPAD";
            Response.Write(url);

            using (var webclient = new WebClient())
            {
                String Rawjson = webclient.DownloadString(url);
                    ViewState["VSMarketDataJSONString"] = Rawjson;
                dynamic dobj = JsonConvert.DeserializeObject<dynamic>(Rawjson);
                int NoOfHouses = dobj["properties"].Count;
                Response.Write("<br />" + NoOfHouses);
                for (int i = 0; i < NoOfHouses; i++)
                {
                    System.Web.UI.HtmlControls.HtmlTableRow tRow = new System.Web.UI.HtmlControls.HtmlTableRow();
                    GeneratorTable.Rows.Add(tRow);
                    String RMlink = String.Format("https://www.rightmove.co.uk/property-to-rent/property-" + dobj["properties"][i]["identifier"].ToString()) + ".html";
                    HyperLink hypLink = new HyperLink();
                    hypLink.Text = dobj["properties"][i]["identifier"].ToString();
                    hypLink.Target = "_blank";
                    hypLink.NavigateUrl = RMlink;
                    using (System.Web.UI.HtmlControls.HtmlTableCell tb1 = new System.Web.UI.HtmlControls.HtmlTableCell())
                    {
                        tRow.Cells.Add(tb1);
                        tb1.Controls.Add(hypLink);
                    }
                    using (System.Web.UI.HtmlControls.HtmlTableCell tb2 = new System.Web.UI.HtmlControls.HtmlTableCell())
                    {
                        TextBox tbEPCe = new TextBox();
                        tRow.Cells.Add(tb2);
                        tb2.Controls.Add(tbEPCe);
                        String txtboxID = (("EPCETxtBox") + i);
                        tbEPCe.ID = txtboxID;
                        tbEPCe.Style.Add("background", "none"); tbEPCe.Style.Add("border", "1px solid black"); tbEPCe.Style.Add("border-radius", "2px");
                    }
                    using (System.Web.UI.HtmlControls.HtmlTableCell tb3 = new System.Web.UI.HtmlControls.HtmlTableCell())
                    {
                        TextBox tbEPCp = new TextBox();
                        tRow.Cells.Add(tb3);
                        tb3.Controls.Add(tbEPCp);
                        String txtboxID = (("EPCPTxtBox") + i);
                        tbEPCp.ID = txtboxID;
                        tbEPCp.Style.Add("background", "none"); tbEPCp.Style.Add("border", "1px solid black"); tbEPCp.Style.Add("border-radius", "2px");

                    }
                    using (System.Web.UI.HtmlControls.HtmlTableCell tb4 = new System.Web.UI.HtmlControls.HtmlTableCell())
                    {
                        TextBox tbBbl = new TextBox();
                        tRow.Cells.Add(tb4);
                        tb4.Controls.Add(tbBbl);
                        String txtboxID = (("BblTxtBox") + i);
                        tbBbl.ID = txtboxID;
                        tbBbl.Style.Add("background", "none"); tbBbl.Style.Add("border", "1px solid black"); tbBbl.Style.Add("border-radius", "2px");
                    }
                }
            }
        }

Below is clear table rows method: (this is the one that isn't working)

public void ClearTableRows()
        {
            System.Web.UI.HtmlControls.HtmlTable Htmlgeneratortable = ((System.Web.UI.HtmlControls.HtmlTable)GeneratorTable);
            int NoOfRows = Htmlgeneratortable.Rows.Count;
            for (int j = 1; j < NoOfRows; j++)
            {
                try
                {
                    Htmlgeneratortable.Rows.RemoveAt(j);
                }
                catch
                { }
            }
        }

Answer 1

I'm going to explain what's going on as you have the code written now; I don't have faith in my ability to provide an answer including the exact code changes to be made, so here is what is wrong with your current approach:

Your table, GeneratorTable exists for all clients. That doesn't mean every time someone navigates to your website a table is generated, it means that there is one table, and every client that logs in is getting that one table.

So if you add rows to it for one client, then send the table to another client, both clients will see the same table (with the rows added).

The problem is that emptying out a table is logic that has nothing to do with your back-end server. There's no reason for your server to be handling emptying a table, your server should only handle page navigations and AJAX calls pretty much, it shouldn't be changing how the webpage looks, because the server can only respond to each client one time.

What's the point in responding to a client with GeneratorTable and then updating GeneratorTable on the server? The client will never see the updates made to the table unless they're resent from the server.

You stated that you are new to this and need to learn about JS and client-side, this exercise should serve as an example of why you need to put certain code on the front-end and some code on the back-end, as there isn't really an elegeant way to do what you're looking to do with just the server.