Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Display Data in HTML Table from Database using Asp.net in C#, VB.NET

Dec 21, 2014
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.

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 RSS subscribe by email Subscribe by Email

7 comments :

Anonymous said...

in which case we use html directory table

Anonymous said...

Thank you very much brother... keep it up..God bless u (y)

Unknown said...

How to declare PlaceHolder1 in vb.net program

Anonymous said...

Sir can u please tell how to adda dropdown list to the HTMS table and bind data from database?
Thanks in advance.

ajay said...

sir how to edit,delete records in this table and database.
Thanks in advance.

Unknown said...

it shows my data.
But problem is my table design is broken.
Like right side bootstrap paging, search option etc.
is there any solution

Anonymous said...

Good

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.