为什么使用 ajaxtoolkit:slideshowextender 时图像不显示？

Question

I'm trying to implement an 'ajaxToolkit:SlideShowExtender' attribute based on the demo code available online, also tried the code from GitHub as posted in one of the answers below.

Things I tried:

• I looked in the Web.config file of my site to make sure the 'control' for 'ajaxToolkit' was there and it is.
• I've installed 'AJAX Control Toolkit V18.1' through the NuGet manager so I believe the dll is correctly installed.
• I checked the image path, which is OK.
• There may be something missing or wrong with the ScriptManager, which is configured on my 'Site.master' page and I can't add it to the aspx page as it can only contain one ScriptManager.
• I am also unable to add the tag 'ajaxToolkit:ToolkitScriptManager' as it is not recognized. It says it's not a known element.
• I also tried moving the GetSlides() method to the Site.master.cs file, but no luck.
• I cleared my browser data (history, download, cookies, cached images and files)

From my Test.aspx file:

<%@ Page Title="Test" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit"%>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

    <table style="align-content:center; width:500px; height:250px;">
        <tr style="align-content:center;">
            <td>
                <asp:Label ID="Label1" runat="server" ForeColor="#000000" />
            </td>
        </tr>
        <tr style="align-content:center;">
            <td>
                <asp:Image runat="server" ID="Image1" Height="250" Width="400" />
            </td>
        </tr>
        <tr style="text-align:center;">
            <td>
                <asp:ImageButton ID="ImgBtnPrevious" runat="server" ImageUrl="~/images/Buttons/back.png"/>
            </td>
            <td>
                <asp:Button ID="BtnPlayStop" runat="server" BackColor="Black" ForeColor="White"/>
            </td>
            <td>
                <asp:ImageButton ID="ImgBtnNext" runat="server" ImageUrl="~/images/Buttons/forward.png"/>
            </td>
        </tr>
    </table>


    <ajaxToolkit:SlideShowExtender ID="SlideShowExtender1" runat="server" 
        AutoPlay="true" ImageTitleLabelID="Label1" PlayInterval="2000" Loop="true" PlayButtonID="BtnPlayStop"
        PlayButtonText="Play" StopButtonText="Stop" PreviousButtonID="ImgBtnPrevious" NextButtonID="ImgBtnNext"
        SlideShowAnimationType="SlideRight" TargetControlID="Image1" SlideShowServiceMethod="GetSlides" />

</asp:Content>

(My image buttons are showing up OK)

My code behind ( Test.aspx.cs file):

As you can see, I tried three different ways of displaying the images.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
using System.IO;

public partial class Test : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public AjaxControlToolkit.Slide[] GetSlides()
    {
        /*
        List<Slide> slides = new List<Slide>();
        string myimgdir = HttpContext.Current.Server.MapPath("~/images/Test/");

        DirectoryInfo dir = new DirectoryInfo(myimgdir);
        var myslides = from displayimg in dir.GetFiles()
                       select new Slide
                       {
                           Name = displayimg.Name,
                           ImagePath = "~/images/Test/" + displayimg.Name
                       };
        return myslides.ToArray();*/

        /*
        string[] imagenames = System.IO.Directory.GetFiles(Server.MapPath("~/images/Test/"));
        AjaxControlToolkit.Slide[] photos = new AjaxControlToolkit.Slide[imagenames.Length];
        for (int i = 0; i < imagenames.Length; i++)
        {
            string[] file = imagenames[i].Split('\\');
            photos[i] = new AjaxControlToolkit.Slide("Images/" + file[file.Length - 1], file[file.Length - 1], "");
        }
        return photos;
        */

        AjaxControlToolkit.Slide[] slides = new AjaxControlToolkit.Slide[4];
        slides[0] = new AjaxControlToolkit.Slide("~/images/Test/ME1.png", "First image of my album", "First Image");
        slides[1] = new AjaxControlToolkit.Slide("~/images/Test/ME2.png", "Second image of my album", "Second Image");
        slides[2] = new AjaxControlToolkit.Slide("~/images/Test/ME3.png", "Third image of my album", "Third Image");
        slides[3] = new AjaxControlToolkit.Slide("~/images/Test/ME4.png", "Fourth image of my album", "Fourth Image");
        return (slides);

    }
}

My Web.config (as it also contains code that relates to the Ajax Controls):

<?xml version="1.0" encoding="utf-8"?>

