AutoComplete in ASP.NET Core Razor Pages and Entity Framework Core

Create a database named LearnASPNETCoreRazorPagesWithRealApps. This database have a table: Product table as below:

USE LearnASPNETCoreRazorPagesWithRealApps

/* Table structure for table `product` */

GO
CREATE TABLE Product (
    Id varchar(50) NOT NULL PRIMARY KEY,
	Name varchar(250) NOT NULL,
	Price money NOT NULL,
	Quantity int NOT NULL
)

/* Dumping data for table `product` */
GO
INSERT Product(Id, Name, Price, Quantity) VALUES ('p01', 'Laptop 1', 100.0000, 2)
INSERT Product(Id, Name, Price, Quantity) VALUES ('p02', 'Computer 1', 3.0000, 2)
INSERT Product(Id, Name, Price, Quantity) VALUES ('p03', 'Laptop 2', 300.0000, 5)
INSERT Product(Id, Name, Price, Quantity) VALUES ('p04', 'Computer 2', 3.0000, 2)
INSERT Product(Id, Name, Price, Quantity) VALUES ('p05', 'Computer 3', 8.0000, 2)




On the Visual Studio, create new ASP.NET Core Web Application project

Select Empty Template

Click Ok button to Finish

Use NuGet add libraries as below:

  • Microsoft.EntityFrameworkCore.SqlServer
  • Microsoft.EntityFrameworkCore.Proxies




Open appsettings.json file and add connection string as below

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=.;Database=LearnASPNETCoreRazorPagesWithRealApps;user id=sa;password=123456"
  }
}

Create new folder named Models. In Models folder, create new entity class as below:

Create new class named Product.cs as below:

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace LearnASPNETCoreRazorPagesWithRealApps.Models
{
    [Table("Product")]
    public class Product
    {
        [Key]
        public string Id { get; set; }

        public string Name { get; set; }

        public decimal Price { get; set; }

        public int Quantity { get; set; }

        public bool Status { get; set; }
    }
}

In Models folder, create new class named DataContext.cs as below:

using Microsoft.EntityFrameworkCore;

namespace LearnASPNETCoreRazorPagesWithRealApps.Models
{
    public class DatabaseContext : DbContext
    {
        public DatabaseContext(DbContextOptions<DatabaseContext> options) : base(options)
        {
        }

        public DbSet<Product> Products { get; set; }
    }
}




Open Startup.cs file and add new configurations as below:

using LearnASPNETCoreRazorPagesWithRealApps.Models;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace LearnASPNETCoreRazorPagesWithRealApps
{
    public class Startup
    {
        public IConfiguration configuration { get; }

        public Startup(IConfiguration _configuration)
        {
            configuration = _configuration;
        }

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();

            services.AddDbContext<DatabaseContext>(options => options.UseLazyLoadingProxies().UseSqlServer(configuration.GetConnectionString("DefaultConnection")));
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseStaticFiles();

            app.UseMvc();
        }
    }
}

Create new folder named Pages. In this folder, create new Razor Page named Index as below:

using System.Linq;
using LearnASPNETCoreRazorPagesWithRealApps.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace LearnASPNETCoreRazorPagesWithRealApps.Pages
{
    public class IndexModel : PageModel
    {
        private DatabaseContext db;

        public IndexModel(DatabaseContext _db)
        {
            db = _db;
        }

        public void OnGet()
        {
        }

        public IActionResult OnGetSearch(string term)
        {
            var names = db.Products.Where(p => p.Name.Contains(term)).Select(p => p.Name).ToList();
            return new JsonResult(names);
        }

    }
}




@page
@model LearnASPNETCoreRazorPagesWithRealApps.Pages.IndexModel

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(document).ready(function () {
            $('#productName').autocomplete({
                source: '@Url.Page("index", "search")'
            });
        });
    </script>
</head>
<body>

    <h3>AutoComplete</h3>
    <form>
        <input type="text" id="productName" placeholder="Input your keyword" />
    </form>

</body>
</html>




Open Index Razor Page with following url: http://localhost:1115

Input keyword need search

Output