In this article I will explain with an example, how to populate (bind) WebGrid using Stored Procedure and Entity Framework in ASP.Net Core Razor Pages.
The Stored Procedure will be called using Entity Framework in ASP.Net Core Razor Pages.
 
 
MVC6 Grid for ASP.Net Core
This article makes use of MVC6 Grid library for implementing WebGrid, as it is not available by default in .Net Core.
For more details on how to use MVC6 Grid, please refer the article Using MVC6 Grid in ASP.Net Core Razor Pages.
 
 
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 
Stored Procedure
You will need to create the following Stored Procedure in the Northwind Database. The Stored Procedure accepts @ContactName parameter which is used to perform a search on the records in Customers Table.
CREATE PROCEDURE Customers_SearchCustomers
    @ContactName NVARCHAR(30)
AS
BEGIN
    SET NOCOUNT ON;
    SELECT TOP 10 *
    FROM Customers
    WHERE ContactName LIKE '%' + @ContactName + '%'
END
 
 
Model
The Model class consists of the following four properties.
public class Customer
{
    public string CustomerID { get; set; }
    public string ContactName { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
}
 
 
Database Context
Once the Stored Procedure and Entity Framework is configured and connected to the database table, the Database Context will look as shown below.
Note: For beginners in ASP.Net Core Razor Pages Stored Procedure and Entity Framework, please refer my article Using Stored Procedure in ASP.Net Core Razor Pages.
 
using System.Data.SqlClient;
using System.Linq;
using Microsoft.EntityFrameworkCore;
 
namespace WebGrid_Stored_Proc_Razor_Core
{
    public class DBCtx : DbContext
    {
        public DBCtx(DbContextOptions<DBCtx> options) : base(options)
        {
        }
 
        public DbSet<Customer> Customers { get; set; }
 
        public IQueryable<Customer> SearchCustomers(string contactName)
        {
            SqlParameter pContactName = new SqlParameter("@ContactName", contactName);
            return this.Customers.FromSql("EXECUTE Customers_SearchCustomers @ContactName", pContactName);
        }
    }
}
 
 
Razor PageModel (Code-Behind)
The PageModel consists of following two Handler methods.
Handler method for handling GET operation
Inside this Handler method, the SearchCustomers method of the Database Context class is called and an empty string is passed as parameter.
Finally, the returned results are converted into Generic List collection and assigned to the public property Customers and returned to the Razor Page.
 
Handler method for handling POST operation
This Handler method is executed when the Search button is clicked.
Inside this Handler method, the value of the Customer Name TextBox is submitted to this Handler method and the received value is passed as parameter to the SearchCustomers function.
Finally, the returned results are converted into Generic List collection and assigned to the public property Customers and returned to the Razor Page.
public class IndexModel : PageModel
{
    private DBCtx Context { get; }
 
    public IndexModel(DBCtx _context)
    {
        this.Context = _context;
    }
 
    public List<Customer> Customers { get; set; }
 
    public void OnGet()
    {
        this.Customers = this.Context.SearchCustomers("").ToList();
    }
 
    public void OnPostSearch(string customerName)
    {
        this.Customers = this.Context.SearchCustomers(customerName).ToList();
    }
}
 
 
Razor Page (HTML)
Inside the Razor Page, the NonFactors.Mvc.Grid namespace is inherited.
The Razor Page consists of an HTML Form with following ASP.Net Tag Helpers attribute, a HTML TextBox and a Submit Button.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Search Button has been set with the POST Handler method using the asp-page-handler attribute.
When the Search button is clicked, the Form is submitted.
Note: In the Razor PageModel, the Handler method name is OnPostSearch but here it will be specified as Search when calling from the Razor HTML Page.
 
Displaying the records
The IEnumerable collection of Customer Model class object is passed to the Grid function of the MVC6 Grid HTML Helper class.
Note: For more details about WebGrid in ASP.Net Core Razor Pages, please refer my article Using MVC6 Grid in ASP.Net Core Razor Pages.
 
@page
@model WebGrid_Stored_Proc_Razor_Core.Pages.IndexModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@using NonFactors.Mvc.Grid;
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/css/mvc-grid/mvc-grid.css" rel="stylesheet" />
</head>
<body>
    <form method="post">
        <span>Customer Name:</span>
        <input type="text" name="CustomerName" />
        <input type="submit" value="Search" asp-page-handler="Search" />
        <br /><br />
        @(Html.Grid(Model.Customers).Build(columns =>
            {
                columns.Add(model => model.CustomerID).Titled("Customer Id");
                columns.Add(model => model.ContactName).Titled("Customer Name");
                columns.Add(model => model.City).Titled("City");
                columns.Add(model => model.Country).Titled("Country");
            })
        )
    </form>
</body>
</html>
 
 
Screenshot
ASP.Net Core Razor Pages: Populate (Bind) WebGrid using Stored Procedure and Entity Framework
 
 
Downloads
Download Code