使用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这个插件,效果很不错 ...
随机推荐
- 一个问题:关于类型转换Type Cast（汇编讲解 as 语法）
问题如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...
- AssetBundle.CreateFromFile的有趣事情
有趣的事情发生了: [@MenuItem("AssetBundles/Build AssetBundles")] staticvoid BuildABs () { AssetBun ...
- POJ 3481 & HDU 1908 Double Queue (map运用)
题目链接: PKU:http://poj.org/problem?id=3481 HDU:http://acm.hdu.edu.cn/showproblem.php?pid=1908 Descript ...
- Servlet的学习之Request请求对象（3）
本篇接上一篇,将Servlet中的HttpServletRequest对象获取RequestDispatcher对象后能进行的[转发]forward功能和[包含]include功能介绍完. 首先来看R ...
- Jetty支持Windows认证
WAFFLE是什么? Jetty增加WAFFLE支持 DEMO 小结 WAFFLE是什么? WAFFLE是一个Windows认证框架,支持Negotiate, NTLM和Kerberos认证.WAFF ...
- MongoDB学习笔记(五) MongoDB文件存取操作
由于MongoDB的文档结构为BJSON格式(BJSON全称:Binary JSON),而BJSON格式本身就支持保存二进制格式的数据,因此可以把文件的二进制格式的数据直接保存到MongoDB的文档结 ...
- 百度地图 javascript相关Bug搜集
一 在手机里用百度地图js版做webapp bug集合 1 之前用2.0版本的时候发现只要地图添加了覆盖物,无论数量多少,当地图放大到很小的范围时候,会卡死 1.1 当时处理办法:将版本降低至1. ...
- 微信公众平台应用开发框架sophia设计不足（1）
设计一个小框架考虑的东西真不少,每一样都不easy: 1.既要解决当前技术的不足: 2.又要方便他人使用(基本的目的). 3.同一时候又要设计得优雅.easy扩展. sophia一開始设计用来支持智能 ...
- JavaScript权威指南科20章 client记忆
20 client记忆 client几种形式存储的: web记忆 cookie IE userData 离线应用 web数据库 文件系统api 20.1 localStorage 和 sessionS ...
- 与众不同 windows phone (25) - Input（输入）之捕获 UIElement 之外的触控操作, Silverlight 方式捕获手势操作, XNA 方式捕获手势操作, 多点触控
原文:与众不同 windows phone (25) - Input(输入)之捕获 UIElement 之外的触控操作, Silverlight 方式捕获手势操作, XNA 方式捕获手势操作, 多点触 ...