使用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反序列化获取信息。