In this article I will explain with an example, how to implement jQuery AutoComplete TextBox in ASP.Net Core MVC.
The jQuery AutoComplete TextBox data will be populated from database using Entity Framework in ASP.Net Core MVC.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Creating an Entity Data Model
The very first step is to create an ASP.Net MVC Application and connect it to the Northwind Database using Entity Framework.
Controller
The Controller consists of three Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling the jQuery AutoComplete
This Action method accepts a parameter named “prefix”. When this method is accessed by the jQuery AutoComplete plugin, the records of the Customers Table of the Northwind database are fetched using the Entity Framework.
The fetched records are then filtered and returned back to the View as JSON.
Action method for handling POST operation
This Action method handles the Form submission and displays the Customer Name and CustomerId of the selected item in jQuery AutoComplete using ViewBag object.
public class HomeController : Controller
{
private DBCtx Context { get; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
public IActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AutoComplete(string prefix)
{
var customers = (from customer in this.Context.Customers
where customer.ContactName.StartsWith(prefix)
select new
{
label = customer.ContactName,
val = customer.CustomerID
}).ToList();
return Json(customers);
}
[HttpPost]
public ActionResult Index(string CustomerName, string CustomerId)
{
ViewBag.Message = "CustomerName: " + CustomerName + " CustomerId: " + CustomerId;
return View();
}
}
View
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Form consists of three elements i.e. a TextBox (implemented as AutoComplete), a Hidden Field (for saving the Value part of the Autocomplete Item) and a Submit Button.
The jQuery AutoComplete plugin has been applied to the TextBox and the URL of the plugin is set to the AutoComplete Action method.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
rel="Stylesheet" type="text/css"/>
<script type="text/javascript">
$(function () {
$("#txtCustomer").autocomplete({
source: function (request, response) {
$.ajax({
url: '/Home/AutoComplete/',
data: { "prefix": request.term },
type: "POST",
success: function (data) {
response($.map(data, function (item) {
return item;
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#hfCustomer").val(i.item.val);
},
minLength: 1
});
});
</script>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<input type="text" id="txtCustomer" name="CustomerName"/>
<input type="hidden" id="hfCustomer" name="CustomerId"/>
<br/><br/>
<input type="submit" id="btnSubmit" value="Submit"/>
<br/><br/>
@ViewBag.Message
}
</body>
</html>
Screenshot
![jQuery AutoComplete TextBox in ASP.Net Core MVC]()
Downloads
