In this article I will explain with an example, how to populate (bind) WebGrid (GridView) using MySQL database and Entity Framework in ASP.Net MVC.
 
 

Database

I have made use of the following table Customers with the schema as follows.
ASP.Net MVC:Populate WebGrid using MySQL database and Entity Framework
 
I have already inserted few records in the table.
ASP.Net MVC:Populate WebGrid using MySQL database and Entity Framework
 
Note: You can download the database table SQL by clicking the download link below.
            Download SQL file
 
 

Download and Install the MySQL Connector

You will need to download and install the MySQL Connector in order to connect to the MySQL database in ASP.Net.
For details on how to download and install the MySQL Connector, please refer:

DLL Download

Download, install and reference MySQL Connector in ASP.Net MVC

Nuget

Install MySql.Data Nuget Package
 
 

Entity Framework Model

Once the Entity Framework is configured and connected to the MySQL database table, the Model will look as shown below.
Note: For more details on configuring and connecting Entity Framework to MySQL database, please refer my article Configuring and connecting Entity Framework to MySQL database.
ASP.Net MVC:Populate WebGrid using MySQL database and Entity Framework
 
 

Controller

The Controller consists of following Action method.

Action method for handling GET operation

Inside this Action method, the records from the Customers Table of the MySQL database are fetched using Entity Framework and returned to the View.
public class HomeController : Controller
{
    // GET: Home
    public ActionResultIndex()
    {
        CustomersEntities entites = new CustomersEntities();
        return View(entites.customers.ToList());
    }
}
 
 

View

HTML Martkup

Inside the View, in the very first line the Customer Entity is declared as IEnumerable which specifies that the Model will be available as a Collection.
The WebGrid is initialized with the Model i.e. IEnumerable collection of Customer Entity class objects as source.
The WebGrid is created using the GetHtml method with the following parameters.
HtmlAttributes – It is used to set the HTML attributes to the HTML Table generated by WebGrid such as ID, Name, Class, etc.
Columns – It is used to specify the columns to be displayed in WebGrid and also allows to set specific Header Text for the columns.
Note: If the columns are not specified then WebGrid will display all columns supplied by its source. It is very similar to the AutoGenerateColumns feature of the ASP.Net GridView.
 
@model IEnumerable<customer>
@{
    Layout = null;
    WebGrid webGrid = new WebGrid(source: Model, canSort: false, canPage: false);
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @webGrid.GetHtml(
        htmlAttributes: new { @id = "WebGrid", @class = "Grid"},
        columns: webGrid.Columns(
                 webGrid.Column("CustomerId", "CustomerId"),
                 webGrid.Column("Name", "Name"),
                 webGrid.Column("Country", "Country")))
</body>
</html>
 
 

Screenshot

ASP.Net MVC:Populate WebGrid using MySQL database and Entity Framework
 
 

Downloads

Download Code