Skip to main content

Using jQuery in asp.net to call Page Method(Web Service)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>

   <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(document).ready(function() {
           $("#btnList").click(function() {
               $.ajax({
                   type: "POST",
                   url: "Default.aspx/GetList",
                   data: "{}",
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function(msg) {
                       BuildTable(msg.d)
                   }
               });
           });
       });
       function BuildTable(msg) {
           var table = '<table><thead><tr><th>StudentID</th><th>StudentName</th><th>Marks1</th></thead><tbody>';

           for (var student in msg) {
               var row = '<tr>';
               row += '<td>' + msg[student].StudentId + '</td>';
               row += '<td>' + msg[student].StudentName + '</td>';
               row += '<td>' + msg[student].Marks1 + '</td>';

               row += '</tr>';

               table += row;
           }

           table += '</tbody></table>';

           $('#Container').html(table);
       }
   </script>

</head>
<body>
   <form id="form1" runat="server">
   <div id="Container">
   </div>
   <div>
       <input id="btnList" value="Get Studnet List" type="button" />
   </div>
   </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Collections;

public partial class _Default : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {

   }
   [WebMethod]
   public static List<Student> GetList()
   {
       return Student.GetStudentList();
   }

}


public class Student
{
   public int StudentId { get; set; }
   public string StudentName { get; set; }
   public int Marks1 { get; set; }
   public int Marks2 { get; set; }
   public string EmailAddress { get; set; }
   /// <summary>
   /// Return List of student.
   /// </summary>
   /// <returns></returns>
   public static List<Student> GetStudentList()
   {

       List<Student> students = new List<Student>()
           {  new Student{StudentId=1,StudentName="S#001",Marks1=10,Marks2=20,EmailAddress="student1@st.com"},
               new Student{StudentId=2,StudentName="S#002",Marks1=9,Marks2=30, EmailAddress="student2@st.com"},
               new Student{StudentId=3,StudentName="S#003",Marks1=11,Marks2=20,EmailAddress="student3@st.com"},
               new Student{StudentId=4,StudentName="S#004",Marks1=20,Marks2=30,EmailAddress="student4@st.com"},
               new Student{StudentId=5,StudentName="S#005",Marks1=9,Marks2=40,EmailAddress="student5@st.com"},
               new Student{StudentId=6,StudentName="S#006",Marks1=30,Marks2=50,EmailAddress="student6@st.com"},
           };
       return students;

   }

}

Comments

Popular posts from this blog