Ajax slide show and retriving images from database.

i tried to do something like this but getting error when i load the page.

PublicFunction GetSlides()As AjaxControlToolkit.Slide()

Dim MySlides()As AjaxControlToolkit.Slide

Using myConnectionAsNew Data.SqlClient.SqlConnection(ConfigurationManager.ConnectionStrings("WebSiteConnection").ConnectionString)

Const SQLAsString ="SELECT [Image] FROM [PictureTable]"

Dim myCommandAsNew Data.SqlClient.SqlCommand(SQL, myConnection)

myConnection.Open()

MySlides = myCommand.ExecuteScalar()

myConnection.Close()

EndUsing

Return MySlides

EndFunction

I have met the same problem in my project. I think this is a commonscenario in asp.net applications.

I read the documentation on SlideShowExtender but get poor information from it. It seems all I need to do is to write a Web Service method (must be a static method?) in the page and assign the method to SlideShowServiceMethod property of SlideShowExtender.

So here comes the code

<script runat="Server" type="text/C#"> [System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public static AjaxControlToolkit.Slide[] GetNewsPictures() { Microsoft.Practices.EnterpriseLibrary.Data.Database db = Microsoft.Practices.EnterpriseLibrary.Data.DatabaseFactory.CreateDatabase("HangBiao"); System.Data.DataTable dt = HangBiao.AOA.GongGao.GongGao.GetLatestAnnounce(5, "PicNews", db); AjaxControlToolkit.Slide[] result = new AjaxControlToolkit.Slide[] { }; for (int i = 0; i < dt.Rows.Count; i++) { result[i] = new AjaxControlToolkit.Slide(dt.Rows[i][HangBiao.AOA.GongGao.GongGao.Picture].ToString(), string.Empty, string.Empty); } return result; }</script>

and the SlideShowExtender comes here:

<cc1:SlideShowExtender ID="SlideShowExtender1" runat="server" AutoPlay="true" Loop="true" PlayInterval="100" TargetControlID="imgNews" SlideShowServiceMethod="GetNewsPictures" SlideShowServicePath="~/index.aspx"> </cc1:SlideShowExtender>

When I viewed the page in IE, I got a exception seems to complain that can not find the web method.

Anyone can help me out of this?

Hi XbHavesh,

SlideShow calls a WebService to return a Joson object.

<script runat="Server" type="text/C#">
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] GetSlides()
{
return new AjaxControlToolkit.Slide[] {
new AjaxControlToolkit.Slide("images/Blue hills.jpg", "Blue Hills", "Go Blue"),
new AjaxControlToolkit.Slide("images/Sunset.jpg", "Sunset", "Setting sun"),
new AjaxControlToolkit.Slide("images/Winter.jpg", "Winter", "Wintery..."),
new AjaxControlToolkit.Slide("images/Water lilies.jpg", "Water lillies", "Lillies in the water"),
new AjaxControlToolkit.Slide("images/VerticalPicture.jpg", "Sedona", "Portrait style picture")}; }
</script>

So you see , it is not the image itself but its relative path. Now all your pictures are stored inside Database instead of a folder, so we need a HTTPHandler which generate images when a Request received on the server side. That my solution.

First , modify your WebService like this.

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] GetSlides()
{
return new AjaxControlToolkit.Slide[] {
new AjaxControlToolkit.Slide("operate=getimage&id=111", "Blue Hills", "Go Blue"),
new AjaxControlToolkit.Slide("operate=getimage&id=222", "Sunset", "Setting sun"),
new AjaxControlToolkit.Slide("operate=getimage&id=333", "Winter", "Wintery..."),
new AjaxControlToolkit.Slide("operate=getimage&id=444", "Water lillies", "Lillies in the water"),
new AjaxControlToolkit.Slide("operate=getimage&id=555", "Sedona", "Portrait style picture")};
}
Second , add the HttpHandler to your project . How to , please referencethis article.

I hope this help.

Best regards,

Jonathan

Hi Mingyeh,

mingyeh:

<cc1:SlideShowExtender ID="SlideShowExtender1" runat="server" AutoPlay="true" Loop="true" PlayInterval="100"TargetControlID="imgNews" SlideShowServiceMethod="GetNewsPictures" SlideShowServicePath="~/index.aspx"> </cc1:SlideShowExtender>

I think you should not add SlideShowServicePath property because you have put the WebService and the Control on the same page.

I hope this help.

Best regards,

Jonathan

I encapsulate it into an user control, and here comes the HTML code of it:

<%@. Control Language="C#" AutoEventWireup="true" CodeFile="News.ascx.cs" Inherits="UserAscx_News" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><table border="0" cellpadding="3" cellspacing="0"> <tr> <td valign="top"> <asp:Image ID="imgNews" runat="server" Height="120px" Width="160px" />  <cc1:SlideShowExtender ID="SlideShowExtender1" runat="server" TargetControlID="imgNews" AutoPlay="true" Enabled="true" Loop="true" SlideShowServicePath="NewPictures.asmx" SlideShowServiceMethod="GetSlides"> </cc1:SlideShowExtender> </td> <td valign="top"> <asp:DataList ID="dlNews" runat="server" OnItemDataBound="dlNews_ItemDataBound"> <ItemTemplate> <asp:HyperLink ID="hlNews" runat="server" Target="_blank"></asp:HyperLink> </ItemTemplate> <AlternatingItemStyle CssClass="tr2" Font-Size="12px" HorizontalAlign="Left" /> <ItemStyle CssClass="tr1" Font-Size="12px" HorizontalAlign="Left" /> </asp:DataList> <asp:HyperLink ID="hlMore" runat="server" Font-Size="12px" Target="_blank">More News...</asp:HyperLink></td> </tr></table>

As you have noticed, I created a web service named "NewPictures.asmx" and put it in the same path as the User Control.
In fact, I DID try to put the web service in a different path, but the SlidesShow can't find the correct path.
And the code of the Web Service:

using System;using System.Web;using System.Collections;using System.Web.Services;using System.Web.Services.Protocols;using Microsoft.Practices.EnterpriseLibrary.Data;using HangBiao.AOA.GongGao;using System.Data;/// <summary>/// NewPictures
/// </summary>[WebService(Namespace ="http://tempuri.org/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][System.Web.Script.Services.ScriptService] // You have to add this line to make the service available for slides showpublic class NewPictures : System.Web.Services.WebService{ public NewPictures() { //InitializeComponent(); } [WebMethod] public AjaxControlToolkit.Slide[] GetSlides() { int newsCount = 5; string sql = "SELECT TOP" + newsCount.ToString() + " " + GongGao.Picture + " FROM" + GongGao.Tablename + " WHERE" + GongGao.IsDeleted + " = 0 AND" + GongGao.Sort + " ='Photo News' " + " ORDER BY" + GongGao.AddDate + " DESC"; Database db = DatabaseFactory.CreateDatabase("HangBiao"); DataSet ds = db.ExecuteDataSet(CommandType.Text, sql); AjaxControlToolkit.Slide[] result =new AjaxControlToolkit.Slide[] { }; Array.Resize(ref result, ds.Tables[0].Rows.Count);for (int i = 0; i < ds.Tables[0].Rows.Count; i++) { result[i] =new AjaxControlToolkit.Slide(ds.Tables[0].Rows[i][GongGao.Picture].ToString(),string.Empty,string.Empty); }return result; }}

I hope this would help.

Good day and happy coding!