使用jquery+一般处理程序异步加载信息

需求：有时候，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);        }   $(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反序列化获取信息。