使用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这个插件,效果很不错 ...
随机推荐
- jQuery中对 input 控件的操作
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 1.获取值 jquery取radio单选按钮的值 $(" ...
- uva 10692 - Huge Mods(数论)
题目链接:uva 10692 - Huge Mods 题目大意:给出一个数的次方形式,就它模掉M的值. 解题思路:依据剩余系的性质,最后一定是行成周期的,所以就有ab=abmod(phi[M])+ph ...
- 14.9.2 Specifying the Row Format for a Table 指定 表的行格式
14.9.2 Specifying the Row Format for a Table 指定 表的行格式 mysql> SHOW TABLE STATUS\G; *************** ...
- JSTL解析——005——core标签库04
直接入主题,标签讲解 1.<c:import>标签 JSP里面有<% file include="XX"%> 与<jsp:include>,JS ...
- 禁用win7自己主动配置ipv4地址
现象 一台新电脑,连了网线,没有dhcp,须要手动配置Ip. 配置了一个Ip后,发现ping网关不通. ipconfig 发现有2 个IP: 自己主动配置 IPv4 地址 . . . . . . ...
- ALV编辑行内容有改变时候操作
ALV编辑行内容时,调用方法 check_changed_data返回变量 gf_valid = 'X'的话说明alv行有变化. 以下拿alv维护表程序部分代码做例: DATA: gr_alvgrid ...
- UVA 10795 - A Different Task(递归)
A Different Task The (Three peg) Tower of Hanoi problem is a popular one in computer science. Brie ...
- Linux中more命令的实现
#include <stdio.h> #include <stdlib.h> #include <string.h> #define PAGELEN 24 #def ...
- python 循环中的else
众多语言中都有if else这对条件选择组合,但是在python中还有更多else使用的地方,比如说循环for,或者while都可以和else组合. 下面简单介绍一下for-else while-el ...
- Oauth认证的时候报错：timestamp_refused
今天server大规模报错,大部分用户无法登陆,小部分能够登陆,非常是奇怪. 查看log.调试代码,发现问题是在oauth认证的时候出了问题,报 timestamp_refused. google了下 ...