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了。
