Tuesday, February 23, 2010

How to use Ajax AutoCompleteExtender in Asp.net Project

Here is an example how to use Ajax AutoCompleteExtender control in asp.net project, to use Ajax AutoCompleteExtender you have to have some knowledge of web services and javascript and little bit of jquerie. The basic concept on Ajax AutoCompleteExtender you can fine in the Ajax help side here i have add one extra properties on it . Here I have fill the control like a asp dropdownlist where we have textvaluefield and datavaluefield. So you can get the value fileld of a particular selected list item.
Step 1: Add a textbox  ID=txtOppTeam and runat="server"  AutoComplete="off"
2:JavaScript
function OppTeams_itemSelected(sender, e)
    {
        var hdOpponentTeamId = $get('<%= hdOpponentTeamId.ClientID %>');
        var hdCreateNewTeam = $get('<%= hdCreateNewTeam.ClientID %>');
        hdOpponentTeamId.value = e.get_value();
        //alert('selected id=' + hdOpponentTeamId.value);
        if(hdOpponentTeamId.value>0)
        {
            hdCreateNewTeam.value=1;
        }
        else
        {
            hdCreateNewTeam.value=0;
        }
    }





3:Web Service Class: add an webservice as AutoCompleteTeam

using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Collections.Generic;
using System.Collections.ObjectModel;
///
/// Summary description for AutoCompleteTeam
///

[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 AutoCompleteTeam : System.Web.Services.WebService {

    public AutoCompleteTeam () {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }

    [WebMethod]
    public string[] GetCompletionList(string prefixText, int count)
    {
        iPlayTeam dsTeam = new iPlayTeam();
        dsTeam.TeamName = Convert.ToString(prefixText);
        Collection allTeam = iPlayBL.GetTeamNameAs(dsTeam);
        List items = new List(0);
        if (allTeam.Count > 0)
        {
            items = new List(allTeam.Count);
            for (int i = 0; i < allTeam.Count; i++)
            {
                items.Add(allTeam[i].TeamName);
            }
        }
        return items.ToArray();
       
    }
    [WebMethod]
    public string[] GetOpponentTeamList(string prefixText, int count)
    {
        iPlayTeam dsTeam = new iPlayTeam();
      
        dsTeam.TeamName = Convert.ToString(prefixText);
        //dsTeam.PlayerId = Convert.ToInt64(Session["playerId"]);
        dsTeam.PlayerId = iPlayConstant._PLAYER_ID;
        //dsTeam.SportId = Convert.ToInt64(Session["SportId"]);
        dsTeam.SportId = iPlayConstant._SPORT_ID;
        Collection allTeam = iPlayBL.GetOppnentTeamNameAs(dsTeam);
        List retItems = new List(0);
        if (allTeam.Count > 0)
        {
            retItems = new List(allTeam.Count);
            for (int i = 0; i < allTeam.Count; i++)
            {
                retItems.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(allTeam[i].TeamName, Convert.ToString(allTeam[i].TeamId)));
            }
        }
        return retItems.ToArray();
       
    }
}

4.Ajax Autocomplete extender :




No comments:

Post a Comment