<configuration>
  <configSections>
    <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
    <section name="ajaxControlToolkit" type="AjaxControlToolkit.AjaxControlToolkitConfigSection, AjaxControlToolkit" requirePermission="false" />
  </configSections>
  <ajaxControlToolkit useStaticResources="true" renderStyleLinks="false" htmlSanitizer="AjaxControlToolkit.HtmlEditor.Sanitizer.DefaultHtmlSanitizer, AjaxControlToolkit.HtmlEditor.Sanitizer" tempFolder="~/Temp" />
  <location path="Temp">
    <system.webServer>
      <handlers>
        <clear />
      </handlers>
      <modules>
        <clear />
      </modules>
    </system.webServer>
  </location>

  <system.web>
    <authentication mode="None" />
    <compilation debug="true" targetFramework="4.5.2">
      <assemblies>
        <add assembly="System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" />
        <add assembly="System.Web.Extensions.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
      </assemblies>
    </compilation>
    <httpRuntime targetFramework="4.5.1" />
    <pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">
      <namespaces>
        <add namespace="System.Web.Optimization" />
        <add namespace="Microsoft.AspNet.Identity" />
      </namespaces>
      <controls>
        <add assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagPrefix="ajaxToolkit" />
        <add namespace="InfoBlock" tagPrefix="samples" />
        <add assembly="Microsoft.AspNet.Web.Optimization.WebForms" namespace="Microsoft.AspNet.Web.Optimization.WebForms" tagPrefix="webopt" />
      </controls>
    </pages>
    <membership>
      <providers>
        <clear />
      </providers>
    </membership>
    <profile>
      <providers>
        <clear />
      </providers>
    </profile>
    <roleManager>
      <providers>
        <clear />
      </providers>
    </roleManager>

    <sessionState mode="InProc" customProvider="DefaultSessionProvider">
      <providers>
        <add name="DefaultSessionProvider" type="System.Web.Providers.DefaultSessionStateProvider, System.Web.Providers, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" connectionStringName="DefaultConnection" />
      </providers>
    </sessionState>
    <customErrors mode="Off" />
    <trust level="Full" />
  </system.web>
  <system.webServer>
    <handlers>
      <add name="AjaxFileUploadHandler" verb="*" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit" />
    </handlers>
    <rewrite>
      <rules>
        <rule name="HTTP to HTTPS redirect" stopProcessing="true">
          <match url="(.*)" />
          <conditions>
            <add input="{HTTPS}" pattern="off" ignoreCase="true" />
          </conditions>
          <action type="Redirect" redirectType="Permanent" url="https://{HTTP_HOST}/{R:1}" />
        </rule>
      </rules>
    </rewrite>
    <modules>
      <remove name="FormsAuthentication" />
    </modules>
  </system.webServer>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="Newtonsoft.Json" culture="neutral" publicKeyToken="30ad4fe6b2a6aeed" />
        <bindingRedirect oldVersion="0.0.0.0-6.0.0.0" newVersion="6.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="WebGrease" culture="neutral" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="0.0.0.0-1.5.2.14234" newVersion="1.5.2.14234" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="EntityFramework" publicKeyToken="b77a5c561934e089" />
        <bindingRedirect oldVersion="0.0.0.0-6.0.0.0" newVersion="6.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Microsoft.Owin" culture="neutral" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="0.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Microsoft.Owin.Security.OAuth" culture="neutral" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="0.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Microsoft.Owin.Security.Cookies" culture="neutral" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="0.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Microsoft.Owin.Security" culture="neutral" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="0.0.0.0-3.0.1.0" newVersion="3.0.1.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="AjaxControlToolkit" publicKeyToken="28f01b0e84b6d53e" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-18.1.1.0" newVersion="18.1.1.0" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
  <system.codedom>
  </system.codedom>
</configuration>

The output looks like this:

When trying to debug via F12 > Network, I'm seeing the below (which I don't understand):

PS. I'm running this on localhost.

PPS. I'm running Visual Studio 2017 version 15.2 (26430.16) and Microsoft .NET Framework version 4.7.03056. (targetFramework .NET = 4.5.2)

I'd very much like to see the images displayed in a slider on the webpage. All help is appreciated!

Update:

When experimenting with the Network debugger built in the browser, I noticed the following (screenshot below). It seems like some of my images subfolders (like 'Test') are missing. That would explain why my images can't be found. Any idea what the cause of this might be?

A strange thing is that the debugger shows slideShowServicePath while that isn't configured in my .aspx file.

Update 2:

When browsing to https://localhost:44367/images/Test/ I get the error:

HTTP Error 403.14 - Forbidden The Web server is configured to not list the contents of this directory.

After adding <directoryBrowse enabled="true" /> to the Web.config I can see the folder and images in it via the browser (links to the images, not actual picture). I can then click and view the images.

BUT I can still not see the images in the Ajax SlideShowExtender.

Answer 1

The code you are looking is for Vs 2005 and .net 2.0. The latest working code is here. Q.There may be something missing or wrong with the ScriptManager, which is configured on my 'Site.master' page and I can't add it to the aspx page as it can only contain one ScriptManager. **

A. You have to upgrade project to .net 4.0 and then change web.config also.

**

https://github.com/DevExpress/AjaxControlToolkit/tree/master/AjaxControlToolkit.SampleSite/SlideShow

