aspx Tutorial

NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services,
Advertise Here

Toolbar

Get our toolbar!

Advertize



{#advanced_dlg.about_title}
by Fahad Ahmed   on Friday, September 9, 2011
This article is about creating a folder in SharePoint 2010 and then adding items in that folder programmatically using Visual Studio 2010... More
{#advanced_dlg.about_title}
by Aamir Hasan   on Monday, August 29, 2011
You can easily build your pages using coding style in Visual Studio 2010.. More
{#advanced_dlg.about_title}
by Aamir Hasan   on Monday, June 6, 2011
Microsoft will be released Service Pack 1 for Microsoft Office 2010, Project Professional 2010, Project Server 2010 and SharePoint Server 2010 at the end of June 2011 More
{#advanced_dlg.about_title}
by Aamir Hasan   on Tuesday, April 5, 2011
I have noticed that many developers have problems when they face “407 Proxy Authentication Required” exception on the internet by application. Your application required proxy server when you use your application behind the LAN. More
{#advanced_dlg.about_title}
by Aamir Hasan   on Thursday, March 17, 2011
Some developers say that DataSet is better and some says DataReader is better. But, both are Microsoft developments... More
{#advanced_dlg.about_title}
by Aamir Hasan   on Tuesday, February 22, 2011
This article describes how to secure your password before going to save in database or XML file etc More
{#advanced_dlg.about_title}
by Aamir Hasan   on Friday, February 4, 2011
By default, the web server assigns random selected port for localhost.. More
{#advanced_dlg.about_title}
by Aamir Hasan   on Tuesday, January 11, 2011
In this post, you will see how to get number of active visitor's online in asp.net web site... More
{#advanced_dlg.about_title}
by Aamir Hasan   on Tuesday, November 23, 2010
By default, line numbering is disabled in Visual Studio 2010. More
{#advanced_dlg.about_title}
by Aamir Hasan   on Thursday, September 16, 2010
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">&nbsp;</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.
Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5