千家信息网

.Net页面局部更新引发的示例分析

发表于:2024-11-24 作者:千家信息网编辑
千家信息网最后更新 2024年11月24日,这篇文章给大家分享的是有关.Net页面局部更新引发的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、UpdatePanel 将需要更新的模块放入UpdatePan
千家信息网最后更新 2024年11月24日.Net页面局部更新引发的示例分析

这篇文章给大家分享的是有关.Net页面局部更新引发的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

一、UpdatePanel
将需要更新的模块放入UpdatePanel的ContentTemplate中,区域内的回发将不会刷新整个页面。并且响应的内容也仅仅是UpdatePanel里面更新的内容
如:查询

     
 
ID 姓名 年龄 住址 入职日期 部门 薪水
<%#Eval("ID") %> <%#Eval("Name") %> <%#Eval("Age") %> <%#Eval("Address") %> <%#Eval("JoinDate") %> <%#Eval("Department") %> <%#Eval("Salary") %>

使用UpdatePanel不需要写任何异步请求的代码就能实现局部更新,但性能会有一定的影响,并且灵活性、重用性不高。

2.Ajxa和一般处理程序
首先新建一个一般处理程序,接收查询参数,返回查询后的员工信息,默认返回所有的信息。
如:查询

p>

使用Ajax查询灵活性高,但html代码的拼接有点烦,当然有很多种方法可以改善。下面继续介绍。

function ajaxquery() {  $.ajax({  url: "/DataService/getEmployee.ashx",  type: "GET",  cache: false,  data: { key: $("#ajaxkey").val() },  dataType: "json",  success: function (data, textStatus) {   if (data.code == "ok") {   $("#ajaxtable tr.row").remove();   var html = "";   for (var i = 0; i < data.res.length; i++) {    html += "" + data.res[i].ID + "" + data.res[i].Name + "" + data.res[i].Age + "" + data.res[i].Address + "" + data.res[i].JoinDate + "" + data.res[i].Department + "" + data.res[i].Salary + ""   }   if (html == "")    html += "没有任何记录,请改进查询条件";   $("#ajaxtable").append(html);   }   else {   alert(data.info);   }  },  error: function (XMLHttpRequest, textStatus, errorThrown) {   alert("网络繁忙,请刷新页面!");  }  }); }

三、Avalonjs改善代码拼接
Angularjs用得也比较多,但是太庞大了,所有找到一个比较适合一般开发的Avalonjs。
我之前在博问里问过这样一个问题:有没有jquery数据双向绑定插件,有脏检查的。只是和大家探讨,我见过一个DataSet js插件,所有的数据以json的形式绑定的DataSet,DataSet本身实现脏检查,其余控件都绑定相应的DataSet的某个属性。只要某个绑定控件值发生改变,就可以从DataSet中获取仅仅改变的数据(而不是整个json)。回答的几乎是Angularjs。其与的也都是基本的双向绑定,所以脏检查还是要自己实现。
使用Avalonjs首先引入js文件,然后定义controller
如:查询

 
 
ID 姓名 年龄 住址 入职日期 部门 薪水
{{emp.ID}} {{emp.Name}} {{emp.Age}} {{emp.Address}} {{emp.JoinDate}} {{emp.Department}} {{emp.Salary}}
 var vm = avalon.define({  $id: "avalonCtrl",  emps: [],  key: "",  query: function () {  $.ajax({   url: "/DataService/getEmployee.ashx",   type: "GET",   cache: false,   data: { key: vm.key },   dataType: "json",   success: function (data, textStatus) {   if (data.code == "ok") {    vm.emps = data.res;   }   else {    alert(data.info);   }   },   error: function (XMLHttpRequest, textStatus, errorThrown) {   alert("网络繁忙,请刷新页面!");   }  });  } });

最后回到脏检查:如果把这个改进成可编辑的表格,怎么去监听哪些行被修改,保存的时候不应该提交整个表格数据,而应该提交修改的行数据?

感谢各位的阅读!关于".Net页面局部更新引发的示例分析"这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

0