In this article, I will show you json data bind in table using asp.net mvc
model :
public struct EmployeeModel
{
public int Rowno { get; set; }
public int Id { get; set; }
public string Name { get; set; }
public string EmailId { get; set; }
public string MobileNo { get; set; }
public string EmployeeData { get; set; }
}
controller:
public List<EmployeeModel> GetListEmployee()
{
var list = new List<EmployeeModel>()
{
new EmployeeModel()
{
Id = 1,
Name = "ABC",
EmailId = "abc@gmail.com",
MobileNo ="1234567890"
},
new EmployeeModel()
{
Id = 2,
Name = "PQR",
EmailId = "pqr@gmail.com",
MobileNo ="9234567890"
},
new EmployeeModel()
{
Id = 3,
Name = "xyz",
EmailId = "xyz@gmail.com",
MobileNo ="8234567890"
}
};
return list;
}
public JsonResult EmployeeList()
{
var obj = new EmployeeModel();
int Rowno = 1;
try
{
var data = GetListEmployee();
var list = new List<EmployeeModel>();
foreach (var item in data)
{
list.Add(new EmployeeModel
{
Rowno = Rowno++,
Id = item.Id,
Name = item.Name,
EmailId = item.EmailId,
MobileNo = item.MobileNo,
});
}
if (list.Count > 0)
{
obj.EmployeeData = JsonConvert.SerializeObject(list);
}
}
catch (Exception ex)
{
ex.ToString();
}
return Json(obj);
}
public IActionResult JsonBindEmployee()
{
return View();
}
view:
@{
ViewData["Title"] = "JsonBindEmployee";
Layout = null;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
<div class="modal fade" id="divEmployeeModal" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Employee Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="table-responsive">
<table id="EmployeeTbl" class="table table-striped">
<thead>
<tr>
<th scope="col"> # </th>
<th scope="col"> Name </th>
<th scope="col"> Email Id</th>
<th scope="col"> Mobile No</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="closePopUP">Close</button>
</div>
</div>
</div>
</div>
<div>
<button onclick="EmployeeListData();">Load Data</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
function EmployeeListData() {
$.ajax({
async: true,
type: "POST",
url: '@Url.Action("EmployeeList", "Demo")',
contentType: "application/json",
success: function (data) {
if (data != null) {
//debugger;
$('#divEmployeeModal').modal('show');
$('#EmployeeTbl tr').not(function () { return !!$(this).has('th').length; }).remove();
var EmployeePopUp = data.EmployeeData;
if (EmployeePopUp !== "" && EmployeePopUp !== null) {
var data = JSON.parse(EmployeePopUp);
if (data !== null) {
toastr.success("Employee Loaded!");
var listArray = data;
if (listArray.length > 0) {
for (var i = 0; i < listArray.length; i++) {
//debugger;
var obj = new Object();
obj = listArray[i];
fnAddEmployeeDetail(obj);
}
}
}
}
}
else {
toastr.error('Something Went Wrong!');
}
},
error: function (response) {
console.log(response);
}
});
}
function fnAddEmployeeDetail(obj) {
//debugger;
var htmlString = ''
+ '<td>' + obj.Rowno + '</td>'
+ '<td>' + obj.Name + '</td>'
+ '<td>' + obj.EmailId + '</td>'
+ '<td>' + obj.MobileNo + '</td>'
htmlString = '<tr id=' + obj.Rowno + '>'
+ htmlString
+ '</tr>';
$('#EmployeeTbl').append(htmlString);
}
</script>
0 Comments
if you have any doubts , please let me know