一步一步asp.net_ajax学习

继续ajax,今天的任务是做一个大师信息的页面,大致的静态页面

以前的做法大致是先做一个大师的母板页,然后分成3个页面,分开做,不过那样重用性太低了,数据库语句也不注意性能优化,导致查询非常慢,而且用户体验不好,这次考虑用ajax做,并且优化查询.

要实现的功能:

1.首先ajax加载大师基本信息(包括姓名,性别,出生年月,分类,以及大师头像)

2.然后写三个ajax事件响应大师作品,大师简介,获奖情况,

3.默认进入此页面加载大师简介信息

主要的难点:

1.通过js获取html中的参数,比如一个大师列表页调转过来,传递的参数:MasterInfo.aspx?MasterId=xxxxx

我们需要通过js获取这个MasterId参数

2.ajax加载图片回调

3.最难的地方在大师作品,因为大师有多种类别的作品,我们只能获取每种作品的前8位显示出来,这个涉及到数据库查询优化,以前都是通过两次查询或者嵌套查询,性能非常低,这次需要生成json数据,前台JQuery调用也比较复杂.

实现:

1.js获取html中的参数,到网上看了一下,看到一个蛮不错的脚本,获取html参数

new function(settings) {
  var $separator = settings.separator || '&';
  var $spaces = settings.spaces === false ? false : true;
  var $suffix = settings.suffix === false ? '' : '[]';
  var $prefix = settings.prefix === false ? false : true;
  var $hash = $prefix ? settings.hash === true ? "#" : "?" : "";
  var $numbers = settings.numbers === false ? false : true;

  jQuery.query = new function() {
    var is = function(o, t) {
      return o != undefined && o !== null && (!!t ? o.constructor == t : true);
    };
    var parse = function(path) {
      var m, rx = /\[([^[]*)\]/g, match = /^([^[]+)(\[.*\])?$/.exec(path), base = match[1], tokens = [];
      while (m = rx.exec(match[2])) tokens.push(m[1]);
      return [base, tokens];
    };
    var set = function(target, tokens, value) {
      var o, token = tokens.shift();
      if (typeof target != 'object') target = null;
      if (token === "") {
        if (!target) target = [];
        if (is(target, Array)) {
          target.push(tokens.length == 0 ? value : set(null, tokens.slice(0), value));
        } else if (is(target, Object)) {
          var i = 0;
          while (target[i++] != null);
          target[--i] = tokens.length == 0 ? value : set(target[i], tokens.slice(0), value);
        } else {
          target = [];
          target.push(tokens.length == 0 ? value : set(null, tokens.slice(0), value));
        }
      } else if (token && token.match(/^\s*[0-9]+\s*$/)) {
        var index = parseInt(token, 10);
        if (!target) target = [];
        target[index] = tokens.length == 0 ? value : set(target[index], tokens.slice(0), value);
      } else if (token) {
        var index = token.replace(/^\s*|\s*$/g, "");
        if (!target) target = {};
        if (is(target, Array)) {
          var temp = {};
          for (var i = 0; i < target.length; ++i) {
            temp[i] = target[i];
          }
          target = temp;
        }
        target[index] = tokens.length == 0 ? value : set(target[index], tokens.slice(0), value);
      } else {
        return value;
      }
      return target;
    };

    var queryObject = function(a) {
      var self = this;
      self.keys = {};

      if (a.queryObject) {
        jQuery.each(a.get(), function(key, val) {
          self.SET(key, val);
        });
      } else {
        jQuery.each(arguments, function() {
          var q = "" + this;
          q = q.replace(/^[?#]/,'');
          q = q.replace(/[;&]$/,'');
          if ($spaces) q = q.replace(/[+]/g,' ');

          jQuery.each(q.split(/[&;]/), function(){
            var key = decodeURIComponent(this.split('=')[0] || "");
            var val = decodeURIComponent(this.split('=')[1] || "");

            if (!key) return;

            if ($numbers) {
              if (/^[+-]?[0-9]+\.[0-9]*$/.test(val))
                val = parseFloat(val);
              else if (/^[+-]?[0-9]+$/.test(val))
                val = parseInt(val, 10);
            }

            val = (!val && val !== 0) ? true : val;

            if (val !== false && val !== true && typeof val != 'number')
              val = val;

            self.SET(key, val);
          });
        });
      }
      return self;
    };

    queryObject.prototype = {
      queryObject: true,
      has: function(key, type) {
        var value = this.get(key);
        return is(value, type);
      },
      GET: function(key) {
        if (!is(key)) return this.keys;
        var parsed = parse(key), base = parsed[0], tokens = parsed[1];
        var target = this.keys[base];
        while (target != null && tokens.length != 0) {
          target = target[tokens.shift()];
        }
        return typeof target == 'number' ? target : target || "";
      },
      get: function(key) {
        var target = this.GET(key);
        if (is(target, Object))
          return jQuery.extend(true, {}, target);
        else if (is(target, Array))
          return target.slice(0);
        return target;
      },
      SET: function(key, val) {
        var value = !is(val) ? null : val;
        var parsed = parse(key), base = parsed[0], tokens = parsed[1];
        var target = this.keys[base];
        this.keys[base] = set(target, tokens.slice(0), value);
        return this;
      },
      set: function(key, val) {
        return this.copy().SET(key, val);
      },
      REMOVE: function(key) {
        return this.SET(key, null).COMPACT();
      },
      remove: function(key) {
        return this.copy().REMOVE(key);
      },
      EMPTY: function() {
        var self = this;
        jQuery.each(self.keys, function(key, value) {
          delete self.keys[key];
        });
        return self;
      },
      load: function(url) {
        var hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, "$1");
        var search = url.replace(/^.*?[?](.+?)(?:#.+)?$/, "$1");
        return new queryObject(url.length == search.length ? '' : search, url.length == hash.length ? '' : hash);
      },
      empty: function() {
        return this.copy().EMPTY();
      },
      copy: function() {
        return new queryObject(this);
      },
      COMPACT: function() {
        function build(orig) {
          var obj = typeof orig == "object" ? is(orig, Array) ? [] : {} : orig;
          if (typeof orig == 'object') {
            function add(o, key, value) {
              if (is(o, Array))
                o.push(value);
              else
                o[key] = value;
            }
            jQuery.each(orig, function(key, value) {
              if (!is(value)) return true;
              add(obj, key, build(value));
            });
          }
          return obj;
        }
        this.keys = build(this.keys);
        return this;
      },
      compact: function() {
        return this.copy().COMPACT();
      },
      toString: function() {
        var i = 0, queryString = [], chunks = [], self = this;
        var encode = function(str) {
          str = str + "";
          if ($spaces) str = str.replace(/ /g, "+");
          return encodeURIComponent(str);
        };
        var addFields = function(arr, key, value) {
          if (!is(value) || value === false) return;
          var o = [encode(key)];
          if (value !== true) {
            o.push("=");
            o.push(encode(value));
          }
          arr.push(o.join(""));
        };
        var build = function(obj, base) {
          var newKey = function(key) {
            return !base || base == "" ? [key].join("") : [base, "[", key, "]"].join("");
          };
          jQuery.each(obj, function(key, value) {
            if (typeof value == 'object')
              build(value, newKey(key));
            else
              addFields(chunks, newKey(key), value);
          });
        };

        build(this.keys);

        if (chunks.length > 0) queryString.push($hash);
        queryString.push(chunks.join($separator));

        return queryString.join("");
      }
    };

    return new queryObject(location.search, location.hash);
  };
}(jQuery.query || {});

然后我们可以通过这么调用它

2.关于图片回调还是涉及到以前做的图片公共管理简化了操作,我们只需要很简单的向GetImg.ashx请求图片,根据type尺寸,fileName和到底调用哪个方法来获取不同的图片

3.关于这个类别分组查询,去年我做的一个网页比赛中就遇到过,以前是这两个

分别是全国省市内容加载和红色事件加载,都只需要一条查询语句就能查询结果,利用了分组查询,蛮有意思的,

大致的语句

select id,title,isnull(histroytime,0) as month from(select

id,title,histroytime,row_number() over(partition by histroytime order by

histroytime) total from redCalendar) rn where rn.total<5

 

其实就是row_number和分组的用法

 

然后在程序中判断

程序主要代码:

前台:

<%@ Page Language="C#" MasterPageFile="~/InfoPage.master" AutoEventWireup="true"
    CodeFile="MasterInfo.aspx.cs" Inherits="Master_MasterInfo" Title="大师信息" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="../css/gs_ms.css" rel="stylesheet" type="text/css" />

    <script src="../Admin/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

    <script src="../js/queryUrlParams.js" type="text/javascript"></script>

    <script src="MasterInfo.js" type="text/javascript"></script>


    <script type="text/javascript">
   //获得大师id信息
     var id=$.query.get("MasterId");
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div class="ms">
        <div class="ms_top">
            <div class="m_load">
                <span><a href="../Default.aspx">首页</a> > <a href="MasterList.aspx">大师风采</a> > 大师</span></div>
            <div class="mst_c">
                <ul class="mst_ul">
                    <li><a href="#" id="Master_Intro">
                        <p class="hide">
                            大师简介</p>
                    </a></li>
                    <li><a href="#" id="Master_Award">
                        <p class="hide">
                            获奖情况</p>
                    </a></li>
                    <li><a href="#" id="Master_Work">
                        <p class="hide">
                            大师作品</p>
                    </a></li>
                </ul>
                <div class="mst_img">
                    <img src="../images/master_img.png" id="imgMaster" /></div>
                <div class="mst_xx">
                    <table width="252" height="141" id="tbMasterInfo">
                    </table>
                </div>
            </div>
        </div>
        <div class="gs_nr" id="MasterContent">

        </div>
    </div>
</asp:Content>

处理加载的ajax的js文件:

     $(function(){
     GetMasterInfo();
     GetMasterIntro();
     //绑定获取大师简介事件
     $("#Master_Intro").click(function(){
     GetMasterIntro();
     });
     $("#Master_Award").click(function(){
     GetMasterReward();
     });
     $("#Master_Work").click(function(){
     GetMasterWork();
     });
     });
    //获取大师基本信息
    function GetMasterInfo(){
    $.ajax({
    url:"Data/MasterInfo.ashx?method=GetMasterInfo&MasterId="+id,
    type:"post",
    success:function(text){
     var jsonData=$.parseJSON(text);
     if(jsonData.Status){
      var item='<tr><td width="51"> 姓名：</td>';
      item+=' <td width="92">'+jsonData.Data[0].Name+'</td>';
      item+='<td width="47">性别: </td>';
      item+='<td width="42">'+jsonData.Data[0].Sex+'</td>';
      item+=' </tr>';
      item+='<tr> <td> 出生：</td>';
      item+='<td>'+jsonData.Data[0].Birthday+'</td>';
      item+='</tr>';
      item+=' <tr><td colspan="4">艺术家分类：';
      item+=jsonData.Data[0].TypeName;
      item+='</td></tr>';

      $("#tbMasterInfo").empty();
      $("#tbMasterInfo").append(item);
        var src="../Admin/FileManage/GetImg.ashx?method=GetMasterPic&type=medium&fileName="+jsonData.Data[0].PicturePath;
      $("#imgMaster").attr("src",src);
     }
    }
    });

    }
    //获取大师简介信息
     function GetMasterIntro(){
      $.ajax({
    url:"Data/MasterInfo.ashx?method=GetMasterIntro&MasterId="+id,
    type:"post",
    success:function(text){
      var jsonData=$.parseJSON(text);
     if(jsonData.Status){
       var item='<h4>大师简介</h4>';
       item+='<p>'+jsonData.Data[0].Introduction+'</p>';
      $("#MasterContent").empty();
      $("#MasterContent").append(item);
       }
      }
      });
     }
     //获取大师荣誉信息
     function GetMasterReward(){
  $.ajax({
    url:"Data/MasterInfo.ashx?method=GetMasterReward&MasterId="+id,
    type:"post",
    success:function(text){
      var jsonData=$.parseJSON(text);
     if(jsonData.Status){
       var item='<h4>大师荣誉</h4>';
       item+='<ul class="gs_reward">';
       item+=' <li>'+jsonData.Data[0].Reward+'</li></ul>';
       item+=' <h4>获奖情况</h4><ul class="gs_cup">';
      $.each(jsonData.Data[0].CertPicList,function(key,value){
        var img="../Admin/FileManage/GetImg.ashx?method=GetMasterCert&type=medium&fileName="+value.CertPic;
      item+='<li><span class="c_pic_a">';
     item+='<img src='+img+' alt='+value.CertName+' title='+value.CertName+'/></span><span class="a_title">'+value.CertName+'</span>';
      item+='</li>';
      });
      item+='</ul>';
      $("#MasterContent").empty();
      $("#MasterContent").append(item);
       }
      }
      });
     }
     //获取大师产品信息
  function GetMasterWork(){
  $.ajax({
    url:"Data/MasterInfo.ashx?method=GetMasterWork&MasterId="+id,
    type:"post",
    success:function(text){
      var jsonData=$.parseJSON(text);

     if(jsonData.Status){
     var item='';
     $.each(jsonData.Data,function(key,value){
       item+='<h4>'+value.TypeName+'</h4>';
       item+='<ul class="gs_pic">';
         $.each(value.Product,function(PKey,PValue){
               var img="../Admin/FileManage/GetImg.ashx?method=GetMainProductPic&type=medium&fileName="+PValue.Picturepath;
               item+='<li>';
                  item+='<a href="../Product/Product.aspx?ProductId='+PValue.ProductId+'" class="c_pic_a"><img src="'+img+'" alt="'+PValue.Name+'" title="'+PValue.SimpleName+'"/></a>';
                  item+='<a href="../Product/Product.aspx?ProductId='+PValue.ProductId+'" class="a_title">'+PValue.SimpleName+'<br/><span class="rad2">￥'+PValue.Lsprice+'</span></a> ';
               item+='</li>';
                             })
       item+='</ul>';
       item+='<div style="text-align:right"><a href="../Product/Master_MoreProduct.aspx?MasterId=' + id + '&&TypeId=' + value.TypeId + '">more>></a></div>';

       })
      $("#MasterContent").empty();
      $("#MasterContent").append(item);
      }
      }
      });
     }

类别分组的DAL方法:
 /// <summary>
        /// 通过大师id查找大师的产品(每种分别显示前8个)
        /// </summary>
        /// <param name="MasterId">大师id</param>
        /// <returns></returns>
        public DataTable ListAllByMasterIdToDatable(string MasterId)
        {
            return SqlHelper.ExecuteDataTable("select * from(select *,row_number() over (partition by TypeId order by TypeId) total from VProductCraftType where Masterid=@Masterid and Belongstype='0') rn where rn.total<=8", (DbParameter)new SqlParameter("Masterid", MasterId));
        }

数据库的查询效果:

BLL的主要业务逻辑处理:

下面第一个的业务逻辑是难点:

   /// <summary>
        /// 根据大师id查找大师的产品信息(每种分别显示前8个)
        /// </summary>
        /// <param name="MasterId">大师Id</param>
        /// <returns></returns>
        public string GetMasterWorkForJson(string MasterId)
        {
            //查询状态
            bool Status = false;
            //获取大师的产品信息(每种显示前8个)
            DataTable dtListProduct = new VProductCraftTypeDAL().ListAllByMasterIdToDatable(MasterId);
            //转化为json格式
            StringBuilder json = new StringBuilder();
            StringWriter sw = new StringWriter(json);

            using (JsonWriter jsonWriter = new JsonTextWriter(sw))
            {

                jsonWriter.Formatting = Formatting.Indented;
                //判断数据读取状态
                if (dtListProduct.Rows.Count > 0)
                {
                    Status = true;
                }
                jsonWriter.WriteStartObject();
                jsonWriter.WritePropertyName("Status");
                jsonWriter.WriteValue(Status);
                jsonWriter.WritePropertyName("Data");

                jsonWriter.WriteStartArray();

                //先输出第一个元素的类别信息
                jsonWriter.WriteStartObject();
                jsonWriter.WritePropertyName("TypeId");
                jsonWriter.WriteValue(dtListProduct.Rows[0]["TypeId"].ToString());
                jsonWriter.WritePropertyName("TypeName");
                jsonWriter.WriteValue(dtListProduct.Rows[0]["TypeName"].ToString());
                //第一个元素的开始
                jsonWriter.WritePropertyName("Product");
                jsonWriter.WriteStartArray();

                //按照类别分组
                //产品计数(一个分组下的产品,从1开始算起)

                for (int num = 0,numProduct=1; num < dtListProduct.Rows.Count;num++, numProduct++)
                {

                    //获取该类别下的分组总个数
                    int Total = Convert.ToInt32(dtListProduct.Rows[num]["total"]);
                    //如果该类别下还存在未输出的产品
                    if (numProduct <= Total)
                    {


                            jsonWriter.WriteStartObject();
                            jsonWriter.WritePropertyName("ProductId");
                            jsonWriter.WriteValue(dtListProduct.Rows[num]["Id"].ToString());
                            jsonWriter.WritePropertyName("Name");
                            jsonWriter.WriteValue(dtListProduct.Rows[num]["Name"].ToString ());
                            jsonWriter.WritePropertyName("SimpleName");
                            jsonWriter.WriteValue(dtListProduct.Rows[num]["SimpleName"].ToString());
                            jsonWriter.WritePropertyName("Lsprice");
                            jsonWriter.WriteValue(dtListProduct.Rows[num]["Lsprice"].ToString());
                            jsonWriter.WritePropertyName("Picturepath");
                            jsonWriter.WriteValue(dtListProduct.Rows[num]["Picturepath"].ToString());
                            jsonWriter.WriteEndObject();

                        }
                    else{
                        //将该类别的产品计数重置为1
                        numProduct = 1;
                        //这里给上一个类别的产品结束标记

                        jsonWriter.WriteEndArray();
                        jsonWriter.WriteEndObject();

                        jsonWriter.WriteStartObject();
                        jsonWriter.WritePropertyName("TypeId");
                        jsonWriter.WriteValue(dtListProduct.Rows[num]["TypeId"].ToString());
                        jsonWriter.WritePropertyName("TypeName");
                        jsonWriter.WriteValue(dtListProduct.Rows[num]["TypeName"].ToString());
                        //如果还存在产品
                        if (num < dtListProduct.Rows.Count)
                        {
                            //下一个元素的开始
                            jsonWriter.WritePropertyName("Product");
                            jsonWriter.WriteStartArray();

                        }

                    }
                }


                    jsonWriter.WriteEndArray();
                    jsonWriter.WriteEndObject();

            }
            return json.ToString();
        }

生成的json数据:

这里推荐大家一个工具,就是这个W3Cfuns前端工具,蛮好用的

  /// <summary>
        /// 获取大师简介信息
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public string GetMasterIntroForJson(string id)
        {
            //加载状态
            bool Status = false;
            int MasterId = Convert.ToInt32(id);
            //获取大师基本信息
            master Info = new masterDAL().Get(MasterId);

            //转化为json格式
            StringBuilder json = new StringBuilder();
            StringWriter sw = new StringWriter(json);
            using (JsonWriter jsonWriter = new JsonTextWriter(sw))
            {
                jsonWriter.Formatting = Formatting.Indented;
                //判断数据读取状态
                if (Info.Id.HasValue)
                {
                    Status = true;
                }
                jsonWriter.WriteStartObject();
                jsonWriter.WritePropertyName("Status");
                jsonWriter.WriteValue(Status);
                jsonWriter.WritePropertyName("Data");

                jsonWriter.WriteStartArray();
                jsonWriter.WriteStartObject();
                jsonWriter.WritePropertyName("Introduction");
                jsonWriter.WriteValue(Info.Introduction);
                jsonWriter.WriteEndObject();
                jsonWriter.WriteEndArray();

                jsonWriter.WriteEndObject();

            }
            return json.ToString();
        }
        /// <summary>
        /// 获取大师获奖信息
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public string GetMasterRewardForJson(string id)
        {
         //加载状态
            bool Status = false;
            //获取大师荣誉证书
            IEnumerable<master_cert> masterCertList = new master_certDAL().ListAllById(id);
            int MasterId = Convert.ToInt32(id);
            //获取大师基本信息
            master Info = new masterDAL().Get(MasterId);

            //转化为json格式
            StringBuilder json = new StringBuilder();
            StringWriter sw = new StringWriter(json);
            using (JsonWriter jsonWriter = new JsonTextWriter(sw))
            {
                jsonWriter.Formatting = Formatting.Indented;
                //判断数据读取状态
                if (Info.Id.HasValue)
                {
                    Status = true;
                }
                jsonWriter.WriteStartObject();
                jsonWriter.WritePropertyName("Status");
                jsonWriter.WriteValue(Status);
                jsonWriter.WritePropertyName("Data");

                jsonWriter.WriteStartArray();
                jsonWriter.WriteStartObject();
                jsonWriter.WritePropertyName("Reward");
                jsonWriter.WriteValue(Info.Reward);

               jsonWriter.WritePropertyName("CertPicList");
                jsonWriter.WriteStartArray();
                foreach (master_cert cert in masterCertList)
                {
                    jsonWriter.WriteStartObject();
                    jsonWriter.WritePropertyName("CertName");
                    jsonWriter.WriteValue(cert.Name);
                    jsonWriter.WritePropertyName("CertPic");
                    jsonWriter.WriteValue(cert.Picpath);
                    jsonWriter.WriteEndObject();

                }
                jsonWriter.WriteEndArray();
                jsonWriter.WriteEndObject();


                jsonWriter.WriteEndObject();

            }
            return json.ToString();
        }

        /// <summary>
        /// 获取大师基本信息
        /// </summary>
        /// <param name="id">大师id</param>
        /// <returns></returns>
        public string GetMasterInfoForJson(string id)
        {
            //加载状态
            bool Status = false;
            //获取大师类别信息
            IEnumerable<VMasterType> masterTypeList = new VMasterTypeDAL().ListAllById(id);
            //拼接大师类别信息
            StringBuilder sbTypeName = new StringBuilder();
            foreach (var masterType in masterTypeList)
            {
                sbTypeName.Append(masterType.TypeName);

                if (masterType != masterTypeList.Last())
                {
                    sbTypeName.Append(",");
                }
            }

            int MasterId = Convert.ToInt32(id);
            //获取大师基本信息
            master Info = new masterDAL().Get(MasterId);

            //转化为json格式
            StringBuilder json = new StringBuilder();
            StringWriter sw = new StringWriter(json);
            using (JsonWriter jsonWriter = new JsonTextWriter(sw))
            {
                jsonWriter.Formatting = Formatting.Indented;
                //判断数据读取状态
                if (Info.Id.HasValue)
                {
                    Status = true;
                }
                jsonWriter.WriteStartObject();
                jsonWriter.WritePropertyName("Status");
                jsonWriter.WriteValue(Status);
                jsonWriter.WritePropertyName("Data");

                jsonWriter.WriteStartArray();
                jsonWriter.WriteStartObject();
                jsonWriter.WritePropertyName("Name");
                jsonWriter.WriteValue(Info.Name);
                jsonWriter.WritePropertyName("Sex");
                jsonWriter.WriteValue(Info.Sex == "1" ? "男" : "女");
                jsonWriter.WritePropertyName("Birthday");
                jsonWriter.WriteValue(Info.BirthDay.Value.ToShortDateString());
                jsonWriter.WritePropertyName("PicturePath");
                jsonWriter.WriteValue(Info.Picturepath);
                jsonWriter.WritePropertyName("TypeName");
                jsonWriter.WriteValue(sbTypeName.ToString());
                jsonWriter.WriteEndObject();
                jsonWriter.WriteEndArray();

                jsonWriter.WriteEndObject();

            }
            return json.ToString();
        }

这样这次的任务就完成了,总体感觉蛮不错的,效果很好,就是那个json数据拼接拼了好久,纠结了好久.
接下来,尽快把这个项目完整的做完,静态页面管理,大师空间,企业空间,第三方支付平台,等等,然后步入asp.net mvc学习.....哈哈!