65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET 轮播广告及其实现

Anurag Prajesh
starIconstarIconstarIconstarIconemptyStarIcon

4.00/5 (4投票s)

2014 年 12 月 1 日

CPOL

2分钟阅读

viewsIcon

18514

downloadIcon

366

如何使用广告轮播在您的网站中添加横幅和幻灯片

引言

轮播广告 (AdRotator) 提供了一种在网站上随机选择并显示横幅图片广告的功能。
它使用 XML 文件来显示广告。XML 代表可扩展标记语言，用于存储和传输数据。
为了更好地理解，您可以学习一些 XML 知识。

它具有有限的属性

  1. <Advertisement File>：它将所有广告组合在一起。
  2. <Ad>：分组单个广告。
  3. <ImageUrl>：将要显示的图像 URL。
  4. <NavigateUrl>：为显示的图像提供导航 URL，如果您点击该图像，您将被重定向到该 URL。
  5. <Alternate Text>：如果图像不存在，将显示此文本。
  6. <Height>：设置广告的高度。
  7. <Width>：设置广告的宽度。
  8. <Impressions>：广告出现的频率。

解决方案方法

在母版页中使用轮播广告的一个简单而有效的方法是显示一个幻灯片，因为母版页是所有子页面的公共部分。

添加一个图像文件夹并粘贴一些用于轮播的图像。

2. 添加一个 XML 文件作为数据源，并保存为 Imagerotator.xml。
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
  <Ad>
    <ImageUrl>~/images/nature-photo4.png</ImageUrl>
    <NavigateUrl>https://codeproject.org.cn/script/Membership/View.aspx?mid=8414042</NavigateUrl>
    <AlternateText>Image is currently unavailable</AlternateText>
    <Impressions>20</Impressions>
  </Ad>
  <Ad>
    <ImageUrl>~/images/nature-photo.png</ImageUrl>
    <NavigateUrl>https://codeproject.org.cn/script/Membership/View.aspx?mid=8414042</NavigateUrl>
    <AlternateText>Image is currently unavailable</AlternateText>
    <Impressions>20</Impressions>
  </Ad>
  <Ad>
     <ImageUrl>~/images/nature-photo1.png</ImageUrl>
    <NavigateUrl>https://codeproject.org.cn/script/Membership/View.aspx?mid=8414042</NavigateUrl>
    <AlternateText>Image is currently unavailable</AlternateText>
    <Impressions>20</Impressions>
  </Ad>
  <Ad>
    <ImageUrl>~/images/nature-photo2.png</ImageUrl>
    <NavigateUrl>https://codeproject.org.cn/script/Membership/View.aspx?mid=8414042</NavigateUrl>
    <AlternateText>Image is currently unavailable</AlternateText>
    <Impressions>20</Impressions>
  </Ad>
</Advertisements>
3. 添加一个母版页并保存为 MasterPage.master，粘贴以下代码。

这里，脚本管理器 (Script Manager) 用于部分回发，计时器 (Timer) 用于在给定间隔后刷新页面。
如果您不使用脚本管理器控件，则整个页面将在给定间隔后刷新，但您希望刷新广告部分，因此您需要使用脚本管理器。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #divAdrotator
        {   height: 300px;
            width: 1000px;
            margin-left: 25%;}
        p
        {text-align: center;}
    </style>
    <asp:ContentPlaceHolder ID="head" runat="server"/>    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="divAdrotator">
            <asp:ScriptManager ID="ScriptManager" runat="server">
            </asp:ScriptManager>
            <asp:Timer ID="Timer" runat="server" Interval="5000">
            </asp:Timer>
            <asp:AdRotator ID="AdRotator" runat="server" 
             AdvertisementFile="~/Imagerotator.xml" Height="250px" Width="1000px"/>            
        </div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server"/>
    </div>
    </form>
</body>
</html>
4. 添加一个新的网页并绑定到母版页。
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder" Runat="Server">
<p>Welcome to Home page.</p>
</asp:Content>

如何运行应用程序

  • 右键单击您的网页并选择设置为启动页
  • 现在按 F5

关注点

  1. 调整所有横幅的宽度和高度相同。
  2. 如果没有 ScriptManager （Ajax 控件），整个页面将被刷新，Ajax 通过 ScriptManager 提供部分回发功能。
  3. 当您将页面绑定到母版页时，页面代码背后将没有 HTML Body，因为它由母版页继承，有两个 ContentPlaceHolder，一个用于页眉部分（样式、JavaScript），第二个用于子页面内容。
© . All rights reserved.