Add AutoComplete feature to Textbox in ASP.NET MVC using JQuery UI

Explore the Top Microsoft SQLServer Technical/ Interview Questions here: http://XploreSqlServer.blogspot.com/

   

Explore the Top Microsoft C# Technical/ Interview Questions here: http://XploreCSharpDotNet.blogspot.com

Explore the Top Microsoft Blazor Technical/ Interview Questions here: https://XploreBlazor.blogspot.com/

1. Add a reference to JQuery javascript file and jQuery UI javascript file in the Razor view or in the _Layout.cshtml :

<

script src="jquery-1.8.2.js" type="text/javascript"></script>

<script src="ui/1.9.0/jquery-ui.js" type="text/javascript"></script>

Download the recent version of jQuery and jQuery UI javascript file from here:

jQuery: http://jquery.com/download/
jQuery UI: http://jqueryui.com/download/

2. Add the following script block in the Razor View:

<

script type="text/javascript">

        $(function () {

          $("#txtCountry").autocomplete({

                source: '@Url.Action("SearchByCaption", "Country")'

         });

                 

        });

</

script>

The above script adds autocomplete feature to a textbox called txtCountry.

As the user types the characters in the textbox,  SearchByCaption method of CountryController is called through jQuery UI scripts. The typed string is passed as the parameter to the method.

3. Implement SearchByCaption action method in CountryController as follows:

public ActionResult SearchByCaption(string term)

{
       CountryBiz countryBiz;
       List<string> list;

       countryBiz = new CountryBiz(); 
       list = countryBiz.SearchByCaption(term);

       return Json(list, JsonRequestBehavior.AllowGet);
}

Important: the parameter of the action method should be named 'term'.

The SearchByCaption method of CountryBiz should perform the pattern search in the Country database table based on the parameter, 'term'.

Explore the Top Microsoft SQLServer Technical/ Interview Questions here: http://XploreSqlServer.blogspot.com/

Explore the Top Microsoft C# Technical/ Interview Questions here: http://XploreCSharpDotNet.blogspot.com

Show Anchor as a Button using JQuery UI

Explore the Top Microsoft SQLServer Technical/ Interview Questions here: http://XploreSqlServer.blogspot.com/

   

Explore the Top Microsoft C# Technical/ Interview Questions here: http://XploreCSharpDotNet.blogspot.com

Explore the Top Microsoft Blazor Technical/ Interview Questions here: https://XploreBlazor.blogspot.com/

1. Add reference to jQuery UI javascript file and CSS file along with JQuery javascript file:

<

script src="jquery-1.8.2.js" type="text/javascript"></script>

<

link href= "ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<

script src="ui/1.9.0/jquery-ui.js" type="text/javascript"></script>


Download the recent version of jQuery and jQuery UI javascript files and themes from here:

jQuery: http://jquery.com/download/
jQuery UI: http://jqueryui.com/download/


2. Add the following script block:

<

script type="text/javascript">

        $(function () {

          $("#lnkSave").button();

        });

</

script>

The above script would show the following anchor tag

<a id="lnkSave" > Save </a>

look like this button :

The color and font of the button is based on the theme downloaded.

3. Specify the parameter value to button() method in case an icon needs to be displayed along with  text:

<

script type="text/javascript">

　

$(function () {

          $("#lnkSave").button({ icons: { primary: 'ui-icon-check'} });

 });

</

script>

The above script would show the anchor as a button with a check mark icon:

Refer jquery-ui.css for the list of supported icons.

Explore the Top Microsoft SQLServer Technical/ Interview Questions here: http://XploreSqlServer.blogspot.com/

   

Explore the Top Microsoft C# Technical/ Interview Questions here: http://XploreCSharpDotNet.blogspot.com