使用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这个插件,效果很不错 ...
随机推荐
- [Warning] Aborted connection 11203 to db: 'ide' user: 'nuc' host: 'prd01.mb.com' (Got an error writi
PS:一台物理机扯分了3个虚拟机,一个主db,一个主备,一个从备. 切换到0301的时候 Sep 6 09:16:16 prddb0301 mysqld: 130906 9:16:16 [Warn ...
- 在Python中使用正则表达式同时匹配邮箱和电话并进行简单的分类
在Python使用正则表达式需要使用re(regular exprssion)模块,使用正则表达式的难点就在于如何写好p=re.compile(r' 正则表达式')的内容. 下面是在Python中使用 ...
- CButtonEx的实现
要想修改CButton类按钮背景颜色和文字颜色,必须利用自绘方法对按钮进行重新绘制.这可以通过定义一个以CButton为基类的新按钮类来实现.以下为具体的实现方法: 方法一: 加入一个新类,类名:CB ...
- uva 12627
题意:开始有1个红气球,每小时后1个红气球会变为3个红气球和1个蓝气球,问k小时后第A行到第B行的气球数. 解:用g(k,i)表示第k小时时,从底部数i行的红气球数.所以ans = g(k,2^k-A ...
- Maven插件之portable-config-maven-plugin(不同环境打包)
在大型的项目组中,分不同的开发环境,测试环境,生产环境(说白了就是配置文件不同,或者数据源,或者服务器,或者数据库等);问题来了,如何使用Maven针对不同的环境来打包呢? Maven提供了Profi ...
- 4.Swift教程翻译系列——Swift基本运算符
英文版PDF下载地址http://download.csdn.net/detail/tsingheng/7480427 运算符是指一个特殊的符号,能够用来查看.更改值或者相加.比方说加法运算符+能够讲 ...
- Swift - 使用set，get确保索引加减在正常的范围内
通过类的计算属性set和get,我们可以对索引的加减进行保护.下面是一个样例,索引index初始值是0,有效范围是0~2.不管是index++还是index--,索引都是一直在这个范围能循环遍历. 1 ...
- Excel设置下拉选项的方法
前些日子参加提高班组织的数据采集工作,到各个二级学院搜集数据,当然离不开我们常用的Excel表格了.在这次采集数据的过程过程中还真学到了一两招.就比如在Excel中设置下拉选项的方法. 例如我们要在A ...
- iOS 5 故事板入门（3）
原文: http://www.raywenderlich.com/5138/beginning-storyboards-in-ios-5-part-2 Segues 介绍 是时候在我们的故事板中加入更 ...
- MySQL学习笔记之中的一个 MySQL入门
本人之前接触的关系型数据库主要是oracle和sqlserver,而对于mysql知之甚少,但查阅网上资料发现,mysql与oracle非常相似,所以学起来应该不会非常费劲,在总结的时候可能很多其它的 ...