Dynamically Bind Data to HTML5 Datalist using Asp.Net DataTable – C# and Vb.Net

← PrevNext →

The HTML5 Datalist element is an alternative to many JavaScript driven AutoComplete widgets. In one of my previous article, I have briefly explained about HTML5 Datalist element. It would be worth reading.

Dynamic Data Binding of HTML5 datalist using Asp.Net

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.

The Markup
<!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>
Code Behind (C#)
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]);
        }
    }
}
Vb.Net
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 Class
Conclusion

Using 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.

That's it. Thanks for reading.

← PreviousNext →