Part 97 Implement autocomplete textbox functionality in mvc

YOUR LINK HERE:

http://youtube.com/watch?v=quQgUNteWxY

Link for code samples used in the demo • http://csharp-video-tutorials.blogspo... • Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help. • / @aarvikitchen5572 • Link for csharp, asp.net, ado.net, dotnet basics, mvc and sql server video tutorial playlists • https://www.youtube.com/user/kudvenka... • In this video, we will discuss implementing auto-complete functionality in an asp.net mvc application using jQuery Autocomplete Widget. • Step 1: We will be using tblStudents table in this demo. • Step 2: Create an ado.net entity data model using table tblStudents. Change the name of the generated entity from tblStudent to Student. • Step 3: Download autocomplete widget from http://jqueryui.com/download. • Step 4: Open js folder copy jquery-1.9.1.js and jquery-ui-1.10.3.custom.min.js files and paste them in the Scripts folder of you mvc project. Now open css folder. This folder will be present in ui-lightness folder. Copy images folder and jquery-ui-1.10.3.custom.min.css file and paste them in Content folder in your mvc project. If you are following along, at this point your solution explorer should look as shown below. • Step 5: Right click on the Controllers folder and add Home controller. Copy and paste the following code. Please make sure to include MVCDemo.Models namespace. • public class HomeController : Controller • { • public ActionResult Index() • { • DatabaseContext db = new DatabaseContext(); • return View(db.Students); • } • [HttpPost] • public ActionResult Index(string searchTerm) • { • DatabaseContext db = new DatabaseContext(); • List[Student] students; • if (string.IsNullOrEmpty(searchTerm)) • { • students = db.Students.ToList(); • } • else • { • students = db.Students • .Where(s =] s.Name.StartsWith(searchTerm)).ToList(); • } • return View(students); • } • public JsonResult GetStudents(string term) • { • DatabaseContext db = new DatabaseContext(); • List[string] students = db.Students.Where(s =] s.Name.StartsWith(term)) • .Select(x =] x.Name).ToList(); • return Json(students, JsonRequestBehavior.AllowGet); • } • } • Step 6: Right click on the Index action method in the HomeController and add Index view. Copy and paste the following code. • @model IEnumerable[MVCDemo.Models.Student] • [link href= ~/Content/jquery-ui-1.10.3.custom.min.css rel= stylesheet type= text/css /] • [script src= ~/Scripts/jquery-1.9.1.js type= text/javascript ][/script] • [script src= ~/Scripts/jquery-ui-1.10.3.custom.min.js type= text/javascript ][/script] • [script type= text/javascript ] • $(function () { • $('#txtSearch').autocomplete({ • source: '@Url.Action( GetStudents )', • minLength: 1 • }); • }); • [/script] • [div style= font-family:Arial ] • @using (@Html.BeginForm()) • { • [label for= Name ]Name: [/label] • @Html.TextBox( searchTerm , null, new { id = txtSearch }) • [input type= submit value= Search /] • } • [table border= 1 ] • [tr] • [th] • @Html.DisplayNameFor(model =] model.Name) • [/th] • [th] • @Html.DisplayNameFor(model =] model.Gender) • [/th] • [th] • @Html.DisplayNameFor(model =] model.TotalMarks) • [/th] • [/tr] • @foreach (var item in Model) • { • [tr] • [td] • @Html.DisplayFor(modelItem =] item.Name) • [/td] • [td] • @Html.DisplayFor(modelItem =] item.Gender) • [/td] • [td] • @Html.DisplayFor(modelItem =] item.TotalMarks) • [/td] • [/tr] • } • [/table] • [/div]

#############################

New on site