Unable to add rows to datatable, datatable is nothing error - vb.net

Question

I am not really sure what went wrong, i declared dt on top as a class variable then declare it as new datatable in fill function used in pageload but when i pressed buttonadd, dt is nothing error pops up.
Private dt As DataTable
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
fill()
End If
End Sub
Protected Sub fill()
dt = New DataTable
dt.Columns.Add("Status", GetType(String))
End Sub
Protected Sub btnadd_Click(sender As Object, e As EventArgs) Handles btnadd.Click
Dim R As DataRow = dt.NewRow
R("Status") = "Pending"
dt.Rows.Add(R)
'dt.Rows.Add("pending")
GridView1.DataSource = dt
GridView1.DataBind()
End Sub

Answer 1

The key concept is that web pages are "state-less".
That means for each event code stub, then the code is starting over from scratch.
And it means for each browser round trip, then the browser code starts from scratch EACH time. So, you only load up the data table one time (first time - this is GOOD!!!).
The problem of course, without a control on the web page. (say a data grid), or say a simple text box? Those controls survive that so called round trip. The MOST important concept, and if were going to learn ONE thing about asp.net web pages?
You must grasp the round trip concept, and the so called page state.
So, what happens in your case?
First time - page loads - code runs server side (often called code behind).
Your form instance class is created, your load event runs, you load up the table. The browser is THEN send down to the client side. The web page is just sitting here. Maybe you close the browser. Maybe you un-plug your computer. The server does not know, or care about this. In fact, the server does NOT even know the web page exists anymore!!!
So, your web page is sitting here, and you click on that button.
The web page is now sent up to the server, and the code behind starts running - but it STARTS FROM FRESH scratch each time!
So your form level variable called "data table" does NOT exist any more and does NOT have a value.
So, there are several solutions here. For starters, we need that "table" to persist and survive the rounds trip. As noted, most controls you drop into that page WILL keep their values. This is called the "viewstate". So, if we want that data table to survive and "exist" the next time the user does something? Then we need to save or persist that table variable.
Another way? You can use what is called the session(). Session() is a attempt and system to allow use to shove values into Session(). And the session() survives round trips.
Now, given your example?
Well, then our code would become this:
Private dt As DataTable
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
fill()
Session("MyCoolTable") = dt
else
' this is a page post back - re-load the active table into our
' forms level dt.
dt = Session("MyCoolTable")
end if
In a lot of cases, I would assume the table that drives the grid is a database. And thus I would add the row to the database, and then re-bind the data grid.
But the above use of session() will persist the dt table for you.