There are few JQuery Plugin’s on the internet, one on them is column/row hover jQuery Plug-in.I am going to demonstrate how to use column hover Plug-in with ASP.NET to display student information by fetching JSON data from server side to client side.When you take your mouse over the table column, column will be highlighted. This example uses the JQuery library. I have made this example in Visual studio 2010.when you create a web project in Visual Studio 2010, jQuery include in web project. If you don’t have Visual Studio 2010 then you can download JQuery latest version from here.
Let start's. Open you Visual Studio 2010. Create a new Web Application. Open you Default.aspx Page. Add the following code given below.
[WebMethod]
public static List fetchStudentRecords()
{
List AddRecords = new List();
AddRecords.Add(new Student { RollNumber = 1, FullName = "Aamir Hasan", Class = "Five", Marks = 94, Gender = "Male" });
AddRecords.Add(new Student { RollNumber = 2, FullName = "Scott Hanselman ", Class = "Four", Marks = 93, Gender = "Male" });
AddRecords.Add(new Student { RollNumber = 3, FullName = "Saba Khan", Class = "Three", Marks = 82, Gender = "Female" });
AddRecords.Add(new Student { RollNumber = 4, FullName = "Nadia yasir", Class = "Nine", Marks = 80, Gender = "Female" });
AddRecords.Add(new Student { RollNumber = 5, FullName = "Mahwish Hasan", Class = "Two", Marks = 79, Gender = "Female" });
AddRecords.Add(new Student { RollNumber = 6, FullName = "Aamir Hassan", Class = "One", Marks = 99, Gender = "Male" });
AddRecords.Add(new Student { RollNumber = 7, FullName = "Karoly Domonyi", Class = "Five", Marks = 69, Gender = "Male" });
AddRecords.Add(new Student { RollNumber = 8, FullName = "Sana Ahmed", Class = "Five", Marks = 93, Gender = "Female" });
AddRecords.Add(new Student { RollNumber = 9, FullName = "Awais Ahmed", Class = "Ten", Marks = 91, Gender = "Male" });
return AddRecords;
}
}
public class Student
{
public int RollNumber { get; set; }
public String FullName { get; set; }
public int Marks { get; set; }
public string Class { get; set; }
public string Gender { get; set; }
}
Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4
Note: Add System.Web.Services at the top of page to work web Method
Open your Default.aspx Page add css reference under head tag, for table style.
Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4
Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
Add jQuery and table hover reference under head tag.
Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.tablehover.js" type="text/javascript"></script>
Add the following code to retrieve JSON object using $.ajax method.
Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
url: "Default.aspx/fetchStudentRecords",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#records").html(GenerateTable(data.d));
$('#table1').tableHover({ colClass: 'hover' });
}
});
function GenerateTable(data) {
var totalRows = data.length;
var Table = "<table id='table1'>";
Table += "<thead><tr><th>Roll No.</th><th>Full Name</th><th>Marks</th><th>Class</th><th>Gender</th></tr></thead><tbody>";
for (index = 0; index < totalRows; index++) {
Table += "<tr ><td>" + data[index].RollNumber + "</td><td >" + data[index].FullName + "</td><td>" + data[index].Marks + "</td><td>" + data[index].Class + "</td><td>" + data[index].Gender + "</td></tr>";
}
Table += "</tbody></table>";
return Table;
}
});
</script>
Above you see, on page load, returning Date objects in the form of JSON Serialized List<Student>. Table is generated when JSON data is returned.
Add following code under the body section.
<h2>Table Hover jQuery plugin with asp.net using csharp</h2>
<div id="records"> </div>
Press Cltr+F5 to save and run your web application. Below you can see output
you can download entire source code from here. Click here to see online demo.