Home > AJAX, ASP.Net, Linq > Show Loading image with Autocomplete Extender Textbox

Show Loading image with Autocomplete Extender Textbox


Hi

try this Example to Show Loading image with Autocomplete Extender Textbox

Step1 :- Open VS2008 and create a new website

Step2 :- add new Linq to SQL DataContext  and name it “Northwind.dbml” and add Products table in it

Step3 :- Add new Web page and from ToolBox drag ScriptManager , TextBox and AJAX Autocomplete Extender control


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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></title>
    <script type="text/javascript">
        function ShowImage() {
            document.getElementById('txtAutoComplete').style.backgroundImage = 'url(loading.gif)';
            document.getElementById('txtAutoComplete').style.backgroundRepeat = 'no-repeat';
            document.getElementById('txtAutoComplete').style.backgroundPosition = 'right';
        }
        function HideImage() {
            document.getElementById('txtAutoComplete').style.backgroundImage = 'none';
        }
     </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

       <asp:ScriptManager ID="ScriptManager1" runat="server" >
        <Services>
              <asp:ServiceReference Path="~/WebService.asmx" />
        </Services>
       </asp:ScriptManager>
        <div>
            Enter Product Name:-
         <asp:TextBox ID="txtAutoComplete" runat="server"></asp:TextBox>
            <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
                MinimumPrefixLength="1"
                ServiceMethod="GetNames"
                TargetControlID="txtAutoComplete"                
                CompletionInterval="10"               
                EnableCaching="true"               
                CompletionSetCount="12"
                onclientpopulating="ShowImage"               
                onclientpopulated="HideImage">
            </cc1:AutoCompleteExtender>

        </div>
    </form>
</body>
</html>

Step4 :- In code behind add the following code:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

    [System.Web.Services.WebMethod]
    public static string[] GetNames(string prefixText, int count)
    {
        System.Threading.Thread.Sleep(1000);
        NorthwindDataContext db = new NorthwindDataContext();
        return db.Products.Where(n => n.ProductName.StartsWith(prefixText)).OrderBy(n => n.ProductName).Select(n => n.ProductName).Take(count).ToArray();
    }
}

Hope this helps

Good Luck.

Advertisements
Categories: AJAX, ASP.Net, Linq
  1. October 25, 2010 at 12:15 pm

    System.Threading.Thread.Sleep(1000);

    is a very useful line of code—every body plese use this while populating progress indicator with AutoComplete Extender….

  2. jakam
    October 26, 2010 at 12:49 pm

    Greate tutorial…

  3. yasserzaid
    October 29, 2010 at 11:39 am

    @jakam , @ASP.NET :- Thank you hope this helps you 🙂

  4. Jason
    May 26, 2011 at 9:46 pm

    Was quick and easy! Thanks!

  5. yasserzaid
    May 29, 2011 at 8:19 am

    @Jason :- you are welcome hope my post helps you

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: