How to use HTML 5 Datalist Control in ASP.NET / jQuery

Gohil Jayendrasinh
May 15, 2012
21.4k
0
0
Article

HTML 5 support the Datalist Control. You can use a Datalist Contrl on your ASP.NET Page for a searchable TextBox.

Here I give an example of a searchable Textbox using jQuery / HTML 5.

Your .aspx page would be like:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DatalistHTML5.aspx.cs"
Inherits="testHTML5.DatalistHTML5" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Datalist HTML 5 Example</title>
    <script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
    <script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $.post('DatalistHTML5.ashx', function (data) {
                $('#student').html(data);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       Student Name: <input list="student" id="studentlist" runat="server"/>
        <datalist id="student">

        </datalist>
        <br />
    </div>
    <asp:Button ID="btnsave" runat="server" onclick="btnsave_Click" Text="Save" />
    </form>
</body>
</html>

Call the handler with the post method of jQuery

You Handler like would look like:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace testHTML5
{
    /// <summary>
    /// Summary description for DatalistHTML51
    /// </summary>
    public class DatalistHTML51 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Clear();
            context.Response.Write(BindStudentlist());
            context.Response.End();
        }

        private string BindStudentlist()
        {
            //Use you Database logic .
            System.Text.StringBuilder stdlist = new System.Text.StringBuilder();

            stdlist.Append("<option value='Ajay'>");
            stdlist.Append("<option value='Amit'>");
            stdlist.Append("<option value='Binal'>");
            stdlist.Append("<option value='Dilip'>");
            stdlist.Append("<option value='Jayendra' >");
            stdlist.Append("<option value='Jignesh' >");
            stdlist.Append("<option value='Vinod'>");
            return stdlist.ToString();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Your .cs file Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace testHTML5
{
    public partial class DatalistHTML5 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsCallback)
            {

            }
        }

        protected void btnsave_Click(object sender, EventArgs e)
        {
            string carvalue = Request.Form["studentlist"];
        }
    }
}