使用jquery+一般处理程序异步加载信息
浏览数：39 /
时间：2015年06月09日
需求：有时候，web界面对性能要求比较高，我们就不考虑使用asp.net控件，而是使用html标签+jquery+一般处理程序来进行异步处理。
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);
}一般处理程序： /// <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反序列化获取信息。郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
