Ajax方式的Banner总结

Ajax方式的Banner总结
首先Ajax方式是基于jQuery的Ajax.
在需要广告的地方放上显示广告的容器，一般是一个div，然后在div的下方加上js的ajax请求服务器，
在请求回来后，使用js在div展示输出。
首先我们定义一个AjaxBanner.ascx控件：
<%@ Control Language="C#" AutoEventWireup="false" CodeFile="AjaxBanner.ascx.cs" Inherits="CN.Newegg.Web.UserControls.Common.AjaxBanner" %>
<asp:Literal ID="bannerContainer" runat="server"></asp:Literal>


public partial class AjaxBanner : WWWUserControlBase
    {
        private BannerCategory category;
        private int pageid;
        private PageType pagetype;
        private BannerPosition bannerPosition;
        private int channelid;
        private string relativeTags;
        private string userDefineClass;
        public int support1280Image;
        public int maxCountBanner;
        private string divAddCss;


        public string DivAddCss
        {
            get { return this.divAddCss; }
            set { this.divAddCss = value; }
        }

        public int PageID
        {
            get { return this.pageid; }
            set { this.pageid = value; }
        }
        public PageType PageType
        {
            get { return this.pagetype; }
            set { this.pagetype = value; }
        }
        public BannerPosition Position
        {
            get { return this.bannerPosition; }
            set { this.bannerPosition = value; }
        }
        public int ChannelID
        {
            get { return this.channelid; }
            set { this.channelid = value; }
        }

        public string RelativeTags
        {
            get { return this.relativeTags; }
            set { this.relativeTags = value; }
        }

        public BannerCategory Category
        {
            get { return this.category; }
            set { this.category = value; }
        }

        public string UserDefineClass
        {
            get { return this.userDefineClass; }
            set { this.userDefineClass = value; }
        }

        public int Support1280Image
        {
            get { return this.support1280Image; }
            set { this.support1280Image = value; }
        }
        public int MaxCountBanner
        {
            get { return this.maxCountBanner; }
            set { this.maxCountBanner = value; }
        }

        public void SetAjaxBanner(BannerCategory bannerCategory, ChannelType ct, PageType pt, int pageID, BannerPosition positionID, string userDefineClass)
        {
            this.Category = bannerCategory;
            this.ChannelID = (int)ct;
            this.PageType = pt;
            this.PageID = pageID;
            this.Position = positionID;
            this.DivAddCss = userDefineClass;
            this.RelativeTags = "";
        }

        public void SetAjaxBanner(BannerCategory bannerCategory, ChannelType ct, PageType pt, int pageID, BannerPosition positionID, string userDefineClass, int count)
        {
            this.Category = bannerCategory;
            this.ChannelID = (int)ct;
            this.PageType = pt;
            this.PageID = pageID;
            this.Position = positionID;
            this.DivAddCss = userDefineClass;
            this.RelativeTags = "";
            this.MaxCountBanner = count;
        }

        protected override void BindDataSource()
        {
            string html = string.Empty;
            switch (this.Category)
            {
                case BannerCategory.BannerCell:
                    html = ((int)this.Category).ToString() + "_" + PageID.ToString() + "_" + ((int)this.PageType).ToString() + "_" + ((int)this.Position).ToString() + "_" + this.RelativeTags + "_" + this.ChannelID.ToString() + "_0_0_0";
                    break;
                case BannerCategory.BannerImageList:
                    html = ((int)this.Category).ToString() + "_" + PageID.ToString() + "_" + ((int)this.PageType).ToString() + "_" + ((int)this.Position).ToString() + "_" + this.RelativeTags + "_" + this.ChannelID.ToString() + "_0_" + Support1280Image.ToString() + "_" + MaxCountBanner.ToString();
                    break;
                case BannerCategory.BannerSlider:
                    html = ((int)this.Category).ToString() + "_" + PageID.ToString() + "_" + ((int)this.PageType).ToString() + "_" + ((int)this.Position).ToString() + "_" + this.RelativeTags + "_" + this.ChannelID.ToString() + "_0_" + Support1280Image + "_" + MaxCountBanner.ToString();
                    break;
                case BannerCategory.BannerSliderHorizontal:
                    html = ((int)this.Category).ToString() + "_" + PageID.ToString() + "_" + ((int)this.PageType).ToString() + "_" + ((int)this.Position).ToString() + "_" + this.RelativeTags + "_" + this.ChannelID.ToString() + "_0_0_0";
                    break;
            }

            bannerContainer.Text = "<div id='banner" + html + "' class='" + DivAddCss + "' ></div><script type='text/javascript'>$(function(){Biz.Common.AjaxBannerRequest.Request('" + html + "');});</script>";
        }
    }


