Here the GridView will be populated with data based on the values entered in the Textboxes on the Save Button click and retain the GridView data on post-back also.
- Go to Start, All Programs and open Microsoft Visual Studio 2013.
- Now, click File, then select New Project and click Visual C#. Then select ASP.NET Web Application, Empty and press OK.
- Provide the web application a name and location accordingly. I named my web application GridViewWithoutDBandStateMngmt.
- Now the project will open. Right-click on the web application name, add a New Item and select Web Form. Then click on Add.
- Drag and drop one button, three textboxes and one GridView control onto the WebForm1.aspx Page.
Now the WebForm1.aspx page will look like this in the Source View.
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="GridViewWithoutDBandStateMngmt.WebForm1" %>
-
- <!DOCTYPE html>
-
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <table>
- <tr>
- <td>Student ID:</td>
- <td>
- <asp:TextBox ID="txtStID" runat="server"></asp:TextBox>
- </td>
- </tr>
- <tr>
- <td>Student Name:</td>
- <td>
- <asp:TextBox ID="txtStName" runat="server"></asp:TextBox>
- </td>
- </tr>
- <tr>
- <td>Student Class:</td>
- <td>
- <asp:TextBox ID="txtStClass" runat="server"></asp:TextBox>
- </td>
- </tr>
- <tr>
- <td colspan="2" align="center">
- <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
- </td>
- </tr>
- </table>
- </div>
- <div>
- <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"
- GridLines="None">
- <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
- <EditRowStyle BackColor="#999999" />
- <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
- <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
- <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
- <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
- <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
- <SortedAscendingCellStyle BackColor="#E9E7E2" />
- <SortedAscendingHeaderStyle BackColor="#506C8C" />
- <SortedDescendingCellStyle BackColor="#FFFDF8" />
- <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
- </asp:GridView>
- </div>
- </form>
- </body>
- </html>
Now go to Design view and double-click on the Save Button and write the following code:
- protected void btnSave_Click(object sender, EventArgs e)
- {
- if (txtStID.Text != string.Empty && txtStName.Text != string.Empty && txtStClass.Text != string.Empty)
- {
- DataTable dt = new DataTable();
- dt.Columns.Add("Student ID");
- dt.Columns.Add("Student Name");
- dt.Columns.Add("Student Class");
-
- for (int row = 0; row < GridView1.Rows.Count; row++)
- {
- DataRow dr = dt.NewRow();
- dr[0] = GridView1.Rows[row].Cells[0].Text;
- dr[1] = GridView1.Rows[row].Cells[1].Text;
- dr[2] = GridView1.Rows[row].Cells[2].Text;
- dt.Rows.Add(dr);
- }
-
- dt.Rows.Add(txtStID.Text, txtStName.Text, txtStClass.Text);
- GridView1.DataSource = dt;
- GridView1.DataBind();
-
- txtStClass.Text = string.Empty;
- txtStID.Text = string.Empty;
- txtStName.Text = string.Empty;
- }
- }
Now run the application, the page will look as in the following:
Now enter details into the textboxes and click on the Save Button, the page will look as in the following:
Enter the details into the textboxes and click the Save Button, the page will look as in the following:
Similar to the preceding you can add other records.