Using AJax Update Panel With Project Playlist

jazzcatone · July 22nd, 2007, 11:48 AM

Hi and thanks for taking a second. I am building my new website with ASP.NET 2.0. I have a default .aspx that does not utilize a masterpage but it behaves like one. This is so I can dynamically load .ascx controls for content and I can have a Project Playlist (like the music player's on MySpace) at the bottom. I have set it up this way because I want to make sure the music player does not reload everytime the user clicks a link. This will make certain the user does not hear the beginning of a song repeatedly.I would like to use an AJax Update Panel to accomplish this so as not to have the music player post back.The music player should only load once, this being when the user first comes to the site.

It does not appear to work however. (I am new to AJAX, see the code below.Music player with the Update Panel is near the bottom ) I also tried putting the music player and the Update Panel into their own .ascx control but this doesn't work either. Will this work? Is there something I am doing wrong? Or ,is there a better way to do this? Any help would be greatly appreciated.

Thanks,

Jason

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@ Register Assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="Microsoft.Web.UI" TagPrefix="asp" %><%@ Register TagPrefix="Acme" Tagname="links" Src="links.ascx" %><%@ Register TagPrefix="GiantEagle" Tagname="Home" Src="Home.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

<title>Welcome to Jason Livengood.com</title>

</head>

<body background="images/bg.gif">

<form id="form1" runat="server">

 

<table bgcolor="white" width="700px" align=center>

<tr>

<td>

<img src="images/HeaderBanner2.jpg" />

<br />

<Acme:Links id="links" Runat="Server"/>

</td>

</tr>

</table>

<table bgcolor="white" width="700px" align=center>

<tr>

<td>

<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

</td>

</tr>

</table>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel2" runat="server">

<contenttemplate>

<embed style="width:435px; visibility:visible; height:320px;" allowScriptAccess="always" src="http://www.playlistproject.net/mc/mp3player-othersite.swf?config=http://www.playlistproject.net/mc/config/config_black.xml&mywidth=435&myheight=320&playlist _url=http://www.playlistproject.net/loadplaylist.php?playlist=7271862" menu="false" quality="high" width="435" height="320" name="mp3player" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0"/>

</contenttemplate>

</asp:UpdatePanel>
</form>

</body>

</html>

Imar · July 22nd, 2007, 12:35 PM

It looks like you have your logic turned around.

An UpdatePanel is used to update a specific part of a page without affecting the rest of the page.

In your case, you try to update the entire page, but leave once piece in tact. In your current design, this won't work.

Is it an option to wrap the rest of the page except the player in an UpdatePanel so only that part is updated? This will not always work, and depends on your page design. If you have regular links you're out of luck as those will always cause a new page to load.

Alternatively, you can look at frames. They are considered to be a bit old skool there days, but they may help you accomplish your functionality.

Hope this helps,

Imar

---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.