Posts

Showing posts with the label AutoComplete

Donate

ASP.NET MVC AutoComplete TextBox Using jQuery UI AutoComplete And Entity Framework

-
Image
Hello and Good Evening! This post demonstrates how to implement an AutoComplete TextBox in ASP.NET MVC using jQuery UI and Entity Framework. I've had applied this concept to some of my projects and has been helpful to the clients and users using the application. Enough of the chitchat and lets get started by simply following the steps below. 1. Create an ASP.NET MVC project and add NuGet packages for Bootstrap and jQuery UI. 2. Add an Entity Framework model to the project using one of Microsoft's sample database called AdventureWorks . 3. In your _Layout.cshtml, make sure to reference the jQuery library inside the head tag so that the jQuery UI will work as expected. <!DOCTYPE html> <html> <head> <meta charset= "utf-8" /> <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>@ViewBag.Title - My ASP.NET Application</title> <script src= "~/Scripts/jque...
Post a Comment
Read more

Using Bootstrap Typeahead.js Plugin In ASP.NET MVC Project

-
Image
Hello all, Bootstrap has lots of plugins that you can experiment with, and one of them is the Typeahead.js plugin similar to jQueryUI Autocomplete plugin. According to Bootstrap, Typeahead is an extendend plugin for quickly creating elegant typeaheads with any from text input. So given the description of the widget, I will provide a tutorial that integrates the plugin in an ASP.NET MVC project basing from this article Twitter Bootstrap Typeahead and ASP.NET MVC . The author from the source demonstrates preloaded country values but in my case, I modified it to handle searching through a database. So to proceed with, just follow the steps below: 1. Create an ASP.NET MVC Project (C#). 2. Add an ADO.NET Entity model that connects to the AdventureWorks DB and it's CountryRegions table. 3. In your home controller, add the code that search countries based on a given value. private static AdventureWorks2012Entities _context; // // GET: /Home/ public ActionResult Index() { ret...
Post a Comment
Read more

Donate