The previous article that I mentioned above focused on HTML5 elements, useful for web developers, a question did arise on how we can bind HTML5 Datalist to a DataSource using code behind procedures.
The Datalist’s features are very basic, and there is no option (when I wrote this article) to bind it directly to a DataSource. We cannot style it either. However, I have found a quick workaround.
A Workaround
First, we will create a table using Asp.Net DataTable. The advantage of using a DataTable is that it is a temporary table. It is perfect of our example, because we need a single column table (with data) for the Datalist.
Later, we will loop through the DataTable rows and add values to the Datalist using its InnerHtml property.
<!DOCTYPE html>
<html>
<head>
<title>Populate Data in HTML5 datalist using Asp.Net DataTable</title>
</head>
<body>
<form id="form1" runat="server">
<div style="padding:10px 5px;
border:dashed 1px #CCC;
width:300px;font:15px Arial;">
Select Books <input list="books">
<datalist id="books" runat="server"></datalist>
</div>
</form>
</body>
</html>
using System;
public partial class _Default : System.Web.UI.Page
{
System.Data.DataTable mytable = new System.Data.DataTable();
protected void Page_Load(object sender, EventArgs e)
{
CreateBooksTable();
PopulateDataList();
}
private void CreateBooksTable()
{
System.Data.DataColumn tColumn = null;
// TABLE COLUMNS.
tColumn = new System.Data.DataColumn("Book ID", System.Type.GetType("System.String"));
mytable.Columns.Add(tColumn);
mytable.Rows.Add("Advanced Composite Material");
mytable.Rows.Add("Asp.Net 4 Blue Book");
mytable.Rows.Add("Teaching Science");
mytable.Rows.Add("Circuit Bending");
mytable.Rows.Add("ADOBE Premiere");
}
private void PopulateDataList()
{
for (int i = 0; i <= mytable.Rows.Count - 1; i++)
{
// ADD VALUES TO <datalist>.
books.InnerHtml = books.InnerHtml + System.Environment.NewLine +
String.Format("<option value='{0}'>", mytable.Rows[i][0]);
}
}
}
Option Explicit On
Partial Class _Default
Inherits System.Web.UI.Page
Dim mytable As New Data.DataTable()
Protected Sub form1_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Handles form1.Load
CreateBooksTable()
PopulateDataList()
End Sub
Private Sub CreateBooksTable()
Dim tColumn As Data.DataColumn ' TABLE COLUMNS.
tColumn = New Data.DataColumn("Books", System.Type.GetType("System.String"))
mytable.Columns.Add(tColumn)
mytable.Rows.Add("Advanced Composite Material")
mytable.Rows.Add("Asp.Net 4 Blue Book")
mytable.Rows.Add("Teaching Science")
mytable.Rows.Add("Circuit Bending")
mytable.Rows.Add("ADOBE Premiere")
End Sub
Private Sub PopulateDataList()
For i As Integer = 0 To mytable.Rows.Count - 1
'ADD VALUES TO <datalist>.
books.InnerHtml = books.InnerHtml & vbCrLf & _
[String].Format("<option value='{0}'>", mytable.Rows(i)(0))
Next
End Sub
End ClassUsing a similar principle, we can extract data from a database table by creating a dataset and fill the Datalist with the extracted values. An upgraded version of this element will not only eliminate the need for JavaScript or JQuery driven autocomplete widgets, also help developers to quickly add and bind the Datalist element with any DataSource.
Happy Coding. 🙂