Post
Ask Question

How to bind Gridview Using Json and Webservices

How To Bind Gridview using Json and Webservices
 
Json Script and for Jquery reference 
  1. <script type="text/javascript" src="jquery.min.js"></script>

  3. <script type="text/javascript">  
  4.     //$(document).ready(function() {  
  5.     function BindGridView() {  
  6.         $.ajax({  
  7.             type: "Post",  
  8.             url: "WebService.asmx/GetAllRecords",  
  9.             data: "{}",  
  10.             contentType: "application/json; charset=utf-8",  
  11.             dataType: "json",  
  12.             success: function (data) {  
  13.                 //alert(data.d);  
  14.                 var Employees = data.d;  
  15.                 //var Employees = (typeof data.d) == 'string' ? eval('(' + data.d + ')') : data.d;  
  16.                 $('#grddata').empty();  
  17.                 for (var i = 0; i < Employees.length; i++) {  
  18.                     if (i == 0) {  
  19.                         $('#grddata').append('<table><tr><td><strong>Emp_Title:</strong></td><td>' + Employees[i] + '</td></tr>');  
  20.                         //$('#grddata').append('<p><strong>Emp_Title: ' + Employees[i]+ '</p></strong>');  
  21.                     }  
  22.                     else if (i % 2) {  
  23.                         $('#grddata').append('<tr><td><strong> Emp_Name:</strong> </td><td>' + Employees[i] + '</td></tr>');  
  24.                     }  
  25.                     else {  
  26.                         $('#grddata').append('<table><tr><td><strong>Emp_Title:</strong></td><td>' + Employees[i] + '</td></tr>');  
  27.                     }  
  28.   
  29.                 }  
  30.             },  
  31.             failure: function (data) {  
  32.                 alert("Error Ha..Ha...Ha...");  
  33.             }  
  34.         });  
  35.     }  
  36. </script>  
Design Page 
  1. <body onload="BindGridView();">  
  2.     <form id="form1" runat="server">  
  3.         <div id="grddata"> </div>  
  4.     </form  
  5. </body>  
Web services code
  1. using System;  
  2. using System.Data;  
  3. using System.Collections;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Services;  
  7. using System.Web.Services.Protocols;  
  8. using System.Xml.Linq;  
  9. using System.Data.SqlClient;  
  10. using System.Collections.Generic;  
  11.   
  12. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
  13. [System.Web.Script.Services.ScriptService]  
  14. // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.   
  15.   
  16. //[System.Web.Script.Services.ScriptService]  
  17.   
  18. public class WebService : System.Web.Services.WebService  
  19. {  
  20.   
  21.   
  22.   
  23.     [WebMethod]  
  24.   
  25.     public string[] GetAllRecords()  
  26.     {  
  27.   
  28.         SqlConnection con = new SqlConnection("Data Source=BITPLUS5\\SqlExpress;Initial Catalog=WEBHR_22112011;User ID=sa;pwd=bit123;");  
  29.   
  30.   
  31.   
  32.         con.Open();  
  33.   
  34.         //string strQuery = "select Emp_title,Emp_name from tblemployee where emp_name like '" + prefixText + "%'";  
  35.   
  36.         string strQuery = "select Emp_title,Emp_name from tblemployee";  
  37.   
  38.   
  39.   
  40.         DataSet ds = new DataSet();  
  41.   
  42.         SqlDataAdapter da = new SqlDataAdapter(strQuery, con);  
  43.   
  44.         da.Fill(ds);  
  45.   
  46.         con.Close();  
  47.   
  48.         List<string> cityList = new List<string>();  
  49.   
  50.         for (int i = 0; i < ds.Tables[0].Rows.Count; i++)  
  51.         {  
  52.   
  53.   
  54.   
  55.             cityList.Add(ds.Tables[0].Rows[i]["Emp_title"].ToString());  
  56.   
  57.             cityList.Add(ds.Tables[0].Rows[i]["Emp_name"].ToString());  
  58.   
  59.             //cityList.Add(ds.Tables[0].Rows[i][0].ToString());  
  60.   
  61.         }  
  62.   
  63.         con.Close();  
  64.   
  65.         return cityList.ToArray();  
  66.   
  67.         //return ds;  
  68.   
  69.     }  
  70.   
  71. }