This article to
explain the step by step approach how to use Ajax tool kit Autocomplete
Extender with Progress indicators and without web service call in asp.net.
Steps.
1. Create the animated GIF which will be used.
Go to the site AjaxLoad.Info where
one can create animated loading gifs and download them for free. Use
firebox to view the site because one can see the types of icons in the
dropdown, on the site, where IE does not. Once done save you’re the
icon to your project.
2. The Ajax extender will need to call a WebMetod to
get the data. Create new asp.net web project with default aspx page and create
a method GetUsersList () to
default.aspx.cs.
[System.Web.Script.Services.ScriptMethod ()]
[System.Web.Services.WebMethod]
Public static List<string> GetUsersList (string prefixText, int count)
{
List<string> sysUser = new List<string>()
{ "TUser1",
"TUser2", "LUser", "LUser1", "TUser[group]" };
return sysUser;
}
3.
On the web page where the controls will be, add
the asp:ScriptManager control.
<asp:ScriptManager
ID="ScriptManager1" runat="server"
EnablePartialRendering="true"></asp:ScriptManager>
4.
Add controls asp.net textbox, Autocomplete
extender and image for progress indicator in default.aspx page.
<table>
<tr>
<td colspan="2" class="auto-style1">
<label for="tbAuto" style="color:Black; font-family:TeX Gyre Adventor;font-
size:12px;"> Enter User/Group Name</label>
<br />
<asp:TextBox ID="m_Userlist" runat="server"></asp:TextBox> <img id="AutocompleteIndicator" style="visibility:hidden" src="../img/mozilla_blu.gif" /><span id="lblErrormsg" style="display:none; color:red;">Enter valid keywords</span>
<asp:AutoCompleteExtender runat="server" ID="autoComplete1"
TargetControlID="m_Userlist"
ServiceMethod="GetUsersList"
ServicePath="AssignRights.aspx"
MinimumPrefixLength="1"
EnableCaching="true"
CompletionListCssClass="autocomplete_ListElement"
CompletionListItemCssClass="autocomplete_listItem"
CompletionListHighlightedItemCssClass="autocomplete_highlightedList"
OnClientPopulating=" ShowProgressIndicator "
OnClientPopulated=" ShowProgressIndicator ">
</asp:AutoCompleteExtender>
</td>
</tr>
</table>
5. The image starts off hidden. We will
write a javascript method, to swap its state. Place the code on the page
after the <Head> section. The code has to know the name of the img tag.
The code should look like this:
<script type="text/javascript">
function ShowProgressIndicator () {
Var e = document.getElementById ("AutocompleteIndicator");
e.style.visibility =
(e.style.visibility == 'visible') ? 'hidden' : 'visible';
}
</script>
This is done to create Using
Asp.net Ajax AutoComplete extender with progress indicator and without web
service.
Note: If
no data is found, the final hook call to “onclientpopulated” is not done and
the icon will still be displayed.
So in this case
to handle use “OnClientHiding” event to use
OnClientHiding
event is triggered every request completed. here to stop displayed icon.
