Home > AJAX, ASP.Net, Javascript > AutoComplete with HttpRequest from DataBase

AutoComplete with HttpRequest from DataBase


Hi

try this Example using Northiwind database that user enter ProductId in TextBox and click on Button

to get Product Name

Step1 :- Create Default.aspx page

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>Untitled Page</title>
    <script language="javascript" type="text/javascript">
var xmlHttp;
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}
//--------------------------
function stateChanged()
{
if (xmlHttp.readyState==4)
{
//alert(xmlHttp.responseText);
document.getElementById("Text1").value=xmlHttp.responseText
document.getElementById("dd").innerText =  ""
}
}
//----------------------------
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("Text1").innerHTML="";   
  return;
  }
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
  document.getElementById("dd").innerText =  "Loading >>>>"
var url="Default2.aspx";
url=url+"?id="+str;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);

}
</script>
</head>
<body>
    <form id="form1" runat="server">
        Please Enter Producr Id :-
    <input name="Text1" id="Text1" type="text" />
    <div id="dd"></div>
        <br />
        <input id="Button1" type="button" value="Get Product Name" onclick="showHint(document.getElementById('Text1').value)" />
    </form>
</body>
</html>

Step2 : Create Default2.aspx page

and in code behind

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //Response.Clear();
        Response.Cache.SetCacheability (HttpCacheability.NoCache);
         Response.Cache.SetExpires(DateTime.Now);
         string connectionstring = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
        SqlConnection conn = new SqlConnection();
        conn.ConnectionString = connectionstring;
        conn.Open();
        SqlCommand comm = new SqlCommand("select ProductName from Products where ProductId = @ProductId", conn);
        comm.Parameters.Add("@ProductId", SqlDbType.Int).Value = Request.QueryString["id"].ToString();
        Response.Clear();
        Response.Write(comm.ExecuteScalar());
        conn.Close();
        Response.End();
    }

}

Hope this helps

Good Luck

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: