Bind Webgrid (GridView) with Entity Framework, Asp.net Core MVC, C#, SQL

In today's article I you how you can bind webgrid or gridview data from database with page no in asp.net core mvc with Entity framework C#. Here we will simply pull the data from database and use model class property to bind with webgrid or gridview. Here we will use asp.net core 10 mvc use.

In my previous article i have shown you Open Form MDI Parent Using C#.Net and VB.Net | Open Only One Form in MDI in C#, How to Generate SQL Server Database Scripts Automatically?, Download File From wwwroot Folder Asp.Net Core 10 Using C#.

You my also like few of the other articles Asp.Net Core 8 MVC: Connect to Sql Server Database with EF Using C#, How to Get Data from SQL Database in Asp.net Core MVC Using C#.Net, Bind Dropdown List from Database in Asp.Net Core MVC Using C#.Net, Asp.Net Core MVC Login Form Using Ms SQL, Entity Framework, C#.Net, Search Record from Database in Asp.Net Core MVC Using EF, C#.Net, Multiple Selection in ListBox with Checkbox in Asp.Net Core MVC, C#.

So for this article first we will create a data base in ms sql server database and add a table with few data.

Now we will create a new asp.net core 10 mvc and add a model class as shown below.

public class EmployeeModel
{
    public List<Employee> Employees { get; set; }
    public int SelectePageNo { get; set; }
    public List<int> Pageno { get; set; }
}
public class Employee
{
    public int Id { get; set; }
    public string EmployeeName { get; set; }
    public string Department { get; set; }
    public string Salary { get; set; }
}

Here in this article, I have added a class named as Employee which is having property of employees and a class named as EmployeeModel in this I have defined the page no employee list current selected and page no list. Now let's make connection to database with EF core using scaffold command. But before we need to install below mention three of the nuget packages. (Here is the link to check how to connect to SQL server database using EF core in asp.net core mvc application)

Microsoft.EntityFrameworkCore.Tools
Microsoft.EntityFrameworkCore.Design
Microsoft.EntityFrameworkCore.SqlServer

After installing we will run the scaffold to get all table object. Now we will add a controller class file and add a http get method.

 [HttpGet]
 public IActionResult Index(int pageNumber = 1)
 {
     EmployeeModel employeeModel = new EmployeeModel();
     employeeModel.EmployeeDetails = new List<EmployeeDetail>();
     employeeModel.Pageno = new List<int>();
     employeeModel.SelectePageNo = pageNumber;
     int perPageItem = 3;
     GetEmployeeDetail(employeeModel, perPageItem);
     return View(employeeModel);
 }

 private static void GetEmployeeDetail(EmployeeModel employeeModel, int perPageItem)
 { 
     //DB contect
     EmployeeContext employeeContext = new EmployeeContext();

     //employee List
     var employeeListFromDB = employeeContext.Employees.Skip((employeeModel.SelectePageNo - 1) * perPageItem).Take(perPageItem).ToList();
     foreach (var item in employeeListFromDB)
     {
         employeeModel.EmployeeDetails.Add(new EmployeeDetail
         {
             Id = item.Id,
             EmployeeName = item.EmployeeName,
             Department = item.Department,
             Salary = item.Salary.ToString()
         });
     }
     //Total Employee page no
     for (int i = 0; i < Math.Ceiling((decimal)employeeContext.Employees.Count() / perPageItem); i++)
     {
         employeeModel.Pageno.Add(i + 1);
     }
 }

In above code I have accessed the date of employee data from database and after that calculated the total page no and added into the list of integer type. Here I have passed the current selected page no a parameter and default value selected as 1 so on page load it will be 1. This value will change one's user will change the page no.

Now we will create the view and add the below code.

@model EmployeeModel
@{
    ViewData["Title"] = "Index";
}

<table width="100%" class="table" ?>
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Department</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var emp in Model.EmployeeDetails)
        {
            <tr>
                <td>@emp.Id</td>
                <td>@emp.EmployeeName</td>
                <td>@emp.Department</td>
                <td>@emp.Salary</td>
            </tr>
        }
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">
                @for (int i = 1; i <= Model.Pageno.Count; i++)
                {
                    if (i == Model.SelectePageNo)
                    {
                        <strong>@i</strong>
                    }
                    else
                    {
                        <a asp-action="Index" asp-route-pageNumber="@i">@i</a>
                    }
                }
            </td>
        </tr>
</table>

In above code i have added the reference of model class file and used table tag to show the data in tabular format. To display the page no i have used hyper link. Now we have done run the code to check the output.