Saturday, March 24, 2012

Paging With AJAX Using a Datalist.

I've spent a good 6 hours trying to figure this out and came up with nothing... nothing worked nor was it going to. So now I'm posting because I need HELP! I have a datalist that spits out images from a database. Simple enough... now I need only 5 of those images to display at any given time with a next and previous button to flip through all the pics as if they were thumbnails without the page reloading... so thats where ajax comes into play. My problem is that I'm still fairly new to ajax and I've already jumped into asp.net ajax. Does anybody know how I can accomplish this?

The easiest way is using UpdatePanel.

http://www.asp.net/ajax/documentation/live/overview/UpdatePanelOverview.aspx


I've looked into the updatepanel but I've never used one before. Looks interesting but i'm still confused as to how to use what i have in it to only show 5 images at a time with next and previous buttons. Can someone point me in the right direction?

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder" Runat="Server">
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:ObjectDataSource ID="ImageObjectDataSource" runat="server" TypeName="IllumiCell.NorthOfTorontoUG.BLL.Image" OldValuesParameterFormatString="original_{0}" SelectMethod="GetImageDataByAlbumId">
<SelectParameters>
<asp:QueryStringParameter DefaultValue="0" Name="albumId" QueryStringField="albumId" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
<script type="text/javascript" language="javascript">
var xmlHttpRequestObject = false;

try
{
// Firefox, Opera 8.0+, Safari
xmlHttpRequestObject = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttpRequestObject = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
window.location="Default.aspx";
}
}
}

function changeImage(img)
{
if (xmlHttpRequestObject)
{
var obj = document.getElementById("ViewImage");

xmlHttpRequestObject.open("GET", img);

xmlHttpRequestObject.onreadystatechange = function()
{
if(xmlHttpRequestObject.readyState == 4 && xmlHttpRequestObject.status == 200)
{
// The state is complete and the status is successful.
}
}

/*int originalHeight = obj.width;
int originalWidth = obj.height;
int panelWidth = 576;
int panelHeight;

if (originalHeight >= originalWidth)
{
panelHeight = panelWidth * (originalWidth / originalHeight);
panelWidth = originalWidth / (originalHeight / panelHeight);
}
else
{
panelWidth = panelWidth * (originalHeight / originalWidth);
panelHeight = originalHeight / (originalWidth / panelWidth);
}

obj.style.width = panelWidth + "px";
obj.style.height = panelHeight + "px";*/

obj.src = "album/" + img;
}
else
{
alert("Your browser does not support AJAX!");
window.location="Default.aspx";
}
}

function changeDescription(desc)
{
if (xmlHttpRequestObject)
{
var descObj = document.getElementById("objDesc");

xmlHttpRequestObject.open("GET", desc);

xmlHttpRequestObject.onreadystatechange = function()
{
if(xmlHttpRequestObject.readyState == 4 && xmlHttpRequestObject.status == 200)
{
// The state is complete and the status is successful.
}
}

descObj.innerHTML = desc;
}
else
{
alert("Your browser does not support AJAX!");
window.location="Default.aspx";
}
}
</script>
<div style="background-image:url('img/Header.png'); background-repeat:no-repeat; height:50px;
font-family:Verdana; text-align:center; font-size:medium; font-weight:bold; ">
<br />Photos
</div>
<center>
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>

</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="ImageViewPanel" runat="server" Height="432px" Width="576px" BorderColor="white" BorderWidth="5px">
<asp:FormView ID="ImageFormView" runat="server" DataSourceID="ImageObjectDataSource" DataKeyNames="ImageId">
<ItemTemplate>
<img src='album/<%# Eval("AlbumId") %>/<%# Eval("ImageName") %>' id="ViewImage" alt="" />
<div id="objDesc"><%# Eval("ImageDescription") %></div>
</ItemTemplate>
</asp:FormView>
</asp:Panel>
<p /><asp:DataList ID="ImageDataList" RepeatDirection="Horizontal" RepeatColumns="5" runat="server" DataKeyField="ImageId" DataSourceID="ImageObjectDataSource">
<ItemTemplate>
<div style="padding:10px;">
<img src='album/<%# Eval("AlbumId") %>/thumb_<%# Eval("ImageName") %>' onclick="changeImage('<%# Eval("AlbumId") %>/<%# Eval("ImageName") %>'); changeDescription('<%# Eval("ImageDescription") %>')"
alt='<%# Eval("ImageDescription") %>' style="background-color:White;" />
</div>
</ItemTemplate>
</asp:DataList>
</center>
<div style="background-image:url('img/Footer.png'); background-repeat:no-repeat; height:44px;
font-family:Verdana; font-size:medium; font-weight:bold;">
</div>
</asp:Content>


Certainly you can use UpdatePanel for Ajaxifying your Page but the DataList control does not have any builtin paging feature like the GridView or DataGrid. For this you have write your own paging solution or use custom pager developed by others. Checkout the following links:

http://www.codeproject.com/useritems/SmartPager.asp
http://www.codeproject.com/aspnet/CollectionPager.asp
http://www.codeproject.com/aspnet/ASPNETPagerControl.asp

Another solution might if you are only showing pictures you can try the SlideShow of Ajax Control Toolkit.
http://www.asp.net/AJAX/Control-Toolkit/Live/SlideShow/SlideShow.aspx


I still can't figure this out... I've been all over google as well. I can't use the updatepanel... doesn't really seem to work with the datalist (i need the datalist so that i can show 5 columns). And I also need it to be ajax enabled. Does anybody know how they can take a datalist control with 5 columns... cut off the proceeding rows and make it act like a pager without a postback? My heads about to burst!


Hmm... I think I'll give silverlight a try.

No comments:

Post a Comment