Shining Star Services LLC
C# and VB Project: A Tutorial Using Data Sets, Table Adapters, WebForms, Controls, File Upload, Excel Import
Section 2: WebForm: Table, Label, and Panel Controls
by Nannette Thacker

In this section, we will learn how to work with our webform and define the properties of an ASP.NET Table control to layout our buttons. We will learn how to add controls for Buttons, Panels and Labels.

Our WebForm Table Control

For our project, we're going to need to set up a table with 3 columns, in order to lay out our 3 buttons.




Let's drag a ASP.net Table control into our webform. Our finished Table will look like this:

<asp:Table ID="TableButtons" runat="server">
            <asp:TableRow ID="TableRow1" runat="server">
                <asp:TableCell ID="TableCell1" runat="server">
                </asp:TableCell>
                <asp:TableCell ID="TableCell2" runat="server">
                </asp:TableCell>
                <asp:TableCell ID="TableCell3" runat="server">
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>
However, let's learn how to create a table using the Design mode. Get the table rows by clicking the "Rows" property "..." button.



This will open the "TableRow Collection Editor" allowing you to add rows and set the table row properties. You may select the "Cells" property and click the "..." button to add cells.



Here we are going to add three cells.



For a more indepth review of the table control, please see my article on HTML Tables to ASP.net Table Controls.

Our WebForm Button Controls

We will add three buttons to our table. One button to upload the Excel spreadsheet, another to view the contents of the spreadsheet, and another to import the data from the file to the database table.

Now you may drag a button into one of the cells. We're going to name it "ButtonUpload" and set the text to "Upload Excel Spreadsheet." Add two more buttons: ButtonView for "View Excel Data" and ButtonImport for "Import Excel Data."

<asp:Table ID="TableButtons" runat="server">
            <asp:TableRow ID="TableRow1" runat="server">
                <asp:TableCell ID="TableCell1" runat="server">
                    <asp:Button ID="ButtonUpload" runat="server" 
                    Text="Upload Excel Spreadsheet" />
                </asp:TableCell>
                <asp:TableCell ID="TableCell2" runat="server">
                    <asp:Button ID="ButtonView" runat="server" 
                    Text="View Excel Data" />
                </asp:TableCell>
                <asp:TableCell ID="TableCell3" runat="server">
                    <asp:Button ID="ButtonImport" runat="server" 
                    Text="Import Excel Data" />
                </asp:TableCell>
            </asp:TableRow>
        </asp:Table>

Our WebForm Panel Controls

Panels in web pages allow you to set the visibility to display or hide the content within the panel as needed. In our application, based on the button that is clicked we want to display one of three panels. We are now going to set up panel containers for the code that will be displayed when processing each of our buttons. We will initially hide these panels and set them to display only when a button is pressed.

Drag three Panels from the toolbox to just below your table.



Name your panels "PanelUpload," "PanelView" and "PanelImport." Set the Visible property for each to "False."




Now we're ready to look at Section 3: FileUpload Control and Functionality.

May your dreams be in ASP.NET!

Nannette Thacker

C# and VB Project: Importing an Excel Spreadsheet to a Database Using Data Sets and Table Adapters:

Introduction: C# and VB Project: A Tutorial Using Data Sets, Table Adapters, WebForms, Controls, File Upload, Excel Import
Section 1: Creating Our Project, Database and Tables
Section 2: WebForm: Table, Label, and Panel Controls
Section 3: FileUpload Control and Functionality
Section 4: Auto Formatting a Web Form GridView
Section 5: Bind the Excel Data to a GridView using an OleDbDataAdapter
Section 6: Data Access Layer DataSet TableAdapters
Section 7: TableAdapter Select and Insert Queries with Parameters
Section 8: Using an OleDbDataReader to Retrieve Our Data
Section 9: Using our TableAdapters, DataTables and Intellisense

Download the ZIP files:

C#: ShiningStarCExcel.zip
VB: ShiningStarVBExcel.zip

About the Author

Nannette Thacker is an ASP.NET web application developer and SQL Server developer. She is owner of the ASP.NET consulting firm, Shining Star Services, LLC in Kansas City. Nannette specializes in ASP Classic to ASP.NET conversions and custom Membership Provider solutions as well as existing or new ASP.NET development. Nannette's many articles on ASP.NET, ASP Classic, Javascript and more may be read at http://www.shiningstar.net. You may also view her http://weblogs.asp.net/nannettethacker/ web blog.

© Copyright 1997-2017 Shining Star Services LLC, Nannette Thacker. All Rights Reserved.