How to bind json data into html table using jquery

Question

HI friends,

 

i am calling an action method through ajax and returning a list as json from the controllers action method and now trying to bind the data of list to html table,

i have tried below code, someone please help.

 

Action Method

 

public JsonResult ShowAttendance(int empid, int branchid, int departmentid, int designationid, string seletedmonth)
{
DataTable Attendance = new DataTable();
List<AttendanceData> attendance = new List<AttendanceData>();
using (SqlConnection connection = DLConnection.getConnectionInstance())
{
SqlParameter[] parameter = new SqlParameter[5];
parameter[0] = new SqlParameter("@employeeid",empid);
parameter[1] = new SqlParameter("@BranchId", branchid);
parameter[2] = new SqlParameter("@DepartmentId", departmentid);
parameter[3] = new SqlParameter("@DesignationId", designationid);
parameter[4] = new SqlParameter("@NameOfTheMonth", seletedmonth);
SqlDataReader dr;
dr = SqlHelper.ExecuteReader(connection, CommandType.StoredProcedure, "Usp_getattendance",parameter);
Attendance.Load(dr);
AttendanceData record = new AttendanceData();
for (int i = 0; i < Attendance.Rows.Count; i++)
{
AttendanceData data = new AttendanceData();
data.Date = Attendance.Rows[i]["Dates"].ToString();
data.Day = Attendance.Rows[i]["Day"].ToString();
data.Intime = Attendance.Rows[i]["intime"].ToString();
data.Outtime = Attendance.Rows[i]["Outtime"].ToString();
data.Firsthalf = Attendance.Rows[i]["First_half"].ToString();
data.Secondhalf = Attendance.Rows[i]["Second_half"].ToString();
data.Remark = Attendance.Rows[i]["Remarks"].ToString();
attendance.Add(data);
}
}

 

View  Part

 

 

@{

Layout = "~/Areas/Payroll_Management/Views/Shared/AdminSite.cshtml";
}

<input type="hidden" id="CounterValue"/>
<input type="hidden" id="hdnSearchtagValue"/>
<input type="hidden" id="hdn_delete" />
<div class="common-heading-item">
<div class="common-heading-left">
<h1>Attendance View</h1>
</div>
<div class="common-heading-right">
<ul>
<li>
<i class="fa fa-arrow-left" title="Back" onclick="window.history.back();"></i>
</li>
</ul>
</div>
</div>

@Model HRMS.Web.Areas.AttendanceManagement.Models.EmployeeDetails;

<div class="padding-all-side">
<div class="box_all form-group">
<div class="row">
<div class="form-group col-sm-6">
<div class="row">
<div class="col-sm-4 text-right">
<label>Employee Code</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" disabled="disabled" value='@Model.Empcode'/>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="form-group col-sm-6">
<div class="row">
<div class="col-sm-4 text-right">
<label>Employee Name</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" disabled="disabled" value='@Model.name' />
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<div class="row">
<div class="col-sm-4 text-right">
<label>Department</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" disabled="disabled" value='@Model.department' />
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="form-group col-sm-6">
<div class="row">
<div class="col-sm-4 text-right">
<label>Designation</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" disabled="disabled" value='@Model.designation' />
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<div class="row">
<div class="col-sm-4 text-right">
<label>Month</label>
</div>
<div class="col-sm-8">
<select class="form-control" id="list">
<option>-- Please Select --</option>
<option>@Model.months[2]</option>
<option>@Model.months[1]</option>
<option selected="selected">@Model.months[0]</option>
</select>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="form-group col-sm-6">
<div class="row">
<div class="col-sm-4 text-right">
<label>Year</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" disabled="disabled" value='@Model.currentyear' />
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<div class="row">
<div class="col-sm-4 text-right">
<label>Shift Name</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" disabled="disabled" value='@Model.shiftname' />
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="form-group col-sm-6">
<div class="row">
<div class="col-sm-4 text-right">
<label>Shift Start Time</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" disabled="disabled" value='@Model.shiftstart' />
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4 text-right">
<label>Shift End Time</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control" disabled="disabled" value='@Model.shiftend' />
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8">
<a href="#;" class="btn-blue-md" id="btn-view">View Attendance</a>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div style="display:none;" class="tbl-view">
<div>
<h3 class="table-heading">Attendance List</h3>
</div>
<div class="all-table mvc-table">
<div class="table-responsive">
<table id="tblattendance">

</div>
</div>
</div>
</div>

</div>

<script>
debugger;
$(document).ready(function () {
$('#btn-view').click(function (value) {
var monthname = $('#list option:selected').text();
var url = 'attendancemanagement/attendance/[email protected]&branchid=1&[email protected]&[email protected]&seletedmonth='+monthname;
$.ajax({
type: 'POST',
dataType: 'json',
url: url,
data: '',
success: function (Data) {

var table = $('#tblattendance');
table.html('');
table.append('<thead>');
table.append('<tr>');
table.append('<td>Date</td>');
table.append('<td>Day</td>');
table.append('<td>In Time</td>');
table.append('<td>Out Time</td>');
table.append('<td>First Half</td>');
table.append('<td>Second Half</td>');
table.append('<td>Remarks</td>');
table.append('</tr>');
table.append('</thead>');
table.append('<tbody>');
var list = Data.attendance;
$.each(list, function (i, item) {

table.append('<tr>');
table.append('<td>' + item.Date + '</td>');
table.append('<td>' + item.Day + '</td>');
table.append('<td>' + item.Intime + '</td>');
table.append('<td>' + item.Outtime + '</td>');
table.append('<td>' + item.Firsthalf + '</td>');
table.append('<td>' + item.Secondhalf + '</td>');
table.append('<td>' + item.Remark + '</td>');
table.append('</tr>');

});
table.append('</tbody>');
table.append('</table>');
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('something went wrong');
}
});

$('.tbl-view').slideDown();
});
});
</script>