Blog

How to bind Gridview Using Json and Webservices

Posted by Dhaval Patel Blogs | .NET 4.5 Nov 30, 2011
Json using Bind Div,Webservice- json using Bind div,Webservices using bind div,json call webservices and bind div
How To Bind Gridview using Json and Webservices

Json Script and for Jquery reference

  <script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">
//$(document).ready(function() {
function BindGridView() {
$.ajax({
type: "Post",
url: "WebService.asmx/GetAllRecords",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data)
{
//alert(data.d);
var Employees = data.d;
//var Employees = (typeof data.d) == 'string' ? eval('(' + data.d + ')') : data.d;
$('#grddata').empty();
for (var i = 0; i < Employees.length; i++)
{
if (i==0)
{
$('#grddata').append('<table><tr><td><strong>Emp_Title:</strong></td><td>' + Employees[i] + '</td></tr>');
//$('#grddata').append('<p><strong>Emp_Title: ' + Employees[i]+ '</p></strong>');
}
else if(i%2)
{
$('#grddata').append('<tr><td><strong> Emp_Name:</strong> </td><td>' + Employees[i]+ '</td></tr>');
}
else
{
$('#grddata').append('<table><tr><td><strong>Emp_Title:</strong></td><td>' + Employees[i] + '</td></tr>');
}

}
},
failure:function(data)
{
alert("Error Ha..Ha...Ha...");
}
});
}
</script>

Design page
 <body onload="BindGridView();">
<form id="form1" runat="server">
<div id="grddata">
</div>
</form>
</body>

Web services code
using System;
using System.Data;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Collections.Generic;

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
//[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{

 [WebMethod]
public string[] GetAllRecords()
{
SqlConnection con = new SqlConnection("Data Source=BITPLUS5\\SqlExpress;Initial Catalog=WEBHR_22112011;User ID=sa;pwd=bit123;");

con.Open();
//string strQuery = "select Emp_title,Emp_name from tblemployee where emp_name like '" + prefixText + "%'";
string strQuery = "select Emp_title,Emp_name from tblemployee";

DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(strQuery, con);
da.Fill(ds);
con.Close();
List<string> cityList = new List<string>();
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{

cityList.Add(ds.Tables[0].Rows[i]["Emp_title"].ToString());
cityList.Add(ds.Tables[0].Rows[i]["Emp_name"].ToString());
//cityList.Add(ds.Tables[0].Rows[i][0].ToString());
}
con.Close();
return cityList.ToArray();
//return ds;
}
}

post comment
     

you can post in table also $.ajax({type: "POST",contentType: "application/json; charset=utf-8",url: "ajaxcall.asmx/SearchByDate",data: strDetails,dataType: "json",success: function(data) { $("#tblSearchResult").empty();$("#tblSearchResult").append("<tr><td>Booking ID</td><td>Duct Code</td><td>Category</td><td>Name</td><td>Phone</td><td>Address</td><td>Dates Booked</td></tr>");for(var i=0;i < data.d.length;i++){$("#tblSearchResult").append("<tr><td>"+data.d[i].Booking_ID+"</td><td>"+data.d[i].Duct_Code+"</td><td>"+data.d[i].Category+"</td><td>"+data.d[i].Name+"</td><td>"+data.d[i].Phone+"</td><td>"+data.d[i].Address+"</td><td>"+data.d[i].Dates_Booked+"</td></tr>");} },error: function(result) {alert("Error");}});

Posted by Rajaprabhu Raja Nov 27, 2012
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
Get Career Advice from Experts
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Join a Chapter