I am currently developing an asp.net application that involves fetching data from a database in JSON format and displaying it within html ul-li tags using jQuery. Below is a snippet of my Html Page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<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: "MobileServices.asmx/BindCategory",
data: "{}",
dataType: "json",
contentType: "application/json; charset=utf-8",
async: true,
success: OnSuccess,
error: OnError
});
function OnSuccess(data) {
$.each(data, function (key, value{
$("#ulCategory").append("<li><a rel=external href=Category_News.html?ID=" + value.Category_ID + ">" + value.Category_Name + "</li>");
})
}
function OnError(data) {
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="ulCategory">
</ul>
</div>
</form>
</body>
</html>
Here is the WebService code to access the data:
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using Newtonsoft.Json;
using System.Configuration;
namespace MobileNewsAppication
{
/// <summary>
/// Summary description for MobileServices
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class MobileServices : System.Web.Services.WebService
{
public class NewsCategory
{
public long Category_ID { get; set; }
public string Category_Name { get; set; }
public string QFlag { get; set; }
}
[WebMethod]
public string BindAllCategory()
{
DataTable dt = new DataTable();
//List<NewsCategory> details = new List<NewsCategory>();
using (SqlConnection con = new SqlConnection(Connection))
{
SqlCommand cmd = new SqlCommand("AllCategory_Select", con);
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
return JsonConvert.SerializeObject(dt);
}
}
}
}
Unfortunately, I'm facing an issue where the ul tag does not bind any list items inside. I suspect that the foreach loop defined within the jQuery OnSuccess method may be incorrect. Any assistance would be greatly appreciated.