In this article I will explain with an example, how to bind HTML Table in
ASP.Net MVC.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here
Configuring and connecting Entity Framework to database
Now I will explain the steps to configure and add
Entity Framework and also how to connect it with the database.
1. Inside the Solution Explorer window, Right Click on the Project and then click on Add and then click New Item option from the Context Menu.
![Bind HTML Table in ASP.Net MVC]()
2. From the Add New Item window, select the ADO.NET Entity Data Model and provide a suitable Name to it and then click Add button.
![Bind HTML Table in ASP.Net MVC]()
3. Then, the Entity Data Model Wizard will open up where you need to select EF Designer database option and click on Next button.
![Bind HTML Table in ASP.Net MVC]()
4. You will now be asked to connect and configure the Connection String to the database where you need to click on Next button.
![Bind HTML Table in ASP.Net MVC]()
5. Then, you will need to fill the connection properties i.e. Server name, Authentication, User name and Password if the SQL Server Authentication option is selected from Authentication DropDown.
You will also need to check the
Trust Server Certificate CheckBox and then click on
Test Connection to make sure all settings are correct.
After that, click on Ok button.
![Bind HTML Table in ASP.Net MVC]()
Once the Connection String is generated, check the yes, include the sensitive data in the connection string CheckBox and click on Next button to move to the next step.
![Bind HTML Table in ASP.Net MVC]()
6. Next, you will need to choose the
Entity Framework version to be used for connection and click on
Next button. Here I am choosing the
Entity Framework 5.0 version.
![Bind HTML Table in ASP.Net MVC]()
7. Then, you will need to select the
Tables you need to connect and work with
Entity Framework and click on
Finish button. Here
Customers Table is selected.
![Bind HTML Table in ASP.Net MVC]()
Once you click on Finish button, you will have the Entity Data Model ready with the Customers Table of the Northwind Database.
![Bind HTML Table in ASP.Net MVC]()
Namespaces
You will need to import the following namespace.
using System.Data.Entity;
Controller
The
Entity Framework is now configured and hence now we can create a Controller and write code to fetch the records from the
Customers Table of the
Northwind Database.
The Controller consists of following Action method.
Action method for handling GET operation
Inside the Index Action method, the Top 10 Customer records are fetched using
Entity Framework and returned to the View.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
NorthwindEntities entities = new NorthwindEntities();
return View(from customer in entities.Customers.Take(10)
select customer);
}
}
View
Adding a View
Now you will need to Right Click inside the Controller class and click on the Add View option in order to create a View for the Controller.
The Name of the View is set to Index, the Template option is set to Empty and Model class is set to Customer.
![Bind HTML Table in ASP.Net MVC]()
View Markup
Inside the View, in the very first line the Customer Entity is declared as IEnumerable which specifies that it will be available as a Collection.
For displaying the records, an
HTML Table is used. A
FOREACH loop will be executed over the Model which will generate the
HTML Table rows with the Customer records.
@model IEnumerable<Entity_Framework_MVC.Customer>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<h4>Customers</h4>
<hr />
<table cellpadding="0" cellspacing="0">
<tr>
<th>Customer Id</th>
<th>ContactName</th>
<th>City</th>
<th>Country</th>
</tr>
@foreach (Customer customer in Model)
{
<tr>
<td>@customer.CustomerID</td>
<td>@customer.ContactName</td>
<td>@customer.City</td>
<td>@customer.Country</td>
</tr>
}
</table>
</body>
</html>
Screenshot
![Bind HTML Table in ASP.Net MVC]()
Downloads
