ASP.NET之AdRotator实现淘宝浏览页面的商品随机推荐

现在随便上个网都可以看到淘宝、京东等各大电商平台的双十一购物狂欢宣传,从2009年开始淘宝愣是把11.11这一天打造成了全民购物狂欢节。阿里巴巴的上市更是激发了阿里人的斗志,据说他们今年的目标是1000亿。都说一个成功男人的背后必有一个女人,马云的成功是背后成千上万的女人呀……

言归正传我们谈点专业的知识。我们每个人都在淘宝上买过东西吧,一般我们都是先搜索自己想要买的东西,比如:上衣、牛仔裤、帽子……然后淘宝给出我们搜索结果。如果有更加明确的购物目标我们会勾选按照人气、销量、信用、价格等筛选,然后按页浏览挑选。

但是不知道大家注意到没有就是在页面的最下方位置有一排商品。比如我们浏览完第一页发现没有喜欢的然后看到换页行就点击换第二页,当你点击进入下一页换页的时候可能眼前迅速飘过你觉得喜欢的商品,这个时候你已经进入第二页了。在当你返回第一页的时候,最下面那一排已经不是最开始的商品了。这是因为最下面的商品它是随机出现的,不是固定的做成一个网页放到那里的。

怎么实现的呢?

我想到了学习ASP.NET里面的一个AdRotator的动态广告控件。这个控件经常被用来显示一些广告内容。它使用一组在一个特定XML文件中定义好的信息轮流方式播出广告,每条信息在XML文件中指定。

下面就让我们实现淘宝浏览页面时随机推荐商品的功能来看看怎么用:

首先建立好需要的解决方案各种文件:

在XML文件中编写:

<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
    <Ad>
      <ImageUrl>~/Images/taobao.jpg</ImageUrl> //定义一个广告的图片路径
      <NavigateUrl><a target=_blank href="http://www.taobao.com/">http://www.taobao.com/</a></NavigateUrl >//连接的网址
      <AlternateText>买考拉</AlternateText>//代替图片显示的文字
      <Impressions>20</Impressions>//显示频率
      <Keyword>Category1</Keyword> //筛选的依据Keyword
    </Ad >

  <Ad>
    <ImageUrl>~/Images/jingdong.jpg</ImageUrl> //定义一个广告的图片路径
    <NavigateUrl><a target=_blank href="http://www.jd.com/">http://www.jd.com/</a></NavigateUrl >//连接的网址
    <AlternateText>买企鹅</AlternateText>//代替图片显示的文字
    <Impressions>20</Impressions>//显示频率
    <Keyword>Category1</Keyword> //筛选的依据Keyword
  </Ad >

</Advertisements>

在Default.aspx页面源视图中:

<form id="form1" runat="server">
    <div style="font-size: large; color: #FF3300; font-weight: bold;">

        请点击进入购买!<br />
        <asp:AdRotator ID="AdRotator1" runat="server"  AdvertisementFile ="~/XMLFile1.xml" Target ="_blank" OnAdCreated ="AdCreated_Event"/>

    </div>
    </form>

这里我们简单的实现在Default.aspx.cs的AdCreated_Event事件中就不添加代码了。

运行之后下面的界面就会轮流交替出现了:

    

通过查看淘宝页面的源代码我们也可以发现这样做可以实现。

我们现在学习的B/S里面的各部分内容离我们太近了,通过思考联系生活我们才能更好的运用。

至于双十一阿里人到底能创造多大的奇迹我们充其量就当做一看客,每天努力一点点才是我们真实感受到的属于我们的奇迹!

时间: 2024-08-02 07:01:29

ASP.NET之AdRotator实现淘宝浏览页面的商品随机推荐的相关文章

网页设计Dreamweaver网页制作 商业网站建设案例课程 ASP.NET基础实例教程 淘宝开店教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

网页设计 Dreamweaver网页制作 商业网站建设案例课程 ASP.NET基础实例教程 淘宝开店教程 更多&gt;

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

ASP.NET MVC中分析淘宝网页发生乱码标题搞定方法

ASP.NET MVC中分析淘宝网页发生乱码标题搞定方法 近来正在分析淘宝中商品的信息,效果发生乱码,如: 原因便是中文字符格式发生冲突,ASP.NET MVC 默认采用utf-8,可是淘宝网页采用gbk.正在网上找了一下,最常常的搞定方法便是修改web.config:< system.web> ...... < globalization requestEncoding="gbk" responseEncoding="gbk" culture=&

淘宝购物车页面 -- PC端和移动端实战

最近花了半个月的时间,做了一个淘宝购物车页面的demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在media query为768px以下(也就是实现了ipad,iphone 6 plus,iphone6,S5等)的flexbox弹性布局. 还要再说的是,pc端和移动端淘宝购物车页面的bug基本修复完毕,完全适合一个对html,css,css3 ,html5和js有基础,并且熟悉jquery,scss,熟悉json数据交换格式,jquery ajax的人进行学习

淘宝购物车页面 智能搜索框Ajax异步加载数据

如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区非常的活跃,许多朋友都在不同地方分享了很多优秀的插件.我在相关的网站上找过想实现类似功能的插件,但是没有找到.于是乎,自己动手丰衣足食.自己来搭建智能搜索框下拉列表.当然,如果有类似功能并且常维护Bug的插件,望留言交流. 源码地址: 淘宝购物车页面--PC端和移动端项目实战 首先需要先给大家打一根

Web——在淘宝搜索到看到商品

[摘自]http://blog.renren.com/blog/254459622/799372165 浏览器首先查询DNS服务器,将www.taobao.com转换成ip地址.负载均衡的第一步,将你的访问分配到不同的入口,尽可能保证你所访问的入口是所有入口中可能较快的一个. 通过这个入口成功的访问了www.taobao.com的实际的入口ip地址.产生了一个PV,即Page View,页面访问. 一次访问时生成页面给你看的任务便会被分配给其中一台服务器完成.其中最关键的便是LVS,Linux

淘宝静态页面

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <link href="css/

web类似于淘宝购物页面

花了一下午的时间写出来的简易页面,内容很粗糙,但里边包含了我独特的想法.由于是初学者,写的可能不好,希望大家多多提出意见. 这个是主程序 <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>淘宝首页</title> <script type="text/javascript" src="js/jquery-3.

图片放大镜(像淘宝浏览商品一样)JS操作

× 目录 [1]布局 [2]JS操作-获得元素 [3]大图及面板 [4]面板随着鼠标移动 [5]控制面板移动范围 [6]大图动起来 [7]代码 ------------------------------------- 一,布局 一个大的div,包括下面: 左边是小图div,小图中有可移动的面板.右边是大图div, 学到的内容:fiter 滤镜 这里;  overflow 这里 offsetLeft(HTML DOM 元素对象) 这里 <style type="text/css"