Using AJAX Control Toolkit AutoCompleteExtender in ASP.NET 4.5-VBForums
Results 1 to 1 of 1

Thread: Using AJAX Control Toolkit AutoCompleteExtender in ASP.NET 4.5

  1. #1

    Thread Starter
    Frenzied Member KGComputers's Avatar
    Join Date
    Dec 2005
    Location
    Cebu, PH
    Posts
    1,886

    Using AJAX Control Toolkit AutoCompleteExtender in ASP.NET 4.5

    Hello,

    Ajax Control Toolkit has been in existence for a very long time and have I started working with this toolkit since ASP.NET 2.0 thru 3.5. However, it's popularity declined when jQuery UI and other JavaScript frameworks came into existence. For this demo, I'll integrate the AutoCompleteExtender control in an empty project given that you will use the toolkit in your ASP.NET 4.5 Web Forms website.

    1. Create an ASP.NET Webforms Project using Visual Studio 2012 or 2013 and then install AjaxControl Toolkit using Nugget
    PM> Install-Package AjaxControlToolkit
    2. Add an ADO.NET Entity Framework that connects to AdventureWorks Database and CountryRegions table.
    3. Add a new Webform page (Default.aspx)
    HTML Code:
    1. <form id="form1" runat="server">
    2.     <div>
    3.         <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
    4.         <asp:TextBox ID="txtCountries" runat="server"></asp:TextBox>  
    5.         <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" CompletionListCssClass="autocomplete_completionListElements" runat="server" CompletionSetCount="10" TargetControlID="txtCountries"
    6.             ServiceMethod="GetCountries" CompletionInterval="100" EnableCaching="false" MinimumPrefixLength="1">
    7.         </ajaxToolkit:AutoCompleteExtender>
    8.     </div>
    9.     </form>

    4. Add the following snippet below in Code Behind (Default.aspx.vb)
    VB.NET Code:
    1. Private Shared _context As AdventureWorksEntities 'Entity Framework
    2.  
    3.  
    4.     <ScriptMethod>
    5.     <WebMethod>
    6.     Public Shared Function GetCountries(prefixText As String, count As Integer) As List(Of String)
    7.         _context = New AdventureWorksEntities()
    8.  
    9.         Dim result = (From country In _context.CountryRegions.AsEnumerable()
    10.                       Where country.Name.ToLower().StartsWith(prefixText, StringComparison.OrdinalIgnoreCase)
    11.                       Select country.Name).Take(count)
    12.  
    13.         Return result.ToList()
    14.     End Function
    15.  
    16.  
    17.     <ScriptMethod>
    18.     <WebMethod>
    19.     Public Shared Function GetCountryInfo(Country As String) As Object
    20.         _context = New AdventureWorksEntities()
    21.  
    22.         Dim result = (From countryObj In _context.CountryRegions.AsEnumerable()
    23.                       Where countryObj.Name.ToLower().Equals(Country.ToLower())
    24.                       Select New With {
    25.                         .Name = countryObj.Name,
    26.                         .CountryRegionCode = countryObj.CountryRegionCode
    27.                     }).FirstOrDefault()
    28.  
    29.         Return result
    30.     End Function

    5. To capture selected country, add the JavaScript code in your page that handles the blur event of the textbox.
    JavaScript Code:
    1. <script type="text/javascript">
    2.         $(document).ready(function () {
    3.             $('[id$=txtCountries]').blur(function (event) {
    4.                 var country = $(this).val();
    5.                 $.ajax({
    6.                     url: "Default.aspx/GetCountryInfo",
    7.                     data: '{ Country: "' + country + '"}',
    8.                     dataType: "json",
    9.                     type: "POST",
    10.                     contentType: "application/json; charset=utf-8",
    11.                     success: function (data) {
    12.                         if (data.d != null) {
    13.                             var c_name = data.d.Name;
    14.                             var c_code = data.d.CountryRegionCode;
    15.                             alert('Code: ' + c_code + ', Name: ' + c_name);
    16.                         }
    17.                     },
    18.                     error: function (a, b, c) {
    19.                         alert("Error in Retrieving Record!");
    20.                     }
    21.                 });
    22.             });
    23.         });
    24.  
    25.  
    26.     </script>

    Regards,

    kgc
    Last edited by KGComputers; Sep 8th, 2016 at 01:15 PM.
    CodeBank: VB.NET & C#.NET | ASP.NET
    Programming: C# | VB.NET
    Blogs: My Blog | GitHub Repo | ASP Snippets | CodeASP.net
    ___________________________________________________________________________________

    Rating someone's post is a way of saying Thanks...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width

Survey posted by VBForums.