In this article I will explain with an example, how to populate (bind) WebGrid using Stored Procedure and Entity Framework in ASP.Net Core MVC.
The Stored Procedure will be called using Entity Framework in ASP.Net Core MVC.
 
 
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 .Net Core.
 
 
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 MVC Stored Procedure and Entity Framework, please refer my article ASP.Net Core MVC: Implement Search functionality using Entity Framework.
 
using System.Data.SqlClient;
using System.Linq;
using Microsoft.EntityFrameworkCore;
 
namespace WebGrid_Stored_Proc_MVC_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);
        }
    }
}
 
 
Controller
The Controller consists of the following two Action methods.
Action method for handling GET operation
Inside this Action 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 returned to the View.
 
Action method for handling POST operation
This Action method is executed when the Search Button is clicked.
Inside this Action method, the value of the Customer Name TextBox is submitted to this Action method and the received value is passed as parameter to the SearchCustomers function.
Finally, the returned results are converted into Generic List collection and returned to the View.
public class HomeController : Controller
{
    private DBCtx Context { get; }
 
    public HomeController(DBCtx _context)
    {
        this.Context = _context;
    }
 
    public IActionResult Index()
    {
        return View(this.Context.SearchCustomers("").ToList());
    }
 
    [HttpPost]
    public IActionResult Index(string customerName)
    {
        return View(this.Context.SearchCustomers(customerName).ToList());
    }
}
 
 
View
Inside the View, in the very first line the Customer Model is declared as IEnumerable which specifies that it will be available as a Collection.
Then, the NonFactors.Mvc.Grid namespace is inherited inside the View.
The View consists of an HTML Form with following ASP.Net Tag Helpers attributes, a HTML TextBox and a Submit Button.
asp-action – Name of the Action. In this case the name is Index.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
When the Search button is clicked, the Form is submitted.
 
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 on how to use MVC6 Grid in ASP.Net Core MVC, please refer my article Using MVC6 Grid in .Net Core.
 
@model IEnumerable<WebGrid_Stored_Proc_MVC_Core.Models.Customer>
@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 asp-action="Index" asp-controller="Home" method="post">
        <span>Customer Name:</span>
        <input type="text" name="CustomerName" />
        <input type="submit" value="Search" />
        <br /><br />
        @(Html.Grid(Model).Build(columns =>
            {
                columns.Add(model => model.CustomerID).Titled("Customer Id");
                columns.Add(model => model.ContactName).Titled("Contact Name");
                columns.Add(model => model.City).Titled("City");
                columns.Add(model => model.Country).Titled("Country");
            })
        )
    </form>
</body>
</html>
 
 
Screenshot
ASP.Net Core MVC: Populate (Bind) WebGrid using Stored Procedure and Entity Framework
 
 
Downloads
Download Code