In this tutorial, I am going to show you how to Display CSV Data in ASP.NET MVC in a tabular format. The data from the CSV file will be parsed and Display in the Tabular format using Jquery.

Introduction:

Here I am going to develop a simple example in ASP.NET MVC that will show CSV(Comma Separated Value) data in the Grid format using Jquery.

Display CSV Data in ASP.NET MVC:

Step 1- Create an ASP.NET MVC project DisplayCSVDataInGrid.

Display CSV Data

Choose and Empty Solution and Proceed. An Empty application will be created.

Step 2- Right Click on the Model folder and add a class called Employee. Write the following code to Employee.cs file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DisplayCSVDataInGrid.Models
{
public class Employee
{
public string EmployeeID { get; set; }
public string EmployeeName { get; set; }
public string Designation { get; set; }
public string Skill { get; set; }

}
}

Step 3-  Now right click on the Controller folder and Create a Controller called HomeController. HomeController with the following code will be created.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DisplayCSVDataInGrid.Models;
namespace DisplayCSVDataInGrid.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/

public ActionResult Index()
{
return View();
}



}
}

Step 4- Add the following JSON method in HomeController.

public JsonResult GetCSVData()
{
string path = Server.MapPath("~/Content/Employee.csv");
string csvData = System.IO.File.ReadAllText(path);
List<Employee> lstEmployee = new List<Employee>();
//Execute a loop over the rows.
string[] sCSVData = csvData.Split('\n');
for (int iCount = 1; iCount < sCSVData.Length-1; iCount++)
{

lstEmployee.Add(new Employee
{
EmployeeID = sCSVData[iCount].Split(',')[0],
EmployeeName = sCSVData[iCount].Split(',')[1],
Designation = sCSVData[iCount].Split(',')[2],
Skill = sCSVData[iCount].Split(',')[3]
});
}
 
return Json(lstEmployee, JsonRequestBehavior.AllowGet);

}

Step 5-  Now right Click on Index Action method and add a View called Index.cshtml as shown in below image.

Display CSV Data

Step 6- Write the following code to Index.cshtml file.

@{
ViewBag.Title = "Index";
}
<html>
<head>
<title>

Display CSV Data in Grid
</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="~/Css/BootstrapTableCss.css" rel="stylesheet" />
<script type="text/javascript">
GetCSVData();
function GetCSVData() {
$.ajax({
url: '/Home/GetCSVData/',
dataType: "json",
type: "GET",
contentType: 'application/json; charset=utf-8',

success: function (data) {
for (var iCount = 0; iCount < data.length; iCount++)
{
$("#tData").append("<tr>"+
" <td data-title='Employee ID'>"+
data[iCount].EmployeeID+
"</td>" +
" <td data-title='Employee Name'>" +
data[iCount].EmployeeName +
"</td>" +
" <td data-title='Designation'>" +
data[iCount].Designation +
"</td>" +
" <td data-title='Skill'>" +
data[iCount].Skill +
"</td>" +
" </tr>")
}
}

});
}
</script>
</head>
<body>
<h2>
Employee Details 
</h2>
<hr />
<div class="container">
<div class="row">

<div id="no-more-tables">
<table class="col-md-12 table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th>
Employee ID
</th>
<th>
Employee Name
</th>
<th>
Designation
</th>
<th>
Skill
</th>



</tr>

</thead>
<tbody id="tData">
</tbody></table></div>
</div>
</div>
</body>
</html>

Step 7- Create a Content folder in root location and the Employee.csv file. You can download Employee.csv file from here.

Output:

Display CSV Data

View More:

Conclusion:

I hope this post is useful for you. I would like to have your feedback, comments and suggestions.

Thank You.

Leave a Comment