Skip to main content

ASP.Net MVC 4 + jQuery Autocomplete Dropdownlist

In this tutorial, We will show you how to make your existing dropdownlist to a automcomplete dropdownlist.
Tools used
1. Microsoft VS 2012
2. jQuery
3. jQuery-UI
4. jQuery-ui.css
Download Code

Step to integrate – ASP.Net MVC 4 + jQuery Autocomplete Dropdownlist

  1. First of all, we will assume you know how to create a new MVC project in MS 2012, in case you need guide,  Please create a project and name it AutoCompleteDropDownList.
  2. After create the project, By default, jquery and jQuery-UI javascript files has been created in Scripts folder and you will see files like image below, We will need these files in later step.
    Autocomplete.
  3. Download jQuery-ui.css and save into contentthemebase folder.
    4.Download jQuery and jQuery-UI and save into Scripts folder.
  4. Go to App_start>BundleConfig.cs, and modify your code to include the downloaded jquery-ui.css
By adding new line into bundle meaning that all view will download the file even thought the page does not require the file, We assume that all of the view need this file, so that is why we include the file in bundleConfig.cs
  1. It’s recommended that we bind data with strongly type model, so that we could spot the error in design time. So we create a View Model folder and in this folder add a class name Programming.cs and this class will going to help us to bind data into view. Copy this code into Programming.cs.
  1. Create a controller named AutoCompleteDropDown. (Right click on Controllers Folder > Add > Controller). Now we need to prepare dropdownlist data , go to Controller> AutoCompleteDropDown then add this code into Index function
  1. In the AutoCompleteDropDown.cs, add view with name index. (Right click on ActionResult > Add View). Then go to Views > AutoCompleteDropDown > Index.chtml. Copy code below and paste into Index.chtml
  1. At last, Modify the _Layout.chtml, to include the css and jquery. Go to Shared > _Layout.chtml. and code in this file is look like this
You need to make sure the jQuery javascript is place on top of jQuery-UI javascript file or else Autocomplete will not work.
  1. Run the application (F5). That’s all!
    Autocomplete
The jQuery in Index.chtml it’s will help us to hide the original dropdownlist and create another fake “dropdownlist” and make it look like the original dropdownlist. In fact the actual dropdownlist is still the one which responsible to bind data from/to controller.
Labels:

Comments

Post a Comment

Popular posts from this blog

create a table in SQL

To create a table, you can follow this formula: CREATE TABLE Country( Column1 , Column2 , Column3 ) or: CREATE TABLE Country( Column1 , Column2 , Column3 ); Each column is created as: ColumnName DataType Options Here is an example: CREATE TABLE Customers ( DrvLicNbr nvarchar(32), DateIssued DATE, DateExpired date, FullName nvarchar(50), Address NVARCHAR(120), City NvarChar(40), State NVarChar(50), PostalCode nvarchar(20), HomePhone nvarchar(20), OrganDonor BIT); GO To start from a sample code, open an empty Query window and display the Template Explorer. From the Template Explorer, expand Table. Drag Create Table and drop it in the Query window: -- ========================================= -- Create table template -- ========================================= USE <database, sysname, AdventureWorks> GO IF OBJECT_ID('<schema_name, sysname, dbo>.<table_name, sysname, sample_table>', 'U') IS NOT NULL DROP TABLE <schema_name, sysname, d...
Post a Comment
Read more

Stored Procedures

Practical Learning: Introducing Stored Procedures Start Microsoft  SQL  Server  Management  Studio  and log in to your  server On the main menu, click File -> New -> Query With Current Connection To create a new database, copy and paste the following code in the Query window:   -- ============================================= -- Database: WattsALoan -- ============================================= USE master GO -- Drop the database if it already exists IF EXISTS ( SELECT name FROM sys.databases WHERE name = N'WattsALoan' ) DROP DATABASE WattsALoan GO CREATE DATABASE WattsALoan GO -- ========================================= -- Table: Employees -- ========================================= USE WattsALoan GO IF OBJECT_ID(N'dbo.Employees', N'U') IS NOT NULL DROP TABLE dbo.Employees GO CREATE TABLE dbo.Employees ( EmployeeID int identity(1,1) NOT NULL, EmployeeNumber nchar(10) NULL, FirstName nvarchar(20) NULL, LastName nvarcha...
Post a Comment
Read more

Delete a table in SQL

To delete a table using SQL, use the following formula: DROP TABLE TableName The  DROP TABLE  expression is required and it is followed by the name of the undesired table. Here is an example: DROP TABLE Students; GO
Post a Comment
Read more