使用jquery+一般处理程序异步载入信息
需求：有时候。web界面对性能要求比較高。我们就不考虑使用asp.net控件。而是使用html标签+jquery+一般处理程序来进行异步处理。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvem91eXVqaWUxMTI3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
aspx代码：
<asp:Repeater ID="rptRecordList" runat="server">
<HeaderTemplate>
<table style="width: 100%;">
</HeaderTemplate>
<ItemTemplate>
<tr class="order-item">
<td style="width: 96px;" class="item">
<span style="margin-right: 4px;"><%# Container.ItemIndex +1 %></span>
<input type="radio" id="rbtn1" value='<%#Eval("hx_t_watermeterid")%>' />
</td>
<td style="width: 201px;" class="item"><%#Eval("name") %></td>
<td style="width: 200px;" class="item"><%#Eval("accountnumber") %></td>
<td style="width: 200px;" class="last"><%#Eval("hx_fmetercode") %></td>
</tr>
</ItemTemplate>
<FooterTemplate></table></FooterTemplate>
</asp:Repeater>
<div id="JTabView" class="tabs-container" style="margin-right: 4px; top: 0px; left: 0px; margin-bottom: -37px;">
<div class="tabs-panels">
<div style="display: block;" class="info-box order-info ks-switchable-panel-internal41">
<div class="bd">
<div class="contact-info">
<h3>客户信息</h3>
<dl>
<dt style="width: 90px;">客户：</dt>
<dd>
<span id=""></span>
<span id="lblClientName"></span>
</dd>
<dt>编号：</dt>
<dd>
<span id="lblClientNo"></span>
</dd>
<dt>电话：</dt>
<dd>
<span id="lblCell"></span>
</dd>
<dt>手机：</dt>
<dd>
<span id="lblTel"></span>
</dd>
</dl>
<div class="clearfix"></div>
</div>
<hr />
<div class="water-info">
<h3>水表信息</h3>
<dl>
<dt style="width: 90px;">水表编码：</dt>
<dd>
<span id="lblMeterCode"></span>
</dd>
<dt>电子表号：</dt>
<dd>
<span id="lblElectronicMeteNo"></span>
</dd>
<dt>水表状态：</dt>
<dd>
<span id="lblMeterStatus"></span>
</dd>
</dl>
<dl>
<dt style="width: 90px;">地址：
</dt>
<dd style="width: auto">
<span id="lblMeterAddress"></span>
</dd>
</dl>
<div class="clearfix"></div>
</div>
<hr />
<div class="water-info">
<h3>用水信息</h3>
<dl>
<dt>用水性质：</dt>
<dd>
<span id="lblWaterNature"></span>
</dd>
<dt>水费单位价格：</dt>
<dd>
<span id="lblWaterPrice"></span>
</dd>
<dt>污水费单位价格：</dt>
<dd style="width: 129px;">
<span id="lblSewagePrice"></span>
</dd>
</dl>
<dl>
<dt>用水人口：</dt>
<dd>
<span id="lblWaterPopulation"></span>
</dd>
<dt>是否阶梯水价：</dt>
<dd>
<span id="lblIsLadder" runat="server">否</span>
</dd>
<dt>结算前账户剩余金额：</dt>
<dd>
<span id="lblBalance"></span>
</dd>
</dl>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
css代码我就省略了，直接列js代码：
var getAccountInfo = function (data) {
$("#lblClientName").html(data.ClientName);
$("#lblClientNo").html(data.ClientNo);
$("#lblCell").html(data["Cell"]);
$("#lblTel").html(data["Tel"]);
$("#lblMeterCode").html(data["MeterCode"]);
$("#lblElectronicMeteNo").html(data["ElectronicMeteNo"]);
$("#lblMeterStatus").html(data["MeterStatus"]);
$("#lblMeterAddress").html(data["MeterAddress"]);
$("#lblWaterNature").html(data["WaterNature"]);
$("#lblWaterPrice").html(data["WaterPrice"]);
$("#lblSewagePrice").html(data["SewagePrice"]);
$("#lblWaterPopulation").html(data["WaterPopulation"]);
var error = data["error"];
if (error != null && error != undefined && error != "") {
error = errorMsg + error;
$("#spnError").html(error);
$("#divError").attr("visibility", "visible");
}
else {
$("#spnError").html("");
$("#divError").attr("visibility", "hidden");
};
}
//依据选中的水表来客户具体信息
function getInfoBySelect(meterId) {
$.getJSON("Handlers/PrepaymentBusinessHandler.ashx", { "meterId": meterId }, getAccountInfo);
}
$(document).ready(function () {
//$("#tbList tr:odd").addClass("alt"); 偶数行样式
//$("#tbList tr:even").css("background-color", "white"); //奇数行样式
$("#tbList tr").hover(function () { $(this).addClass('overCss'); }, function () { $(this).removeClass('overCss'); }).click(
function (e) {
if ($(e.srcElement || e.target).attr("type") != "radio") {
$(this).find(":radio").click(); //$(this).find(":radio").attr("checked", true);有问题
}
});
$("#tbList input[type='radio']").click(function () {
$(this).parent().parent().addClass('clickCss')
.siblings().removeClass('clickCss')
.end();
getInfoBySelect($(this).val());
});
});
一般处理程序：
/// <summary>
/// PrepaymentBusinessHandler 的摘要说明
/// </summary>
public class PrepaymentBusinessHandler : IHttpHandler
{
IOrganizationService _serviceProxy = PrepaymentBusinessHandle._serviceProxy;
int _maxReturnCount = 10;
string error = string.Empty; public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string meterId = context.Request["meterId"];
JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
string outputString =GetModel(meterId)==null?string.Empty: jsonSerializer.Serialize(GetModel(meterId)); if(!string.IsNullOrEmpty(error))
{
outputString =string.IsNullOrEmpty(outputString)?"{\"error\":\""+ error+"\"}":outputString.Trim('}')+",\"error\":\""+ error+"\"}";
}
context.Response.Write(outputString);
} /// <summary>
/// 依据选择的记录获取客户具体信息
/// <param name="accountNumber">水表ID</param>
/// </summary>
/// <returns></returns>
EntityCollection GetAccountInfoBySelectRecord(string meterId)
{
EntityCollection etResults = null;
if (string.IsNullOrEmpty(meterId))
{
return etResults;
}
string fetchXml = @"<fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='false' count='" + _maxReturnCount.ToString() + @"'>
<entity name='hx_t_customerandmeterrela'>
<attribute name='hx_fwaterpropertyid' />
<attribute name='hx_fmeterid' />
<attribute name='hx_faccountid' />
<filter type='and'>
<condition attribute='hx_fmeterid' operator='eq' value='"
+ meterId + @"'/> </filter>
<link-entity name='account' from='accountid' to='hx_faccountid' link-type='outer' alias='t_account'>
<attribute name='accountnumber' />
<attribute name='name' />
<attribute name='telephone1' />
<attribute name='telephone2' />
<attribute name='hx_ffamilysize' />
</link-entity>
<link-entity name='hx_t_watermeter' from='hx_t_watermeterid' to='hx_fmeterid' link-type='outer' alias='t_meter'>
<attribute name='hx_feleno' />
<attribute name='hx_fmetercode' />
<attribute name='hx_fstate' />
<attribute name='hx_faddress' />
</link-entity>
<link-entity name='hx_t_waterproperty' from='hx_t_waterpropertyid' to='hx_fwaterpropertyid' link-type='outer' alias='t_fwaterproperty'>
<attribute name='hx_faliasname' />
<attribute name='hx_fwaterbasicprice' />
<attribute name='hx_fcollchargesbasicprice4' />
</link-entity>
</entity>
</fetch>";
try
{
etResults = this._serviceProxy.RetrieveMultiple(new FetchExpression(fetchXml));
}
catch (Exception ex)
{
error = ex.Message;
} return etResults;
} /// <summary>
/// 依据水表ID获取账户具体信息
/// </summary>
/// <param name="meterId">水表ID</param>
/// <returns></returns>
public AccountInfoEntity GetModel(string meterId)
{
AccountInfoEntity entity = new AccountInfoEntity();
EntityCollection entitys = GetAccountInfoBySelectRecord(meterId);
if (entitys != null && entitys.Entities.Count > 0)
{
entity.ClientName = entitys.Entities[0].Contains("t_account.name") && entitys.Entities[0]["t_account.name"] != null ? ((AliasedValue)entitys.Entities[0].Attributes["t_account.name"]).Value.ToString() : string.Empty;
entity.ClientNo = entitys.Entities[0].Contains("t_account.accountnumber") && entitys.Entities[0]["t_account.accountnumber"] != null ? ((AliasedValue)entitys.Entities[0].Attributes["t_account.accountnumber"]).Value.ToString() : string.Empty;
entity.Cell = entitys.Entities[0].Contains("t_account.telephone1") && entitys.Entities[0]["t_account.telephone1"] != null ? ((AliasedValue)entitys.Entities[0].Attributes["t_account.telephone1"]).Value.ToString() : string.Empty;
entity.Tel = entitys.Entities[0].Contains("t_account.telephone2") && entitys.Entities[0]["t_account.telephone2"] != null ? ((AliasedValue)entitys.Entities[0].Attributes["t_account.telephone2"]).Value.ToString() : string.Empty; entity.MeterCode = entitys.Entities[0].Contains("t_meter.hx_fmetercode") && entitys.Entities[0]["t_meter.hx_fmetercode"] != null ? ((AliasedValue)entitys.Entities[0].Attributes["t_meter.hx_fmetercode"]).Value.ToString() : string.Empty;
entity.ElectronicMeteNo = entitys.Entities[0].Contains("t_meter.hx_feleno") && entitys.Entities[0]["t_meter.hx_feleno"] != null ? ((AliasedValue)entitys.Entities[0].Attributes["t_meter.hx_feleno"]).Value.ToString() : string.Empty; string state = entitys.Entities[0].Contains("t_meter.hx_fstate") && entitys.Entities[0]["t_meter.hx_fstate"] != null ? ((OptionSetValue)((AliasedValue)entitys.Entities[0]["t_meter.hx_fstate"]).Value).Value.ToString() : string.Empty;
if (state == "0") { state = "新装"; };
if (state == "1") { state = "已开户"; };
if (state == "2") { state = "销户"; };
if (state == "3") { state = "停水"; };
if (state == "4") { state = "被更换"; };
if (state == "5") { state = "未开户"; };
if (state == "6") { state = "撤户停查"; };
entity.MeterStatus = state; entity.MeterAddress = entitys.Entities[0].Contains("t_meter.hx_faddres") && entitys.Entities[0]["t_meter.hx_faddres"] != null ? ((AliasedValue)entitys.Entities[0].Attributes["t_meter.hx_faddress"]).Value.ToString() : string.Empty; entity.WaterNature = entitys.Entities[0].Contains("t_fwaterproperty.hx_faliasname") && entitys.Entities[0]["t_fwaterproperty.hx_faliasname"] != null ? ((AliasedValue)entitys.Entities[0].Attributes["t_fwaterproperty.hx_faliasname"]).Value.ToString() : string.Empty;
entity.WaterPrice = entitys.Entities[0].Contains("t_fwaterproperty.hx_fwaterbasicprice") && entitys.Entities[0]["t_fwaterproperty.hx_fwaterbasicprice"] != null ? ((AliasedValue)entitys.Entities[0].Attributes["t_fwaterproperty.hx_fwaterbasicprice"]).Value.ToString() : string.Empty;
entity.SewagePrice = entitys.Entities[0].Contains("t_fwaterproperty.hx_fcollchargesbasicprice4") && entitys.Entities[0]["t_fwaterproperty.hx_fcollchargesbasicprice4"] != null ? ((AliasedValue)entitys.Entities[0].Attributes["t_fwaterproperty.hx_fcollchargesbasicprice4"]).Value.ToString() : string.Empty;
entity.WaterPopulation = entitys.Entities[0].Contains("t_account.hx_ffamilysize") && entitys.Entities[0]["t_account.hx_ffamilysize"] != null ? ((AliasedValue)entitys.Entities[0].Attributes["t_account.hx_ffamilysize"]).Value.ToString() : string.Empty;
}
return entity;
} public bool IsReusable
{
get
{
return false;
}
}
}
public class AccountInfoEntity
{
/// <summary>
/// 客户名称
/// </summary>
public string ClientName { get; set; }
/// <summary>
/// 编号
/// </summary>
public string ClientNo { get; set; }
/// <summary>
/// 电话
/// </summary>
public string Cell { get; set; }
/// <summary>
/// 手机
/// </summary>
public string Tel { get; set; }
/// <summary>
/// 水表编码
/// </summary>
public string MeterCode { get; set; }
/// <summary>
/// 电子表号
/// </summary>
public string ElectronicMeteNo { get; set; }
/// <summary>
/// 水表状态
/// </summary>
public string MeterStatus { get; set; }
/// <summary>
/// 水表地址
/// </summary>
public string MeterAddress { get; set; }
/// <summary>
/// 用水性质
/// </summary>
public string WaterNature { get; set; }
/// <summary>
/// 水费单位价格
/// </summary>
public string WaterPrice { get; set; }
/// <summary>
/// 污水费单位价格
/// </summary>
public string SewagePrice { get; set; }
/// <summary>
/// 用水人口
/// </summary>
public string WaterPopulation { get; set; }
}
思路：使用jquery发送请求，并传递參数给一般处理程序。一般处理程序从数据库中获取数据后先序列化然后再传回web界面，再使用jquery反序列化获取信息。
使用jquery+一般处理程序异步载入信息的更多相关文章
- jQuery的AJax异步载入片段
主要用到load()方法以及getScript()方法,详细以一个样例说明: 在现有html文件里载入一个拟好的片段,以及在片段载入完毕之前阻止用户进一步操作的弹出框. 首先是现有html代码.无不论 ...
- SpringMVC+Jquery -页面异步载入数据
背景: 做项目时涉及到页面.当我打算在controller中传一个list到页面,然后通过<c:foreach>循环遍历出来时,同事说:你这样每次都要刷新.这都是几百年前使用的技术了.你用 ...
- 【转】JQuery插件ajaxFileUpload 异步上传文件（PHP版）
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- 触碰jQuery：AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- jquery的ajax异步请求接收返回json数据
http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...
- 使用 jsPlumb 绘制拓扑图 —— 异步载入与绘制的实现
本文实现的方法能够边异步载入数据边绘制拓扑图. 有若干点须要说明一下: 1. 一次性获取全部数据并绘制拓扑图. 请參见文章: <使用 JsPlumb 绘制拓扑图的通用方法> ; 本文实现 ...
- 触碰jQuery：AJAX异步详解（转）
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- JQuery插件ajaxFileUpload 异步上传文件（PHP版）
太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...
随机推荐
- 浮点数在计算机内存中的表示（IEEE 754规定1位是符号位，8位是指数，剩下的23位为有效数字）
本文转载自:阮一峰的博客,http://www.ruanyifeng.com/blog/2010/06/ieee_floating-point_representation.html 张玉彬的博客 h ...
- STM32的FSMC总线复用调试笔记
调试FSMC总线复用模式时主要遇到以下几点: 1.寄存器的配置,首先注意使能地址数据复用,其次要存储器类型选择FSMC_MemoryType_NOR,否则出现不了NADV信号. FSMC_NORSRA ...
- Android控件拖动的实现
这个也是从网上得到的代码,例子比较简单,但是如果有需要此功能的,这个例子可以提供很多提示,首先,给个截图 这个是拖动以后的效果,一个imageview和一个button控件,提供两份代码下载吧,一份是 ...
- Java描述语言、国家和地理的类——Locale
Locale类代表一个特定的地理.语言和国家环境.一个Locale的实例对象本身不会验证它代表的语言和国家地区信息是否正确,只是向一些对国家和语言.地理等比较敏感的类提供国家地区语言信息,这些类有Da ...
- TCP与UDP各自特点对比
UDP和TCP是我们最常用的两种通信方式,下面就两者之间的特点做一个对比: 1.UDP主要用在实时性要求高以及对质量相对较弱的地方,如流媒体. 2.TCP既然是面向连接的,那么运行环境必然要求其保证可 ...
- CF 258B Little Elephant and Elections [dp+组合]
给出1,2,3...m 任取7个互不同样的数a1,a2,a3,a4,a5,a6,a7 一个数的幸运度是数位上4或7的个数 比方244.470幸运度是2. 44434,7276727.4747,7474 ...
- Appium 出现 > error: com.test/.activity1 never started. Current: com.test/.activity2
在apium 运行的时候,会出现提示 activity 没有启动,当前是 activity 出现原因: 出现这种情况是因为 launch activity 再启动 app 之后 无法找到,变成了app ...
- Lucene.Net 2.3.1开发介绍 —— 四、搜索（一）
原文:Lucene.Net 2.3.1开发介绍 -- 四.搜索(一) 既然是内容筛选,或者说是搜索引擎,有索引,必然要有搜索.搜索虽然与索引有关,那也只是与索引后的文件有关,和索引的程序是无关的,因此 ...
- Swift - 使用表格组件（UITableView）实现单列表
1,样例说明: (1)列表内容从Controls.plist文件中读取,类型为Array. (2)点击列表项会弹出消息框显示该项信息. (3)按住列表项向左滑动,会出现删除按钮.点击删除即可删除该项. ...
- HDU 3853 期望概率DP
期望概率DP简单题 从[1,1]点走到[r,c]点,每走一步的代价为2 给出每一个点走相邻位置的概率,共3中方向,不动: [x,y]->[x][y]=p[x][y][0] , 右移:[x][y ...