Category: Ajax

Feb 05 2010

Ajax TextBoxWatermarkExtender

<%@ Page Title=”" Language=”C#” AutoEventWireup=”true” CodeFile=”Default2.aspx.cs” Inherits=”Default2″ %>

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1″ %>

<style type=”text/css”>

.watermark
{
color: #999999;
font-style: italic;
}
</style>

<asp:TextBox ID=”TextBox4” runat=”server”></asp:TextBox>

<cc1:TextBoxWatermarkExtender ID=”TextBoxWatermarkExtender1″ runat=”server” WatermarkCssClass=”watermark

TargetControlID=”TextBox4
WatermarkText=”Enter First Name“>
</cc1:TextBoxWatermarkExtender>

Oct 23 2009

Asp.net Ajax AutoComplete Extender from database

Create sqlServer table name is TblCustomer

CREATE TABLE [tblCustomer](
[CustomerID] [int] NOT NULL,
[Name] [nvarchar](32) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,
[Address] [nvarchar](64) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,
[EmailID] [nvarchar](32) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,
[PhoneNo] [nvarchar](16) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,
[State] [nvarchar](32) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,
[Country] [nvarchar](32) COLLATE SQL_Latin1_General_CP1_CI_AS NOT NULL,
CONSTRAINT [PK_tblCustomer] PRIMARY KEY CLUSTERED
(
[CustomerID] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]

Then insert some values in customer table

insert into tblCustomer values(1,’Rohit’,'85 Feet Road’,'rohit@gmal.com’,'2942345′,’Andra’,'India’)

insert into tblCustomer values(2,’somesh’,'Rama takies’,’somesh@gmal.com’,'2972345′,’Andra’,'India’)

insert into tblCustomer values(3,’mahesh’,'Gajuwaks’,'mahesh@gmal.com’,'2972315′,’Andra’,'India’)

Step1: Create Ajax Enabled Website in VS2005. By Default, VS2008 it creates Ajax Enabled Website.

Step2: Drag Textbox and Ajax AutoCompleteExtender in aspx page (Default.aspx)

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>

</asp:ScriptManager>

<div>

<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>

<br />

<cc1:AutoCompleteExtender ID=”AutoCompleteExtender1″ runat=”server”>

</cc1:AutoCompleteExtender>

</div>

Ex: consider Path of the Solution Explorer: E:\project\

Step3: Create   Web Service (WebService.asmx and WebService.cs) – First Create App_Code Folder in Solution Explorer

Goto Soultion Explorer of the project – right click in solution explorer – Goto Add Asp.net Folder – click App_Code then App_Code folder creates in Soution Explorer

Step4: To Create Web service – Goto Solution Explorer – Right click in Solution Explorer – then click Add New Item – Choose WebService in list of files (By Default its name is WebService.asmx, you can change name ).

Then Web service will generate two files

One is WebService.asmx file

Other is WebService.cs file in App_code Folder

Webservice.asmx file code generate like below

<%@ WebService Language=”C#” CodeBehind=”~/App_Code/WebService.cs” Class=”WebService” %>

WebService.cs file (this file present in App_Code folder) code generate like bewlow

using System;

using System.Collections.Generic;

using System.Web;

using System.Web.Services;

/// <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 string HelloWorld() {

return “Hello World”;

}

}

Add Some more namespaces to above webservice class namespaces

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Web.Script.Services;

Adding Connection String and Web Method to call customer data into textbox of Autocomplete extender

SqlConnection objConn = new SqlConnection(”Data Source=Raju;Initial Catalog=Purchase;User;Password=xyz;”);

[WebMethod]

public string[] GetCustomerInfo(string prefixText)

{

}

Complete code for Webservice.cs (App_code class file)

using System;

using System.Collections;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Data;

using System.Data.SqlClient;

using System.Web.Script.Services;

[ScriptService]

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class WebService : System.Web.Services.WebService

{

#region “ConnectionString”

SqlConnection objConn = new SqlConnection(”Data Source=Raju;Initial Catalog=Purchase;User ID=sa;Password=xyz;”);

#endregion

#region “Initialization”

public WebService()

{

}

#endregion

[WebMethod]

#region “GetCustomerInfo”

public string[] GetCustomerInfo(string prefixText)

{

string sqlquery = “Select Name from tblCustomer Where Name like @prefixText”;

SqlDataAdapter da = new SqlDataAdapter(sqlquery, objConn);

da.SelectCommand.Parameters.Add(”@prefixText”, SqlDbType.VarChar, 50).Value = prefixText + “%”;

DataTable dt = new DataTable();

da.Fill(dt);

string[] items = new string[dt.Rows.Count];

int i = 0;

foreach (DataRow dr in dt.Rows)

{

items.SetValue(dr["Name"].ToString(), i);

i++;

}

return items;

}

#endregion

}

Aspx Page (ex: Default.aspx)

Check Tag Prefix cc1 or AjaxToolkit in Register Assembly of Ajax control Toolkit below source code aspx page (<%@ Page Language=”C#”….)

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1″ %>

Getting Webservice Method into AutoCompleteTextBox in Source code (Default.aspx) page

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>

</asp:ScriptManager>

<div>

<asp:TextBox ID=”txtCusotmerName” runat=”server” MaxLength=”64″></asp:TextBox>

<cc1:autocompleteextender id=”AutoCompleteExtender3″ runat=”server”

completioninterval=”20″

minimumprefixlength=”1″

servicemethod=”GetCustomerInfo

servicepath=”~/Webservice.asmx

targetcontrolid=”txtCusotmerName“>

</cc1:autocompleteextender>

</div>

Run the application Type the letter of the Customer table Name field name letter example tblCustomer table contain Raju,Radhi then simply type ‘r‘ in textbox(txtCustomerName)

Explanation:

servicepath=”~/Webservice.asmx”  : The path to the web service that the extender will pull the word\sentence completions from. If this is not provided, the service method should be a page method.  (Webservice name which create in the project)

servicemethod=”GetCustomerInfo” : The web service method to be called. The signature of this method must match the following:

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]

public string[] GetCustomerInfo(string prefixText)

{

 ... }

Note that you can replace ” GetCustomerInfo ” with a name of your choice, but the return type and parameter name and type must exactly match, including case.

MinimumPrefixLength – Minimum number of characters that must be entered before getting suggestions from the web service.

CompletionInterval – Time in milliseconds when the timer will kick in to get suggestions using the web service.

Remember: Below Paragraph is not necessary for above solution it is just for Convert Ordinary Class file into Web service class file

Note: Create Web service Class file – Right click in App_Code folder – Add New Item – Choose Class file (By Default class file name is Class1.cs) – change into Webservice.cs then the following code generates.

Path of the Solution Explorer: E:\project\App_Code\Webservice.cs

using System;

using System.Collections.Generic;

using System.Web;

/// <summary>

/// Summary description for Webservice

/// </summary>

public class Webservice

{

public Webservice()

{

//

// TODO: Add constructor logic here

//

}

}

Add Following Namespaces to make ordinary class file into Webservice class file

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Web.Script.Services;

[ScriptService]

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class Webservice :System.Web.Services.WebService

{

public Webservice()

{

//

// TODO: Add constructor logic here

//

}

}

Note:Then App_code class file icon changes into Webservice class file icon. See it in Solution explorer App_code of webservice.cs file icon change.

Alibi3col theme by Themocracy