如何将json数据显示为html<ul><李></李></ul>在asp.net中
How to show json data into html <ul><li></li></ul> tag using jquery in asp.net
我正在开发asp.net应用程序,在该应用程序中,我试图以JSON格式从数据库中获取数据,并使用jquery将JSON数据显示为html ul-li标记。我的Html页面是:
<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>
我访问数据的WebService是:
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);
}
}
}
}
但是ul标签没有绑定里面的任何列表项。我认为在jquery OnSuccess方法中定义的foreach循环可能是错误的。请帮帮我。
如果这不是一个拼写错误,那么这是一个语法错误,导致成功回调失败。。。
function OnSuccess(data) {
// $.each(data, function (key, value{ <- this is wrong
$.each(data, function() {
$("#ulCategory").append("<li><a rel='external' href='Category_News.html?ID=" + this.Category_ID + "'>" + this.Category_Name + "</li>");
});
}
请尝试在each
中使用this
。我还将链接属性用引号括起来。除此之外,我觉得这很好。如果不是问题所在,那么将console.log(data);
作为成功回调的第一行,并检查控制台是否存在此错误。
相关文章:
- 正在检测导航到<a name=“;最新主题”></a>
- 如何附加<ul><李>元素位于某个特定条件的父元素列表之间
- 在<script src=“"></脚本>标签
- 等效于<script src=“;something1.json”></脚本>
- CSS/.JS问题,<ul><李>在Megamenu中
- 如何在<td></td>在Procractor中
- 显示“<script src='some.js'></脚本>"在Html文档中
- 如何将Array转换为<ul><李>以字母为标题的字母列表
- <script src=“//代码.jquery.com/jquery-1.11.1.min.js”></
- 选择<脚本></脚本>作为html正文中的纯文本
- 可折叠<UL><李>不起作用
- $.mobile.loadPage()和$(“linkBtn”).click();t负载<头部></头部&
- <脚本/>vs<脚本></脚本>webpack和angular
- Javascript/RRails-如何包装link_to而不是<a></a>在javascript
- jQuery在处理<选择><选项>
- 布局lt md已被弃用.请使用`layout gt-<xxx>`变种
- 在<%%中定义的访问变量>从<脚本></脚本>
- 页面设计<a href><按钮><输入>在JSP中
- 注入html标记<ul></ul>在我的<李></李>元素
- jQuery选择器<按钮></按钮>