Display DataTable data in ASP.NET MVC
In Asp.Net we can easily display the Data Table data from data base in GridView or ListView or any other control easily by binding the Data Table to DataSource property of specific control. But in Asp.Net MVC we don't have regular Asp.Net controls, only we have HTML controls. In this control we discuss how to display the DataTable data in Asp.Net MVC with an example.
Open Microsoft Visual Studio 2013 => Create New Project for Asp.Net MVC 4 Web Application and name it as MVCDataTable.
Add some class to Models folder and name it as Employees.cs. Add GetEmpData() method to Employees Model class which returns some data table as shown below.
using System.Data;
namespace MVCDataTable.Models
{
public class Employees
{
public DataTable GetEmpData()
{
DataTable dt = new DataTable();
dt.Columns.Add("Id");
dt.Columns.Add("Name");
dt.Columns.Add("EmailId");
dt.Rows.Add("1000", "Raj", "raj@XYZ.com");
dt.Rows.Add("1001", "Bob", "bob@XYZ.com");
dt.Rows.Add("1002", "Smith", "smith@XYZ.com");
dt.Rows.Add("1003", "Steve", "steve@XYZ.com");
dt.Rows.Add("1004", "Bell", "bell@XYZ.com");
dt.Rows.Add("1005", "John", "john@XYZ.com");
return dt;
}
}
}
For easy understanding I just created some data table with simple data, we can connect to data base to get the data.
Add controller to Controllers folder and name it as HomeController as shown below.
using System.Web.Mvc;
namespace MVCDataTable.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
Models.Employees objEmps = new Models.Employees();
ViewData["AllEmpData"] = objEmps.GetEmpData();
return View();
}
}
}
As shown above we are creating the object to Employees Model class and fetching the Employees data by calling GetEmpData() method. In Asp.Net MVC we can use ViewData to pass data from controller to View.
Lets create View by right click on Index() method and select Add View as shown below.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Employees Data</title>
</head>
<body>
<div>
<table border="1">
<tr>
<th>Employee Id</th>
<th>Name</th>
<th>Email</th>
</tr>
@if(ViewData["AllEmpData"] != null)
{
foreach (System.Data.DataRow dr in (ViewData["AllEmpData"] as System.Data.DataTable).Rows)
{
<tr>
<td>
@dr["Id"]
</td>
<td align="left">
@dr["Name"]
</td>
<td>
@dr["EmailId"]
</td>
</tr>
}
}
</table>
</div>
</body>
</html>
As shown above we are looping the ViewData["AllEmpData"] which carries the DataTable data from Controller and binding to simple HTML table.
Execute the application and the output is as shown below.
MVCDataTable.zip (5.9MB)
