Hi folks, Here I am going to create a simple example of Autocomplete TextBox in ASP.NET MVC using Jquery.
Autocomplete Textbox in ASP.NET MVC using Jquery:
The Autocomplete widgets provide suggestions while you type into the field. In this session, I will explain to you how to create an Autocomplete Textbox in ASP.NET MVC using jquery.
Dependencies:
1- JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
2- CSS:
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
Create Database and Tables:
CREATE TABLE [dbo].[Country]( [ID] [bigint] IDENTITY(1,1) NOT NULL, [CountryName] [varchar](150) NULL ) ON [PRIMARY] GO SET ANSI_PADDING OFF GO
Insert Records:
INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (1, N'India') GO INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (2, N'Sri lanka') GO INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (3, N'Canada') GO INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (4, N'Japan') GO INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (5, N'Russia') GO INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (6, N'United States') GO INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (7, N'South Africa') GO INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (8, N'Kenya') GO INSERT [dbo].[Country] ([ID], [CountryName]) VALUES (9, N'Bhutan') GO SET IDENTITY_INSERT [dbo].[Country] OFF GO
Create ASP.NET MVC Application:
Step 1: Create an ASP.NET MVC application called AutoCompleteTextBoxDemo. Choose an empty basic template and proceed.
Step 2: I am using the Entity Framework so First of all, we need to Install Entity Framework. Goto Tool > Library Package Manager > Manage NuGet Packages For Solutions.
Step 3: Right click on the Model folder and Create a class called Country. Replace the following code in the class.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.ComponentModel.DataAnnotations.Schema; namespace AutoCompleteTextBoxDemo.Models { [Table("Country")] public class Country { public Int64 ID { get; set; } public string CountryName { get; set; } } }
Step 4: Right Click on the Model folder and Create a class called CountryDbContext. Replace the following code in the class.
using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using System.Web; namespace AutoCompleteTextBoxDemo.Models { public class CountryDbContext:DbContext { public DbSet<Country> Country { get; set; } protected override void OnModelCreating(DbModelBuilder modelBuilder) { Database.SetInitializer<CountryDbContext>(null); base.OnModelCreating(modelBuilder); } } }
Step 4: Add the following connection string in the web.config file.
<connectionStrings>
<add name=”CountryDbContext” connectionString=”data source=DESKTOP-CN5IQI9\SQLEXPRESS;Initial Catalog=Debugonweb;integrated security=True;” providerName=”System.Data.SqlClient” />
</connectionStrings>
Step 5: Right click on the Controller folder and create a Controller called HomeController. Replace the following code in the HomeController.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using AutoCompleteTextBoxDemo.Models; namespace AutoCompleteTextBoxDemo.Controllers { public class HomeController : Controller { // // GET: /Home/ CountryDbContext objCountryDbContext = new CountryDbContext(); public ActionResult Index() { return View(); } public JsonResult GetCountryList() { var vData = from c in objCountryDbContext.Country select c.CountryName; return Json(vData.ToList(), JsonRequestBehavior.AllowGet); } } }
Step 6: Now we need to create a View. Right Click on the Index Action method and Create a view called Index.cshtml. Replace the following code.
@{ ViewBag.Title = "Index"; Layout = null; } <html> <head> <title> Autocomplete Textbox in ASP.NET MVC </title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /> <link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script type="text/javascript"> $(function () { $.ajax({ type: "POST", url: "/Home/GetCountryList", data: null, dataType: "json", contentType: "application/json; charset=utf-8", success: function (data) { $("#txtCountry").autocomplete({ source: data }); }, error: function (XMLHttpRequest, textStatus, errorThrown) { alert("Error"); } }); }); </script> </head> <body> <label> Country </label> <input type="text" id="txtCountry" /> </body> </html>
Now we are done with the development.
Output:
View More:
- How to Export to PDF using jspdf in ASP.NET MVC.
- Cascading Dropdownlist in ASP.NET MVC.
- How to use Jquery DataTable Plugin in ASP.NET MVC.
- Difference between VieweResult() and ActionResult() in ASP.NET MVC.
Conclusion:
I hope this is a useful tutorial for you. Please don’t hesitate to comment for any technical help. Your feedback and suggestions are always appreciated.
Thank You.
http://bambulapharmacy.com
Good material. With thanks. cheap viagra
dark chocolate and asthma viagra generic
http://withoutscript.com – can i use cialis and viagra together
Hello there! I know this is kinda off topic but I was wondering which blog platform are you using for this website? I’m getting tired of WordPress because I’ve had problems with hackers and I’m looking at alternatives for another platform. I would be awesome if you could point me in the direction of a good platform.
You revealed it effectively. cialis without doctor prescription
how to lower blood pressure fast viagra
Definitely believe that which you stated. Your favorite justification appeared to be on the net the simplest thing to be aware of. I say to you, I certainly get irked while people consider worries that they just don’t know about. You managed to hit the nail upon the top and defined out the whole thing without having side-effects , people could take a signal. Will probably be back to get more. Thanks|
http://canadian2pharmacy.com
I really like what you guys tend to be up too. This kind of clever work and reporting! Keep up the very good works guys I’ve added you guys to my own blogroll.|
https://viaprescription.com/