Yasserzaid’s Weblog

December 5, 2009

AutoComplete from Database using JQuery

Filed under: ASP.Net, Jquery — yasserzaid @ 5:26 pm

Hi

try this example to make JQuery AutoComplete from Database

Step1 :-

First download the following files jquery.autocomplete.js and jquery.autocomplete.css 

Step2 :-

Open VS 2005 and create new website and add new Web page and Web.Config and WebHandler with name “AutocompleteData.ashx”

Step3 :-

In AutocompleteData.ashx add the following code :-

<%@ WebHandler Language="C#" >

using System;
using System.Web;
using System.Data.SqlClient;

public class AutocompleteData : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        string firstname = context.Request.QueryString["q"];
        string sql = "select top 10 FirstName from Employees where FirstName like '" + firstname + "%'";
        using (SqlConnection connection = new SqlConnection("Data Source=.;Initial Catalog=Northwind;Integrated Security=True"))       
        using (SqlCommand command = new SqlCommand(sql, connection))
        {
            connection.Open();
            using (SqlDataReader reader = command.ExecuteReader())
            {
                while (reader.Read())
                {
                    context.Response.Write(reader.GetString(0) + Environment.NewLine);
                }
            }
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}

Note :- i am using Northwind Database in this example

Step4 :-

Open Default.aspx page and Dragr Textbox and change Id = “txt_Search”

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 src="jquery.js" type="text/javascript"></script>
  <link rel="stylesheet" href="jquery.autocomplete.css" type="text/css" />
    <script type="text/javascript" src="jquery.autocomplete.js"></script>
      <script type="text/javascript"> 
      $(document).ready(function(){ 
      $("#txt_Search").autocomplete("AutocompleteData.ashx");  }); 
      </script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
    Search :- <asp:TextBox ID="txt_Search" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>

and then run your Web page

Hope this helps

Good Lucl.

October 16, 2009

JQuery to Refresh the page for every 5 minutes

Filed under: Jquery — yasserzaid @ 1:04 pm

Hi

try this example to Refresh the page for every 5 minutes using JQuery :-

<%@ 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" src="jquery-latest.js"></script>   
    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            setInterval("location.reload(true)", 300000);
        });   
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      I'll refresh every 5 minutes!
    </div>
    </form>
</body>
</html>

Hope this helps

Good Luck

September 11, 2009

Check UserName Availability with JQuery using Memebership

Filed under: ASP.Net, Jquery — yasserzaid @ 11:54 am

Hi

try this example to Check UserName Availability with JQuery using Memebership

First You’ll need to download jquery.js from http://docs.jquery.com/Downloading_jQuery.

The current version is 1.2.6.

<%@ 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 src="scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script type = "text/javascript">
function ShowAvailability() {
    $.ajax({
        type: "POST",
        url: "Default.aspx/CheckUserName",
        data: '{userName: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function(response) {
            alert(response);
        }
    });
}
function OnSuccess(response) {
    var mesg = $("#mesg")[0];

    switch (response) {
        case "true":
            mesg.style.color = "green";
            mesg.innerHTML = "Available";
            break;
        case "false":
            mesg.style.color = "red";
            mesg.innerHTML = "Not Available";
            break;
        case "error":
            mesg.style.color = "red";
            mesg.innerHTML = "Error occured";
            break;                    
    }
}
function OnChange(txt) {
   $("#mesg")[0].innerHTML = "";
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
         UserName :
    <asp:TextBox ID="txtUserName" runat="server"
        onkeyup = "OnChange(this)"></asp:TextBox>
    <input id="btnCheck" type="button" value="Show Availability"
        onclick = "ShowAvailability()" />
    <br />
    <span id = "mesg"></span>
        </div>
    </form>
</body>
</html>

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;

public partial class _Default : System.Web.UI.Page
{
    [System.Web.Services.WebMethod]
    public static string CheckUserName(string userName)
    {
        string returnValue = string.Empty;
        try
        {
            if (Membership.GetUser(userName) != null)
            {
                returnValue = "false";
            }
            else
            {
                returnValue = "true";
            }
        }
        catch
        {
            returnValue = "error";
        }
        return returnValue;
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

Hope this helps

Good Luck

Blog at WordPress.com.