Introduction:
Here I will explain how to display data from database in HTML Table in asp.net using c# and vb.net or show data in HTML table from database using asp.net in c# and vb.net.
Description:
In previous articles I explained jQuery play youtube videos in asp.net, Access HTML selected value from dropdownlist in asp.net, Remove tab index or tab focums for HTML elements in asp.net and many articles relating to HTML, asp.net, c#,vb.net and jQuery. Now I will explain how to display data from database in HTML Table in asp.net using c# and vb.net.
In previous articles I explained jQuery play youtube videos in asp.net, Access HTML selected value from dropdownlist in asp.net, Remove tab index or tab focums for HTML elements in asp.net and many articles relating to HTML, asp.net, c#,vb.net and jQuery. Now I will explain how to display data from database in HTML Table in asp.net using c# and vb.net.
Asp.net
controls
like the gridview are processed on the server and then the results
are translated into HTML and JavaScript
before it is sent to the browser. An html
table can be read directly by a browser, so there is no need to translate it.
So
directly using HTML table for displaying data from database is most
effective rather than gridview
in terms of Performance.
But
for some operations like sorting, searching we should prefer GridView or some
other server side data controls.
Before
implement this example first design one table UserInfo in your database as
shown below
Column Name
|
Data Type
|
Allow Nulls
|
ID
|
Int(Set
IDENTITY Property =TRUE)
|
Not
Null
|
Name
|
varchar(50)
|
Yes
|
MobileNo
|
varchar(50)
|
Yes
|
EmailId
|
varchar(50)
|
Yes
|
Once
table created in database enter some dummy data to test application that would
be like as shown below
 |
Now
open your aspx page and write the following code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Display Data from Database in HTML Table in asp.net</title>
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:PlaceHolder id="PlaceHolder1"
runat="server"></asp:PlaceHolder>
</div>
</form>
</body>
</html>
|
If you observe above code we added PlaceHolder that will
acts content holder for our html content
Now open code behind file and add following
namespaces
C#
Code
using System;
using System.Data;
using System.Data.SqlClient;
using System.Text;
using System.Web.UI.WebControls;
|
VB.NET
Imports System.Data
Imports System.Data.SqlClient
Imports System.Text
Imports System.Web.UI.WebControls
|
After that add following code to export datagridview
data to excel
C#
Code
SqlConnection scon = new SqlConnection("Data
Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB");
StringBuilder htmlTable = new
StringBuilder();
protected void
Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
using (SqlCommand
scmd = new SqlCommand())
{
scmd.Connection = scon;
scmd.CommandType = CommandType.Text;
scmd.CommandText = "SELECT
* FROM UserInfo";
scon.Open();
SqlDataReader articleReader = scmd.ExecuteReader();
htmlTable.Append("<table
border='1'>");
htmlTable.Append("<tr><th>SlNo.</th><th>Name</th><th>Mobile
Number</th><th>EmailId</th></tr>");
if (articleReader.HasRows)
{
while (articleReader.Read())
{
htmlTable.Append("<tr>");
htmlTable.Append("<td>"
+ articleReader["ID"]+ "</td>");
htmlTable.Append("<td>"
+ articleReader["Name"] + "</td>");
htmlTable.Append("<td>"
+ articleReader["Mobno"] + "</td>");
htmlTable.Append("<td>"
+ articleReader["EmailId"] + "</td>");
htmlTable.Append("</tr>");
}
htmlTable.Append("</table>");
PlaceHolder1.Controls.Add(new Literal {
Text = htmlTable.ToString() });
articleReader.Close();
articleReader.Dispose();
}
}
}
}
|
VB.NET
Imports System.Data
Imports System.Data.SqlClient
Imports System.Text
Imports System.Web.UI.WebControls
Partial Class VBCode
Inherits System.Web.UI.Page
Private scon As New SqlConnection("Data
Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB")
Private htmlTable As
New StringBuilder()
Protected Sub
Page_Load(ByVal sender As Object, ByVal e As
EventArgs) Handles Me.Load
If Not IsPostBack Then
Using scmd As New SqlCommand()
scmd.Connection = scon
scmd.CommandType = CommandType.Text
scmd.CommandText = "SELECT
* FROM UserInfo"
scon.Open()
Dim articleReader As
SqlDataReader = scmd.ExecuteReader()
htmlTable.Append("<table
border='1'>")
htmlTable.Append("<tr><th>SlNo.</th><th>Name</th><th>Mobile
Number</th><th>EmailId</th></tr>")
If articleReader.HasRows Then
While articleReader.Read()
htmlTable.Append("<tr>")
htmlTable.Append("<td>"
& Convert.ToString(articleReader("ID"))
& "</td>")
htmlTable.Append("<td>"
& Convert.ToString(articleReader("Name"))
& "</td>")
htmlTable.Append("<td>"
& Convert.ToString(articleReader("Mobno"))
& "</td>")
htmlTable.Append("<td>"
& Convert.ToString(articleReader("EmailId"))
& "</td>")
htmlTable.Append("</tr>")
End While
htmlTable.Append("</table>")
PlaceHolder1.Controls.Add(New Literal() With
{ _
Key .Text = htmlTable.ToString() _
})
articleReader.Close()
articleReader.Dispose()
End If
End Using
End If
End Sub
End Class
|
Now run your code and check output that will be like as
shown below
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
7 comments :
in which case we use html directory table
Thank you very much brother... keep it up..God bless u (y)
How to declare PlaceHolder1 in vb.net program
Sir can u please tell how to adda dropdown list to the HTMS table and bind data from database?
Thanks in advance.
sir how to edit,delete records in this table and database.
Thanks in advance.
it shows my data.
But problem is my table design is broken.
Like right side bootstrap paging, search option etc.
is there any solution
Good
Note: Only a member of this blog may post a comment.