I am working on an asp.net web application where i want to show a list of Customer City in Html page in html tag using jquery,json and webservices.Here is my Html page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="format-detection" content="telephone-no" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>News</title>
<link href="css/jquery.mobile.css" rel="stylesheet" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script language="javascript" type="text/javascript">
//function GetCompanies() {
$(document).ready(function () {
$.ajax({
type: "POST",
url: "JsonServices.asmx/BindDatatable",
data: "{}",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: OnSuccess,
error: OnError
});
function OnSuccess(data) {
//alert(JSON.stringify(data.d));
//document.getElementById("lbljson").innerText = data.d;
//document.getElementById("lbljson").innerText = 'hello';
//alert('hello');
//for (var i = 1; i < data.d.length; i++) {
// $("#olList").append("<li>" + data.d[i].CompanyName + "</li>");
// //alert('hello');
//}
$.each(data.d, function (key, value) {
$("#NewsList").append("<li>" + value.City + "</li>");
})
}
function OnError(data) {
}
});
</script>
<script>
$(document).bind('mobileinit', function () {
$.mobile.pushStateEnabled = false;
});
</script>
</head>
<body>
<div id="home" data-role="page" data-theme="a">
<div data-role="header">
<h3>News</h3>
</div>
<div data-role="content">
<ol id="NewsList">
</ol>
</div>
</div>
</body>
</html>
Here is My WebService which is located in root of my asp.net application:
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
/// <summary>
/// Summary description for JsonServices
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment
the following line.
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class JsonServices : System.Web.Services.WebService {
public JsonServices () {
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public string HelloWorld() {
return "Hello World";
}
[WebMethod]
public static Customer[] BindDatatable()
{
DataTable dt = new DataTable();
List<Customer> details = new List<Customer>();
using (SqlConnection con = new SqlConnection(@"Data Source=.\sqlexpress; Initial Catalog=Northwind; Integrated Security=True;"))
{
using (SqlCommand cmd = new SqlCommand("select TOP 10 * from Customers", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
foreach (DataRow dtrow in dt.Rows)
{
Customer user = new Customer();
user.Address = dtrow["Address"].ToString();
user.CompanyName = dtrow["CompanyName"].ToString();
user.ContactName = dtrow["ContactName"].ToString();
user.City = dtrow["City"].ToString();
details.Add(user);
}
}
}
return details.ToArray();
}
public class Customer
{
public string CompanyName { get; set; }
public string ContactName { get; set; }
public string Address { get; set; }
public string City { get; set; }
}
}
But the WebMethod "BindDatatable" inside WebService "JsonServices" is not returning any data even the control is not going there on setting breakpoint. But if i write this webmethod inside any .aspx page then it works fine, but it does not runs if i write this webmethod inside any webservice.. Please Help me here.
