Skip to main content

ASP.Net MVC 4 + jQuery Autocomplete + Json

Tools used
1. Microsoft VS 2012
2. Jquery
3. Jquery-ui
4. Jquery-ui.css

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

  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 refer to here.
  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 content folder.
  4. Create a controller named JqueryController. (Right click on Controllers Folder > Add > Controller)
  5. In the JqueryController.cs, add a view with name index. (Right click on ActionResult > Add View)
  6. Go to App_start>BundleConfig.cs, and modify your code to include the download jquery-ui.css
    7. Notes: 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. Now we need to prepare json data source, go to Controller> JqueryController add this function, this function will search any text send from browser and then return data as jsonresult.
    To test the created function, browser to this URL http://yourip/jquery/autocomplete?search=, you will have this result return in your browser.
    Autocomplete
    1. In the Jquery/Index.chtml. Copy code from jQuery website and modify a little bit to make it look like MVC Code :P
    Please take note the @Url.Action("AutoComplete") will generate url string in this format ‘/contoller/action/’ i.e. it will generate /jquery/autocomplete’
    1
    1. You need to make sure the jQuery javascript is place on top of jQuery-UI javascript file or else Autocomplete will not work. Modify _Layout.chtml, and it will look like this
      @Scripts.Render("~/bundles/jquery") 
      Autocomplete
    2. Run the application (F5). That’s all!
      Autocomplete
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