In this tutorial, we will show you how to display data from a database in VB.NET. The Repeater control is a loop that will display any information bound to the control. The Panel control allow you to temporarily hide information from your viewer. We will combine these controls to create a table of data with buttons to hide/show each column.
In general, information from a database is normally displayed with the Repeater control. The Panel control is similar to the PlaceHolder control and allows ASP.NET to modify the content, design, and visibility of each Panel. First, we will show you how to use the repeater to display information from a database. Secondly, we will show you how to use buttons to toggle the visibility of each panel that contains the database data.
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.
First you can start a new Web Application in Visual Studio 2008. Now right-click on the App_Data folder and add a SQL Database. For our example we will add a Table fruit to the database with the columns Name varchar(50) and Color varchar(50). Now we can add some data to the table. Here is a visual example of our table.
| Name |
Color |
| Tomato |
Red |
| Orange |
Orange |
| Apple |
Red |
| Banana |
Yellow |
| Kiwi |
Green |
Now that we have created the table we will need to add the <asp:Panel> control to the aspx page. You can do this by adding it from the toolbox. We will add two panels; one for each column. We will also add a button before each panel that we will later use to toggle the visibility settings.
|
<form id="form1" runat="server">
<div style="float:left;">
<asp:Button ID="Button_name" runat="server" text="Hide Name" OnClientClick="Button_name_Click" />
<asp:Panel ID="Panel_name" runat="server">
<b>Name</b><br />
</asp:Panel>
</div>
<div style="float: left;">
<asp:Button ID="Button_color" runat="server" text="Hide Color" OnClientClick="Button_color_Click" />
<asp:Panel ID="Panel_color" runat="server">
<b>Color</b><br />
</asp:Panel>
</div>
</form> |
Currently, we have just placed text in each panel showing the name from each column in our table. Now we need to add functionality to each button so that the panel it controls will make it visible when it is invisible and invisible when it is visible. The text for each button will also change depending on what state the panel is in.
We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
You can go to the design view and double click each button or add the subs manually like below.
|
Protected Sub Button_name_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button_name.Click
If Panel_name.Visible = False Then
Panel_name.Visible = True
Button_name.Text = "Hide Name"
Else
Panel_name.Visible = False
Button_name.Text = "Show Name"
End If
End Sub
Protected Sub Button_color_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button_color.Click
If Panel_color.Visible = False Then
Panel_color.Visible = True
Button_color.Text = "Hide Color"
Else
Panel_color.Visible = False
Button_color.Text = "Show Color"
End If
End Sub |
The subs are nearly identical with the exception that each controls a different panel and button.
Now we need to display the data from the database we entered previously. We will do this by placing a Repeater control in each Panel. Before we add the <asp:Repeater> tags, we will need to setup a DataSource for the Repeater control to pull from. This DataSource needs to contain the connection string to our database and the query string we will be using for the Repeater controls. The SqlDataSource control can be added from the toolbox.
|
<asp:SqlDataSource ID="SqlDataSource_fruit" runat="server"
ConnectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True" SelectCommand="SELECT * FROM fruit" />
<div style="float:left;">
<asp:Button ID="Button_name" runat="server" text="Hide Name" OnClientClick="Button_name_Click" />
<asp:Panel ID="Panel_name" runat="server">
<b>Name</b><br />
<asp:Repeater ID="Repeater_name" runat="server" DataSourceID="SqlDataSource_fruit">
<ItemTemplate>
<%#Eval("name")%><br />
</ItemTemplate>
</asp:Repeater>
</asp:Panel>
</div>
<div style="float: left;">
<asp:Button ID="Button_color" runat="server" text="Hide Color" OnClientClick="Button_color_Click" />
<asp:Panel ID="Panel_color" runat="server">
<b>Color</b><br />
<asp:Repeater ID="Repeater_color" runat="server" DataSourceID="SqlDataSource_fruit">
<ItemTemplate>
<%#Eval("color")%><br />
</ItemTemplate>
</asp:Repeater>
</asp:Panel>
</div> |
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!
Notice each Repeater control has a DataSourceID attribute linking to the <asp:SqlDataSource> tag we created above. It is important to remember that the column reference for each row of data needs to be placed inside of the <ItemTemplate> tags. The only difference between the two repeaters is the column reference in the Eval function. This is required so that we only pull the names for one repeater, and colors for the second.
Now the page will display a list of names and colors. Each column will contain a button at the top to either hide or unhide the column data.
Looking for more ASP.NET Database Tutorials? Click Here!