sny23vpb
asked on
Slideshow Ajax c#
Hello:
I'm new to ajax and found some slideshow code which I modified to be data driven.
My problem is that I'm trying to get the code to provide a data driven image title/caption also and I'm having some difficulty getting it to work properly. When it hits the data loop; I'm assigning the image caption to a session variable at the same time that I assign the image path. Image path is working fine ; image caption never changes; even though in debug mode you can clearly see the value of the session variable changing. Any help would be greatly appreciated. I think its something basic like I'm not understanding the postback process or something to that effect.
Here is the html page:
I'm new to ajax and found some slideshow code which I modified to be data driven.
My problem is that I'm trying to get the code to provide a data driven image title/caption also and I'm having some difficulty getting it to work properly. When it hits the data loop; I'm assigning the image caption to a session variable at the same time that I assign the image path. Image path is working fine ; image caption never changes; even though in debug mode you can clearly see the value of the session variable changing. Any help would be greatly appreciated. I think its something basic like I'm not understanding the postback process or something to that effect.
Here is the html page:
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td align="center">ASP.NET2 Slide Show<hr />
</td>
</tr>
<tr>
<td align="center">
<img id="photo" src="" runat="server" border="0" />
<br />
</td>
</tr>
</table>
</div>
<script type="text/javascript">
//A timer will be fired in 5 seconds to call getNextImage()
var c_interval = 5000;
window.setTimeout("getNextImage()", c_interval);
function getNextImage()
{
//Send the request to server with the current image url as the argument
CallServer(document.getElementById("photo").src, "");
//Note that this alert never changes; although in debug mode I can see that the session variable changed.
alert('<%=Session["Address"] %>')
//This is the update that should be adjusting the caption
document.getElementById("myText").value = '<%=Session["Address"] %>';
//<%=Session["Address"] %>
}
function ReceiveServerData(rValue)
{
//Receive server's response of a string rValue, which is prepared in the server's function
//GetCallbackResult()
var wds = rValue.split(";");
//Assign the transition effect
document.getElementById("photo").style.filter = wds[1];
//Preload the image file from server. When finishing download, imageLoaded function will be called
//with the img object as the argument
var img = new Image();
img.onload = function(){ imageLoaded(this); }
img.onerror = function(){ imageError(this); }
img.onabort = function(){ imageError(this); }
img.src = wds[0];
//here document.getElementById("myText").value = '<%=Session["Address"] %>';
}
function imageError(img)
{
//If image download errors occur, this function will be called.
window.setTimeout("getNextImage()", 1000);
}
function imageLoaded(img)
{
var photo = document.getElementById("photo"); //Find the image control object
photo.filters[0].apply(); //Apply the transition effect
photo.filters[0].play(); //Play the effect and display the new image
photo.src = img.src; //Assign the image to the image control
window.setTimeout("getNextImage()", c_interval);//Initiate the next request
}
</script>
<input type='text' id='myText' value="" name="myText" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
//c# code
public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
string m_lastFileName = "none";
protected void Page_Load(object sender, EventArgs e)
{
if (Session["Counter"] == null)
{
Session["Counter"] = 1;
}
if (IsPostBack)
return;
photo.Src = GetNextImageUrl();
//Register Ajax client script to client's browsers. This has to be hard coded.
string cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");
string callbackScript = "function CallServer(arg, context)" + "{ " + cbReference + "} ;";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
}
public void RaiseCallbackEvent(string eventArgument)
{
//This is first place to receive the callback from client's browser. The parameter 'eventArgument'
//is the parameter passed from the Javascript's call 'CallServer()'. In this example, it is the
//last image url.
m_lastFileName = Path.GetFileName(eventArgument);
}
public string GetCallbackResult()
{
//This is the second call triggled by the 'CallServer()' and it is the place to prepare and return a string
//to the client. Here the returned string is the image url and the transition effect.
return GetNextImageUrl() + ";" + GetNextTransition() + ";" + GetNextAddress();
}
private string GetNextImageUrl()
{
SqlDataReader rdr = null;
SqlConnection con = null;
SqlConnection con2 = null;
SqlCommand cmd = null;
SqlCommand cmd2 = null;
SqlDataReader rdr2 = null;
//Open connection to the database
string ConnectionString = "server=";
con = new SqlConnection(ConnectionString);
con.Open();
con2 = new SqlConnection(ConnectionString);
con2.Open();
//Set up a command with the given query and associate
//this with the current connection.
//set total counter to determine how many properties we have to loop through
string CommandText2 = "SELECT * from dbo.Featured_Property where Sequence=" + (int)Session["Counter"];
cmd2 = new SqlCommand(CommandText2);
cmd2.Connection = con2;
// Execute the query
rdr2 = cmd2.ExecuteReader();
rdr2.Read();
Session["image"] = rdr2["ImagePath"];
Session["Price"] = rdr2["Price"];
Session["Address"] = rdr2["Address"];
// Response.Write(rdr2["Address"]);
Session["Counter"] = (int)Session["Counter"] + 1;
if ( Session["Counter"] is int && (int)Session["Counter"] == 3 )
Session["Counter"] = 1;
// code to try to write the session variable info back to the text box caption - not working
TextBox1.Text = (string)Session["Address"];
return (String)Session["image"];
}
private string GetNextAddress()
{
TextBox1.Text = (string)Session["Address"];
return (String)Session["Address"];
}
private string GetNextTransition()
{
//Randomly pick a transition effect. Note some of the effects only work in IE.
int n = (int)((new Random().NextDouble()) * 5);
switch (n)
{
case 0:
case 1:
n = (int)((new Random().NextDouble()) * 22);
return "revealTrans(duration=2,transition=" + n.ToString() + ")";
case 2:
case 3:
if (Request.Browser.Browser == "IE")
{
n = (int)((new Random().NextDouble()) * 8);
switch (n)
{
case 0:
return "progid:DXImageTransform.Microsoft.RandomDissolve()";
case 1:
return "progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=20, Duration=2, Enabled=false)";
case 2:
return "progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle='clock')";
case 3:
return "progid:DXImageTransform.Microsoft.Wheel(spokes=4)";
case 4:
return "progid:DXImageTransform.Microsoft.Stretch(stretchStyle='spin')";
default:
return "progid:DXImageTransform.Microsoft.Stretch(stretchStyle='push')";
}
}
else
return "blendTrans(duration=2)";
default:
return "blendTrans(duration=2)";
}
}
}ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi,
Yes, that's the idea!
/Carl.
Yes, that's the idea!
/Carl.
ASKER
One question; if I wanted to capture even more fields;
Would I change this to img.onload = function(){ imageLoaded(this, wds[2], wds[3]) }
function imageLoaded(img, txtAddr, anotherfield)
and simply add another line here:
document.getElementById("a