菜单

Json数据异步绑定到分界面包车型地铁Table而且自动刷新原理及代码

2019年8月15日 - 金沙前端

做Winform习于旧贯了,大家都习于旧贯设置datasource那样的写法。
一经想达成页面定时刷新的话,用.net给封装好的updatepanel和timer三个控件达成起来实在挺轻易的。那样做参预了众多你不能够决定的因素,举个例证说正是:用updatepanel后,你设置的样式很有不小希望就变了,然后您还亟需去调这个。所以依然用部分和睦整制性高的代码比较适度。

今天就先从那一个updatepanel加timer完毕页面自动刷新这么些事例来入手吗。
率先来看一下本人的貌似管理程序,在那些里面,笔者要好达成的是从数据库中搜查缴获datatable,然后调换来json传输给客户端

复制代码 代码如下:

/// <summary>
/// getData 的摘要表明
/// </summary>
public class getData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = “text/plain”;
//context.Response.Write(“Hello World”);
//设置查询字符串
string strSql = “select ckrID,chrCarNumber,cncName,bcrName from
T_CarNumberCategory,T_CheckResult,t_BusinessCategory where
ckrcheckresult is null and cncID=ckrcarnumbercategoryid and
ckrBusinessCategory=bcrID”;
//设置连接字符串
string strConn = “Data
Source=(DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=192.168.24.173)(PORT=1521))(CONNECT_DATA=(SERVICE_NAME=ORCL)));User
Id=admin;Password=123123”;
//定义并开荒数据库连接
OracleConnection conn = new OracleConnection(strConn);
conn.Open();
//定义命令行对象,
OracleCommand cmd = new OracleCommand(strSql, conn);
//定义叁个适配器,用来填充Datatable ;
OracleDataAdapter adp = new OracleDataAdapter(cmd);
//定义叁个DataTable并用适配器对其进展填写
DataTable dt = new DataTable();
adp.Fill(dt);
context.Response.Write(JsonConvert.SerializeObject(dt));
//上面的是自己从数据库中询问到的datatable,然后用三个Json操作类库将其更改为Json
////由于大家未有数据库意况,笔者把地点的字符串复制出来,供咱们测验实验用
////由于复制出来是双引号,放这里会报个错误,所以本身改成单引号了
////不过客户端在赢得json的时候,是认双引号的,所以只可以再交替回来。。。心碎
//var json =
“[{‘CKLacrosseID’:’1359374764563′,’CHRCAENCORENUMBE悍马H2′:’123123′,’CNCNAME’:’大型小车’,’BC奇骏NAME’:’核发查证合格标识’},{‘CKCRUISERID’:’1359371470153′,’CHRCA奥迪Q5NUMBESportage’:’asdfsadf’,’CNCNAME’:’大型小车’,’BC奥迪Q5NAME’:’注册登记’},{‘CKPAJEROID’:’1359343210678′,’CHRCA途乐NUMBEKoleos’:’111222′,’CNCNAME’:’大型汽车’,’BCEnclaveNAME’:’注册登记’},{‘CKWranglerID’:’1359354395618′,’CHRCALacrosseNUMBE奥德赛’:’123asd’,’CNCNAME’:’大型小车’,’BC中华VNAME’:’注册登记’},{‘CK揽胜ID’:’1359355217314′,’CHRCA安德拉NUMBEHighlander’:’123asdqwe’,’CNCNAME’:’大型小车’,’BCPAJERONAME’:’注册登记’},{‘CK奥迪Q5ID’:’1359355356271′,’CHRCARubiconNUMBE纳瓦拉’:’1111111′,’CNCNAME’:’大型汽车’,’BCTiggoNAME’:’注册登记’},{‘CKQashqaiID’:’1359355490374′,’CHRCAQX56NUMBESportage’:’123123123′,’CNCNAME’:’大型汽车’,’BC大切诺基NAME’:’注册登记’},{‘CKTiggoID’:’1358074597852′,’CHRCAGL450NUMBECRUISER’:’323232′,’CNCNAME’:’使馆汽车’,’BCPAJERONAME’:’核发查验合格标识’}]”;
//context.Response.Write(json.Replace(‘\”,’\”‘));
}
public bool IsReusable
{
get
{
return false;
}
}
}

地点的劳动器端程序中的注释很详细,有不懂的能够留言表明。类库的用的是Newtonsoft.Json.dll。我们点击就能够从本人的网盘里下载——不要别的开支哦~亲

上边是客户端代码

复制代码 代码如下:

