Introduction

Ajax (Asynchronous JavaScript and XML) is a new web development technique used for an interactive website. With the help of AJAX we can develop web applications and retrieve small amounts of data from a web server. AJAX consists of a different type of technology.

JavaScript
XML
Asynchronous Call to the server

WebService

A Web Service is an application that is designed to interact directly with other applications over the internet. A WebService is the same as the Web application that can be accessed over the internet such as the Internet, and executed on a remote system hosting from requested services. The Web services are components on a Web server that a client application can call by making HTTP requests across the Web.

Lets see an AutoCompleteExtender Control example in which I am using WebService.

AutoCompleteExtender Control

The AutoCompleteExtenders can be applied to a variety of ASP.Net controls and can be applied to existing controls in existing applications. The extender controls and their class ExtenderControl inherits from the Control base class. With the help of this control to extend DropDownList behaviour with auto complete feature.

Here I am using AutoCompleteExtender control in web application where user will write any alphabet of the name and it will show all name which will match with entered alphabet in Textbox like drop - down list. I am also using web service to get record from database. here are some list of property of AutoCompleteExtender Control which will be used.

Property

TargetControlID
ServiceMetod
MinimumPrefixLength
EnableCaching
CompletionSetCount

Step 1 : Open Visual Studio 2010.

Go to File->New->WebSite
Select ASP.NET Empty WebSite

Step 2 : Go to Solution Explorer and right-click.

Select Add->New Item
Select WebForm
Default.aspx page open

Step 3 : Go to Default.aspx page and click on the [Design] option and drag control from Toolbox.

Drag Panel, ScriptManager, TextBox

CreateTable

Step 4 : Go to the sqlserver and click on NewQueryOption and create table.

create table raj
(
firstname varchar(50),
lastname varchar(50),
age varchar(50),
)
GO

Step 5 : Now add value in the table.

Step 6 : Go to Default.aspx[Design]option and drag AutoCompleteExtenbder control from Toolbox.

Step 7 : Go to Default.aspx[Source]option and define the property CompletionSetCount, MinimumPrefixLength.

Code :

<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID ="TextBox1" ServiceMethod="getinfo" MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000">
</asp:AutoCompleteExtender>

Step 8 : Go to Solution Explorer and right-click on App-Folder.

Go to ADD->AddNewItem
Select WebService
WebService.cs window open

Connection String

Step 9 : Go to WebService(WebService.cs) option and define connection string for the particular data from the Database.

Code :

SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["s"].ToString());
conn.Open();
SqlCommand cmd = new SqlCommand("select*from raj where firstname like @Name+'%'" , conn);
cmd.Parameters.AddWithValue("@Name", prefixText);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);

Web.Config file

Step 10 : Go to the Solution Explorer and click on the web.config file option and define a connection String for the data value.

Code :

<?xml version="1.0"?>

<configuration>
<connectionStrings>
<add name="s" connectionString="database=master;server=.;user=sa;password=wintellect"/>
</connectionStrings>
<system.web>
<compilation debug="true" targetFramework="4.0">
<assemblies>
<add assembly="System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
<add assembly="System.Web.Extensions.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add assembly="System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
</assemblies>
</compilation>
</system.web>
<system.serviceModel>
<behaviors>
<serviceBehaviors>
<behavior name="">
<serviceMetadata httpGetEnabled="true" />
<serviceDebug includeExceptionDetailInFaults="false" />
</behavior>
</serviceBehaviors>
</behaviors>
<serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
</system.serviceModel>
</configuration>

NameSpace

Step 11 : Now add the following namespace for the Connection String and data value.

using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

Step 12 : Add the Service Method in our WebService[WebService.cs] option.

[System.Web.Script.Services.ScriptService]

Step 13 : Now write the complete code for the Data value from the Database on WebService[WebService.cs] option.

Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
public WebService () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public static List<string> getinfo(string prefixText)
{
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["s"].ToString());
conn.Open();
SqlCommand cmd = new SqlCommand("select*from raj where firstname like @Name+'%'", conn);
cmd.Parameters.AddWithValue("@Name", prefixText);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
List<string> firstname = new List<string>();
for (int i = 0; i < dt.Rows.Count; i++)
{
firstname.Add(dt.Rows[i][0].ToString());
}
return firstname;
}
}

Step 14 : Go to Default.aspx[source] page option and write a code.

Code :

<title>simplw application in ajax</title>
</head>
<body bgcolor="#bbddd8">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div style="background-color: #FFFF99">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<p style="background-color: #DCE1B7">Search the name</p>
<asp:TextBox ID="TextBox1" runat="server" BackColor="#FFFFCC">
</asp:TextBox>
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID ="TextBox1" ServiceMethod="getinfo" MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000">
</asp:AutoCompleteExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>

Step 15 : Now run the application by Pressing F5.

Step 16 : When we write any letter in the Textbox then it will show all matched records with your entered first letter.

Summary

Here I have used AutoCompleteExtender control in web application where user will write any alphabet of the name and it will show all matching name with entered alphabet in Textbox like drop - down list.

Web Service in AJAX Using ASP.NET

AJAX Rating Control

Consuming Web Service Using Ajax

4 steps to consume web services using Ajax (Includes Video tutorial)

Difference between calling a web service using jQuery and AJAX