In this article I will explain with an example, how to populate
jQuery AutoComplete form API in ASP.Net Core Razor Pages.
ASPSnippets Test API
The following API will be used in this article.
The API returns the following JSON.
[
{
"CustomerId": 1,
"Name": "John Hammond",
"Country": "United States"
},
{
"CustomerId": 2,
"Name": "Mudassar Khan",
"Country": "India"
},
{
"CustomerId": 3,
"Name": "Suzanne Mathews",
"Country": "France"
},
{
"CustomerId": 4,
"Name": "Robert Schidner",
"Country": "Russia"
}
]
Razor PageModel (Code-Behind)
The PageModel consists of following Handler methods.
Handler method for handling GET operation
This Handler method is left empty as it is not required.
Handler method for handling POST operation
This Handler method handles the POST call, when the Form is submitted.
Note: The name of the parameter must be same as the value of name attribute specified for the Form element.
Inside this Handler Method, the
Name and
CustomerId of the selected customer are fetched and set into a
ViewData object.
public class IndexModel : PageModel
{
public void OnGet()
{
}
public void OnPostSubmit(string name, int customerId)
{
ViewData["Message"] = "Name: " + name + "\\nID: " + customerId;
}
}
Razor Page (HTML)
The Razor Page consists of an HTML Form.
The HTML Form consists of a TextBox, a HiddenField and a Submit Button control.
The Submit Button has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostSubmit but here it will be specified as Submit when calling from the Razor HTML Page.
When the Submit Button is clicked, the Form gets submitted and the value of the TextBox is sent to the PageModel.
jQuery AutoComplete Plugin implementation
Inside the View, the following
jQuery UI CSS file is inherited.
1. jquery-ui.css
And then, the following
jQuery and
jQuery UI JS files are inherited.
1. jquery.min.js
2. jquery-ui.min.js
Inside the
jQuery document ready event handler, the TextBox has been applied with the
jQuery AutoComplete plugin.
A
jQuery Get call is made to get list of customers returned from the URL which acts as a source of data to the
jQuery AutoComplete.
Then, a
Select event handler has been defined for the
jQuery AutoComplete and items are selected from the
AutoComplete List.
When the customer
Name is selected and the
Submit button is clicked, the Form is submitted and the
ViewData object is checked for NULL and if it is not NULL then, the value of the
ViewData object is displayed using
JavaScript Alert MessageBox.
@page
@model Populate_jQuery_Autocomplete_C_Razor.Pages.IndexModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=txtName]").autocomplete({
source: function (request, response) {
var prefix = request.term.toLowerCase();
$.get("https://raw.githubusercontent.com/aspsnippets/test/master/Customers.json", function (data, status) {
var customers = JSON.parse(data);
if (prefix != '') {
customers = customers.filter(function (customer) {
return customer.Name.toLowerCase().indexOf(prefix) != -1
});
}
response($.map(customers, function (customer) {
return {
label: customer.Name,
val: customer.CustomerId
};
}))
});
},
select: function (e, i) {
$("[id*=hfCustomerId]").val(i.item.val);
},
minLength: 0
}).focus(function () {
$(this).autocomplete("search");
});
});
</script>
</head>
<body>
<form method="post">
<input type="text" id="txtName" name="name" />
<input type="submit" value="Submit" asp-page-handler="Submit" />
<input type="hidden" id="hfCustomerId" name="customerId" />
</form>
@if (ViewData["Message"] != null)
{
<script type="text/javascript">
window.onload = function () {
alert("@ViewData["Message"]");
};
</script>
}
</body>
</html>
Screenshot
![ASP.Net Core Razor Pages: Populate jQuery AutoComplete from API]()
Demo
Downloads