<?xml version="1.0"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <configSections>
    <section name="ajaxControlToolkit" type="AjaxControlToolkit.AjaxControlToolkitConfigSection, AjaxControlToolkit" requirePermission="false"/>
  </configSections>
  <ajaxControlToolkit useStaticResources="true" renderStyleLinks="false" htmlSanitizer="AjaxControlToolkit.HtmlEditor.Sanitizer.DefaultHtmlSanitizer, AjaxControlToolkit.HtmlEditor.Sanitizer" tempFolder="~/Temp"/>
  <location path="Temp">
    <system.webServer>
      <handlers>
        <clear/>
      </handlers>
      <modules>
        <clear/>
      </modules>
    </system.webServer>
  </location>
  <!--
    For a description of web.config changes see http://go.microsoft.com/fwlink/?LinkId=235367.

    The following attributes can be set on the <httpRuntime> tag.
      <system.Web>
        <httpRuntime targetFramework="4.7" />
      </system.Web>
  -->
  <system.web>
    <compilation debug="true" targetFramework="4.7"/>
    <machineKey validation="SHA1" decryptionKey="7EE421F6987EAFF4998E0F2ED5544AF1B931C82A1602BC2E" validationKey="5278D83EDD8E36C27E019D3E975D62A3FDF0E8EF50DB69F659D03EB18A4459D2B3271AA075173012EF122E2B7BFA49CDE16CC0DCC68F3E862E1EEE491D300DC9"/>
    <siteMap>
      <providers>
        <add name="SamplesSiteMap" type="System.Web.XmlSiteMapProvider" siteMapFile="~/Samples.sitemap"/>
      </providers>
    </siteMap>
    <pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">
      <controls>
        <add assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagPrefix="ajaxToolkit"/>
        <add namespace="InfoBlock" tagPrefix="samples"/>
      </controls>
    </pages>
    <trust level="Medium"/>
  </system.web>
  <system.webServer>
    <handlers>
      <add name="AjaxFileUploadHandler" verb="*" path="AjaxFileUploadHandler.axd" type="AjaxControlToolkit.AjaxFileUploadHandler, AjaxControlToolkit"/>
    </handlers>
  </system.webServer>
  <runtime>

  </runtime>
</configuration>

Answer 2

I saw your Question Today...

1. you have add Folder name "images" ... in your Project with multiple Images...as per Your preference..

2. Add ajax toolkit reference...in .aspx page....

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

.aspx Page Code.....

<html>
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <asp:Button ID="btnPrevious" runat="server" Text="<<" Font-Size="20" />
        </td>
        <td>
            <asp:Image ID="Image1" runat="server" Height="300" Width="300" />
            <cc1:SlideShowExtender ID="SlideShowExtender" runat="server" TargetControlID="Image1"
                SlideShowServiceMethod="GetImages" ImageTitleLabelID="lblImageTitle" ImageDescriptionLabelID="lblImageDescription"
                AutoPlay="true" Loop="true" PlayButtonID="btnPlay" StopButtonText="Stop"
                PlayButtonText="Play" NextButtonID="btnNext" PreviousButtonID="btnPrevious">
            </cc1:SlideShowExtender>
        </td>
        <td>
            <asp:Button ID="btnNext" runat="server" Text=">>" Font-Size="20" />
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center">
            <asp:Button ID="btnPlay" runat="server" Text="Play" Font-Size="20" />
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center">
            <br />
            <b>Name:</b>
            <asp:Label ID="lblImageTitle" runat="server" Text="Label" /><br />
            <b>Description:</b>
            <asp:Label ID="lblImageDescription" runat="server" Text="Label" />
        </td>
    </tr>
</table>
    </form>
</body>

.cs Page Code...

using System;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using AjaxControlToolkit;
using System.Web.Services;
using System.Web.Script.Services;
using System.Collections.Generic;

public partial class CS : System.Web.UI.Page
{
[WebMethod]
[ScriptMethod]
public static Slide[] GetImages()
{
    List<Slide> slides = new List<Slide>();
    string path = HttpContext.Current.Server.MapPath("~/images/");
    if (path.EndsWith("\\"))
    {
        path = path.Remove(path.Length - 1);
    }
    Uri pathUri = new Uri(path, UriKind.Absolute);
    string[] files = Directory.GetFiles(path);
    foreach (string file in files)
    {
        Uri filePathUri = new Uri(file, UriKind.Absolute);
        slides.Add(new Slide
        {
            Name = Path.GetFileNameWithoutExtension(file),
            Description = Path.GetFileNameWithoutExtension(file) + " Description.",
            ImagePath = pathUri.MakeRelativeUri(filePathUri).ToString()
        });
    }
    return slides.ToArray();
}
}

Note:- Just Put this code in proper way in your project...this will work...i have already use this code for my Project.....I'm using 3.5 version...

Answer 3

It looks like you are missing handler which would handle the requests for 'ScriptResource.axd'

<system.webServer>
<handlers>
<add name="ScriptResource" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" preCondition="integratedMode" />
</handlers>