Hi zeeshanpas
Please refer below sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet"
type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="col-sm-12">
<table id="tbl_NetworkList" style="width: 360px;" class="table table-hover table-bordered table-striped table-responsive">
<thead>
<tr>
<th>Subject</th>
<th>School_level</th>
<th>Course</th>
</tr>
</thead>
<tbody id="tblBody_NetworkList">
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "Default.aspx/GetData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var tableBody = $('#tblBody_NetworkList');
$.each(r.d, function (index, item) {
tableBody.append('<tr><td name="sub">' + item.Subject + '</td><td name="sclevl">' + item.School_level + '</td><td name="selectdcours">' + item.Course + '</td><td></td><td class="btncolwidth"><ul class="icons-link"><li><a name="btn_EditNewtork" href="javascript:void(0);" title="Click on this link to edit Network details."><i class="fa fa-pencil"></i><span class="pl5 s10">Edit</span></a><li><li><a name="btn_DeleteNewtork" value="Edit" href="javascript:void(0);" style="margin-left:15px;" title="Click on this link to Delete."><i class="fa fa-trash-o"></i><span class="pl5 s10 ">Delete</span></a></li> </ul></td></tr>');
});
}
});
$('#tbl_NetworkList tbody').on('click', 'a[name=btn_EditNewtork]', function () {
EditMode = true;
var $tblrow = $(this).closest('tr');
var subject = $tblrow.find("td").eq(0).text();
var schoollevel = $tblrow.find("[name=sclevl]").text();
var selectedcourses = $tblrow.find("[name=selectdcours]").text();
var data = subject + "\n" + schoollevel + "\n" + selectedcourses;
alert(data);
});
});
</script>
</form>
</body>
</html>
Namespace
C#
using System.Collections.Generic;
using System.Data;
using System.Web.Services;
VB.Net
Imports System.Collections.Generic
Imports System.Data
Imports System.Web.Services
Code
C#
[WebMethod]
public static List<Data> GetData()
{
List<Data> items = new List<Data>();
items.Add(new Data { Subject = "ASP.Net", School_level = "High", Course = "Bscit" });
items.Add(new Data { Subject = "Java", School_level = "Medium", Course = "Bscit" });
items.Add(new Data { Subject = "Python", School_level = "Low", Course = "Bscit" });
return items;
}
public class Data
{
public string Subject { get; set; }
public string School_level { get; set; }
public string Course { get; set; }
}
VB.Net
<WebMethod>
Public Shared Function GetData() As List(Of Data)
Dim items As List(Of Data) = New List(Of Data)()
items.Add(New Data With {
.Subject = "ASP.Net",
.School_level = "High",
.Course = "Bscit"
})
items.Add(New Data With {
.Subject = "Java",
.School_level = "Medium",
.Course = "Bscit"
})
items.Add(New Data With {
.Subject = "Python",
.School_level = "Low",
.Course = "Bscit"
})
Return items
End Function
Public Class Data
Public Property Subject As String
Public Property School_level As String
Public Property Course As String
End Class
Screenshot