上面的div容器定义中需要js：
usingNamespace("Biz.Common")["AjaxBannerRequest"] = {

    Request: function(str) {
        var param = str.toString().split('_');
        var p = {
            BannerCategory: param[0],
            PageID: param[1],
            PageType: param[2],
            Position: param[3],
            RelativeTags: param[4],
            ChannelID: param[5],
            UserDefineClass: param[6],
            Support1280Image: param[7],
            MaxCountBanner: param[8]
        };
        $.ajax({
            type: "POST",
            dataType: "jsonp",
            jsonp: "jsonpcallback",
            jsonpcallback: "jsonpcallback",
            url: $.newegg.buildWWW("Ajax/Common/AjaxBanner.aspx"),
            cache: false,
            data: { params: escape($Json.ToJson(p)) },
            success: function(data) {
                Biz.Common.AjaxBannerRequest.proccessed(decodeURI(data.html), str);
            }
        });
    },
    proccessed: function(data, params) {
        if ($String.IsNullOrEmpty($String.Trim(data))) {
            return;
        }
        $("#banner" + params).html(data);
    }
}

在服务器的Ajax/Common/AjaxBanner.aspx定义如下：


    public partial class AjaxBanner : JsonPage<string>
    {
        protected override void GenerateJsonResult(JsonResult<string> result)
        {
            string bannerParam = this.Request.Params["params"];
            if (StringUtils.IsNullOrEmpty(bannerParam)) return;
            bannerParam = System.Web.HttpUtility.UrlDecode(bannerParam);
            AjaxBannerParam param = null;
            try
            {
                param = JsonHelper.JsonToObject<AjaxBannerParam>(bannerParam);
            }
            catch
            {
                //Return无法反序列的参数
                return;
            }
            string html = string.Empty;
            switch ((BannerCategory)param.BannerCategory)
            {
                case BannerCategory.BannerCell:
                    html = BindBannerCell(param);
                    break;
                case BannerCategory.BannerImageList:
                    html = BindBannerImageList(param);
                    break;
                //case BannerCategory.BannerSlider:
                //    BindBannerSlider(param);
                //    break;
                //case BannerCategory.BannerSliderHorizontal:
                //    BindBannerSliderHorizontal(param);
                //    break;
                default:
                    break;
            }
            string jsonpcallback = QueryStringValues.JsonpCallback;
            Response.Write(jsonpcallback + "({\"html\":\"" + Encode(html, global::Newegg.Framework.Web.Security.XssPosition.Javascript) + "\"});");
        }

        /// <summary>
        /// 广告类型:0
        /// PageID:1
        /// PageType:2
        /// 位置:3
        /// 频道:4
        /// </summary>
        /// <param name="param"></param>
        public string BindBannerCell(AjaxBannerParam param)
        {
            string result = "<a href=\"{0}\" target=\"_blank\" title=\"{1}\"><img src=\"{2}\" width=\"{3}\" height=\"{4}\" alt=\"{5}\"/></a>";
            BannerInfo info = new BannerInfo();
            if (param.ChannelID > 0)
                info = CommonModel.GetChannelBanner(param.PageID, param.PageType, param.Position, param.ChannelID);
            else
                info = CommonModel.GetBanner(param.PageID, param.PageType, param.Position, param.RelativeTags);
            if (info == null) return string.Empty;

            return string.Format(result, info.BannerLink, info.BannerTitle, info.BannerResourceUrl, info.BannerWidth, info.BannerHeight, info.BannerTitle);
        }

        /// <summary>
        /// 广告类型:0
        /// PageID:1
        /// PageType:2
        /// 位置:3
        /// RelativeTags:4
        /// UserDefineClass:5
        /// Support1280Image:6
        /// </summary>
        /// <param name="param"></param>
        public string BindBannerImageList(AjaxBannerParam param)
        {
            StringBuilder sb = new StringBuilder();
            List<BannerInfo> reList = CommonModel.GetBannerList(param.PageID, param.PageType, param.Position, param.RelativeTags, param.MaxCountBanner, param.ChannelID);
            if (ArrayUtils.HasElements(reList))
            {
                string a = "<a href=\"{0}\" target=\"_blank\" title=\"{1}\"><img src=\"{2}\" width=\"{3}\" height=\"{4}\" alt=\"{5}\"/></a>";
                foreach (BannerInfo info in reList)
                {
                    sb.AppendFormat(a, info.BannerLink, info.BannerTitle, info.BannerResourceUrl, info.BannerWidth, info.BannerHeight, info.BannerTitle);
                }
            }
            return sb.ToString();
        }

    }


因为是Jsonp形式，所以返回的数据必须是json格式。



使用这个ajax的Banner就非常简单了：
引入ajax的Banner的容器控件，对控件的属性赋值：
            this.WomenAjaxBanner.SetAjaxBanner(BannerCategory.BannerImageList,
                ChannelType.Women, PageType.Home, 0, BannerPosition.ChannelMenuLeftBottom, "cls menu_banner", 2);

这样就是完整的ajax的Banner了。