In this article I will explain with an example, how to populate jQuery AutoComplete form API in ASP.Net Core Razor Pages.
Note: For more details on ASP.Net Core Razor Pages, please refer my article ASP.Net Core 7 Razor Pages: Hello World Tutorial with Sample Program example.
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",
    "CustomerId": 3,
    "Name""Suzanne Mathews",
    "CustomerId": 4,
    "Name""Robert Schidner",
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.
@model Populate_jQuery_Autocomplete_C_Razor.Pages.IndexModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
    Layout = null;
<!DOCTYPE html>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="" />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        $(function () {
                source: function (request, response) {
                    var prefix = request.term.toLowerCase();
                    $.get("", 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) {
                minLength: 0
            }).focus(function () {
    <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" />
    @if (ViewData["Message"] != null)
        <script type="text/javascript">
            window.onload = function () {
ASP.Net Core Razor Pages: Populate jQuery AutoComplete from API