网上asp.net开发jquery mobile的示例很少,根据网上提供的不完全资料自己研究了一下,通过两种方式可以获取JSON数据:
第一,通过get实现:
//前面引用省略
<script>
$('#frmmain').live('pageinit', function(event) {
$.get('handler/aprvhandler.ashx', { type: 'myParam', cnt: '10' }, function(data) {
var userlist = $.parseJSON(data); //解析JSON
$("#userlist").append("<ul data-role='listview'></ul>");
$.each(userlist, function(index, value) {
var temp = "<li><a href='aprvdetail.aspx?id=" + value + "'><h3>" + value + "</h3></a></li>";
$("#userlist ul").append(temp);
});
$("#userList").trigger("create");
});
});
</script>
<script>
$('#frmmain').live('pageinit', function(event) {
$.get('handler/aprvhandler.ashx', { type: 'myParam', cnt: '10' }, function(data) {
var userlist = $.parseJSON(data); //解析JSON
$("#userlist").append("<ul data-role='listview'></ul>");
$.each(userlist, function(index, value) {
var temp = "<li><a href='aprvdetail.aspx?id=" + value + "'><h3>" + value + "</h3></a></li>";
$("#userlist ul").append(temp);
});
$("#userList").trigger("create");
});
});
</script>
第二,通过post实现:
//前面引用省略
<script>
$('#frmmain').live('pageinit', function(event) {
$.post('handler/aprvhandler.ashx', { type: 'myParam', cnt: '10' }, function(data) {
$("#userList").append("<ul data-role='listview'></ul>");
$.each(data, function(index, value) {
var temp = "<li><a href='aprvdetail.aspx?id=" + value + "'><h3>" + value + "</h3></a></li>";
$("#userList ul").append(temp);
});
$("#userList").trigger("create");
},"json");
});
</script>
<script>
$('#frmmain').live('pageinit', function(event) {
$.post('handler/aprvhandler.ashx', { type: 'myParam', cnt: '10' }, function(data) {
$("#userList").append("<ul data-role='listview'></ul>");
$.each(data, function(index, value) {
var temp = "<li><a href='aprvdetail.aspx?id=" + value + "'><h3>" + value + "</h3></a></li>";
$("#userList ul").append(temp);
});
$("#userList").trigger("create");
},"json");
});
</script>
//通用页面
<body>
<!-- Home -->
<div data-role="page" data-theme="b" id="frmmain" data-ajax="false">
<div data-theme="b" data-role="header">
<h4>
XXXX系统
</h4>
</div>
<div data-role="content" style="padding: 15px">
<div data-role="collapsible-set" data-theme="" data-content-theme="">
<div data-role="collapsible" data-collapsed="false">
<h3>
用户列表
</h3>
<div data-role="content" id="userList" class="content"></div>
</div>
</div>
</body>
</html>
两种实现方式差不多,只是$.get方法没有json这个参数,所以在代码里面解析。
后台ashx也比较简单,需要引用Jayrock.JSON.dll第三方控件
<%@ WebHandler Language="C#" Class="AprvHandler" %>
using System;
using System.Web;
using Jayrock.Json;
using System.IO;
public class AprvHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
HttpContext.Current.Response.ContentType = "text/plain";
string query = HttpContext.Current.Request.Params["type"];
if (string.IsNullOrEmpty(query))
{
HttpContext.Current.Response.Write("parameter error");
return;
}
string strJsonText = @"{'id':1,'count':'4','name':'Alice','list':[1001,1002,1003,1004]}";
JsonReader reader = new JsonTextReader(new StringReader(strJsonText));
JsonObject jsonObj = new JsonObject();
jsonObj.Import(reader);
HttpContext.Current.Response.Write(jsonObj);
HttpContext.Current.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}
using System;
using System.Web;
using Jayrock.Json;
using System.IO;
public class AprvHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
HttpContext.Current.Response.ContentType = "text/plain";
string query = HttpContext.Current.Request.Params["type"];
if (string.IsNullOrEmpty(query))
{
HttpContext.Current.Response.Write("parameter error");
return;
}
string strJsonText = @"{'id':1,'count':'4','name':'Alice','list':[1001,1002,1003,1004]}";
JsonReader reader = new JsonTextReader(new StringReader(strJsonText));
JsonObject jsonObj = new JsonObject();
jsonObj.Import(reader);
HttpContext.Current.Response.Write(jsonObj);
HttpContext.Current.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}