Sample Example of JQuery AutoComplete textbox in Asp.net by using WebMethod|| How to Use AutoComplete textbox in Asp.net by using JQuery and Webservice.


In this article I am showing about how to use JQuery AutoComplete textbox in Asp.net .
The following are the step to use AutoComplete textbox in Asp.net by using JQuery.
1.First design the table name Category with two fields Id,Category as follows:


2.Fill the Category details in table which you want like the below:


3. Open VS2010 and FileàNewàEmpty WebsiteàGive the name as JQueryAutoComplete.
4. Select solutionàRight clickà Add new Item àselect WebFormàDefault.aspx
5. Design the form with two fields one is label and one is Textbox to enter text as follows:


6.Then write the following code in Default.aspx
<%@ 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 id="Head1" runat="server">
    <title>AutoComplete Text Box with jQuery</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
                <script type="text/javascript">
                    $(document).ready(function() {
                        SearchText();
                    });
                    function SearchText() {
                        $(".auto").autocomplete({
                            source: function(request, response) {
                                $.ajax({
                                    type: "POST",
                                    contentType: "application/json; charset=utf-8",
                                    url: "Default.aspx/GetAutoCompleteData",
                                    data: "{'CategoryName':'" + document.getElementById('txtCategory').value + "'}",
                                    dataType: "json",
                                    success: function(data) {
                                        response(data.d);
                                    },
                                    error: function(result) {
                                        alert("Error Occurred");
                                    }
                                });
                            }
                        });
                    }
                </script>
</head>
<body>
    <form id="form1" runat="server">
   <div class="demo">
<div class="ui-widget">
    <label for="tbAuto">Enter Category Name: </label>
   <input type="text" id="txtCategory" class="auto" />
</div>
    </form>
</body>
</html>

7. Write the following code in Default.aspx.cs file:
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Services;


public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
[WebMethod]

public static List<string> GetAutoCompleteData(string CategoryName)
{
List<string> result = new List<string>();
using (SqlConnection con = new SqlConnection("Data Source=Naresh;Integrated Security=true;Initial Catalog=dbname"))
{
    using (SqlCommand cmd = new SqlCommand("select Category from Emergency_Category where Category LIKE '%'+@CategoryText+'%'", con))
{
con.Open();
cmd.Parameters.AddWithValue("@CategoryText", CategoryName);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
    result.Add(dr["Category"].ToString());
}
return result;
}
}
}

8.Then build the application and run it, you will get output and type any letter in textbox then the output will be like below:


  In the above I entered  ‘a’ letter in textbox then it is showing  all the details of related to ‘a’ from database table Category.

In this way we can implement JQuery AutoComplete in Asp.net.

Thank You…….


How to implement Google Mapping with Get Direction and distance from one location to another location in Asp.net using JavaScript || Google Map Searching with Get Direction in Web Application Asp.net using JavaScript with GoogleAPI.


The following  article is shows about how to use Google maps with direction and distance in Asp.net application.
For that first I am taking two textboxes to enter From location and for To location ,one GetDirection button and one division to display map.
The following steps show the complete information:
1.       Open Visual StudioàFileàNewàASP.Net Empty WebsiteàGive the name as GooglemappingwithDirectionàOK
2.       Add one webpage to the solutions and give the name as GooglemapsDirection.aspx
3.       Design the form like the following:

4.       Write the following code in GooglemapsDirection.aspx source page using JavaScript.

   <form id="form1" runat="server">
    <div>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script language="javascript" type="text/javascript">
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();

    function InitializeMap() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var latlng = new google.maps.LatLng(17.425503, 78.47497);
        var myOptions =
        {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("Gmap"), myOptions);

        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directionpanel'));

        var control = document.getElementById('control');
        control.style.display = 'block';


    }



    function calcRoute() {

        var start = document.getElementById('startvalue').value;
        var end = document.getElementById('endvalue').value;
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });

    }



    function btnDirections_onclick() {
        calcRoute();
    }

    window.onload = InitializeMap;
    </script>
   
<table id ="control">
<tr>
<td class="style1">
<table>
<tr>
<td>From:</td>
<td>
    <input id="startvalue" type="text" style="width: 305px" /></td>
</tr>
<tr>
<td>To:</td>
<td><input id="endvalue" type="text" style="width: 301px" /></td>
</tr>
<tr>
<td align ="right">
    <input id="btnDirections" type="button" value="GetDirections"
        onclick="return btnDirections_onclick()" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign ="top">
<div id ="directionpanel"  style="height: 390px;overflow: auto" ></div>
</td>
<td valign ="top">
<div id ="Gmap" style="height: 390px; width: 489px"></div>
</td>
</tr>
</table>
    </div>
    </form>

Then build the application and run it , no need to write any code in GooglemapsDirection.aspx.cs file.

Then you will get output like the following:

For Example if you enter Hyderabad in From textbox ,Mumbai in To textbox and click Find button then you will get the following output with Hyderabad to Mumbai direction and Distance:


Thank you….

How to implement Google Mapping with search keyword in Asp.net using JavaScript || Google Map Searching in Web Application Asp.net using JavaScript with GoogleAPI.


The following  article is shows about how to use Google maps in our Asp.net application.
For that first I am taking one textbox to enter search text ,one Find button and one division to display map.
The following steps show the complete information:
1.       Open Visual StudioàFileàNewàASP.Net Empty WebsiteàGive the name as GooglemappingàOK
2.       Add one webpage to the solutions and give the name as Googlemaps.aspx
3.       Design the form like the following:

4.       Write the following code in Googlemaps.aspx source page using JavaScript.

  <form id="form1" runat="server">
    <div>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script language="javascript" type="text/javascript">

    var map;
    var geocoder;
    function InitializeMap() {

        var latlng = new google.maps.LatLng(17.425503, 78.47497);
        var myOptions =
        {
            zoom: 13,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
    }

    function FindLocaiton() {
        geocoder = new google.maps.Geocoder();
        InitializeMap();

        var address = document.getElementById("addressinput").value;
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

            }
            else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });

    }


    function Button1_onclick() {
        FindLocaiton();
    }

    window.onload = InitializeMap;

</script>

<h2>Google Map Search  </h2>
<table>
<tr>
<td>
    <input id="addressinput" type="text" style="width: 447px" />  
</td>
<td>
    <input id="Button1" type="button" value="Find" onclick="return Button1_onclick()" /><br />
    </td>
</tr>
<tr>
<td colspan ="2">
<div id ="map" style="height: 390px; width: 489px" > </div>
</td>
</tr>
</table>
    </div>
    </form>

Then build the application and run it , no need to write any code in Googlemaps.aspx.cs file.

Then you will get output like the following:

For Example if you enter Hyderabad in textbox , click Find button then you will get the following output with Hyderabad location:


Thank you….