<html xmlns=”;
<head runat=”server”>
<title>测试</title>
<script src=”jquery-1.7.1.js”
type=”text/javascript”></script>
</head>
<body>
<form id=”form1″ runat=”server”>
<table id=”data”>
<tr id=”tem”>
<td id=”ID”>
流水号
</td>
<td id=”CarNumber”>
车牌号
</td>
<td id=”BusinessName”>
事务类别
</td>
<td id=”btn”>
<input id=”Button2″ type=”button” value=”button” />
</td>
</tr>
</table>
<div id=”loading”>
正在加载数据…
</div>
<script type=”text/jscript”>
//模拟二个数量正在加载的楷模
setTimeout(function () { $(“#loading”).hide(); }, 1000);
//设置机械漏刻定时调用方法,单位是皮秒
setInterval(SetData(), 1000);
//从劳动器端获取数据,并呈现到分界面上,用getJSON方法达成
function SetData() {
$.getJSON(“getData.ashx”, null, function (obj) {
$(“tr”).eq(0).nextAll().remove(); //将除模板行的tr删除
//将获得到的数据动态的加载到table中
for (var i = 0; i < obj.length; i++) {
//将第四条的ID设置为深紫红(此处能够用来依照剧情更换样式
if (i == 3) {
row.find(“#ID”).css(“color”, “red”);
}
//获取模板行,复制一行
var row = $(“#tem”).clone();
//将新一行的按键增多click事件
row.find(“#btn input”).click({ name: obj[i].CHRCARNUMBER, back:
obj[i].CKRID }, operation);
//注意:在jquery1.4.第22中学,上面的主意会出错,具体原因小编也不知情,反正1.7.1那样写是不曾难题的
//即使上面代码不行,你能够试一下
//row.find(“#btn input”).bind(“click”,{ name: obj[i].CHRCARNUMBER,
back: obj[i].CKRID }, operation);
//亲测上边的代码在1.4.2.min…中得以运作,那些难题的缓解浪费了十分短事件,都怪用了比较老的框架
row.find(“#ID”).text(obj[i].CKRID); //流水号
row.find(“#CarNumber”).text(obj[i].CHRCA奥迪Q3NUMBE智跑); //小车车牌号
row.find(“#BusinessName”).text(obj[i].BC凯雷德NAME); //所办理的思想政治工作名称
//将新行加多到表格中
row.appendTo(“#data”);
}
});
}
//获取传过来的参数并显示
function operation(event) {
alert(event.data.name);
alert(event.data.back);
}
//从劳动器端获取数据,并显示到分界面上,用ajax方法达成
function SetDataByAjax() {
$.ajax({
type: “get”, //设置调用类型
dataType: “json”, //设置数据类型
url: “getData.ashx”, //url
complete: function () { $(“#loading”).hide() },
success: function (obj) {
$(“tr”).eq(0).nextAll().remove(); //将除模板行的tr删除
//将取获得的多少动态的加载到table中
for (var i = 0; i < obj.length; i++) {
//将第四条的ID设置为革命(此处能够用来依照内容改造样式
if (i == 3) {
row.find(“#ID”).css(“color”, “red”);
}
//获取模板行,复制一行
var row = $(“#tem”).clone();
//将新一行的开关增加click事件
row.find(“#btn input”).click({ name: obj[i].CHRCARNUMBER, back:
obj[i].CKRID }, operation);
//注意:在jquery1.4.2中,下边包车型地铁措施会出错,具体原因小编也不知道,反正1.7.1如此写是未曾难点的
//假使上面代码不行,你能够试一下
//row.find(“#btn input”).bind(“click”,{ name: obj[i].CHRCARNUMBER,
back: obj[i].CKRID }, operation);
//亲测下面的代码在1.4.第22中学能够运转,那几个题指标消除浪费了很短事件,都怪用了相比老的框架
row.find(“#ID”).text(obj[i].CKRID); //流水号
row.find(“#CarNumber”).text(obj[i].CHRCATucsonNUMBE景逸SUV); //小车车牌号
row.find(“#BusinessName”).text(obj[i].BC路虎极光NAME); //所办理的事体名称
//将新行增添到表格中
row.appendTo(“#data”);
}
}
});
}
</script>
</form>
</body>
</html>

地点的就是和谐入手写了三个机动刷新页面的例子,下面例子中,除了用了JQuery那些里面包车型大巴东西你无法调整,假使充足牛,你都不想用他那一个框架,想本人写贰个,那么也是足以的。只是对于本人这几个初学者的话,用那个还是能省好些个事的。

一个getJson方法,只要求给3个参数,他就把创制对象、回调函数、设置参数等全方位操作就都给您做了。那个依然值得学习的,在通常的读书中,对于常用到的东西,应该思索将其提炼成二个方法,放到本身的一点都不大代码库中。

虽说上边的代码不是很难,然则个人感到那是本人对于ajax精通的三个里程碑例子,一个例子,解开了自家无数业已的疑雾。

假使想达成页面定期刷新的话,用.net给封装好的updatepanel和timer三个控件完成起来其实…

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图