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.

Partial Page loading using webpart

Hey,

sorry for posting again about almost the same topic, but i think i described my question in a wrong way:

I want to have a partial loading of my page - the main content is displayed immediately, while i call some external REST web service, wait for the results and display them as soon as they are ready. Since I want to add this functionality in many places, I need to create a web part. Can you help me how to implement the following:

- a web part that is able to display the results of an asynchronously called rest web service while the rest of the page is already finished

- during the function call, a waiting animation should be displayed

The important thing is that the function call has to be triggered during the page load, not by a button or something on the client side.

I already implemented the thing above using updatepanel, updateprogress, and timer. That works great, but only outside a web part :-(

Can you help me?

Best regards,

Sebastian

Web Part inside Update Panle is not suppored for partial postback.

See the more details

http://forums.asp.net/t/1066700.aspx

Well,

the web part is not inside an update panel but itself contains one...

Can you post some code details..

So it will be more helpful to me & others to solve the problem.

partial rendering Post back error

Hi my application works fine in IE with partial rendering when posting back.

But When I use another Browser, some of pages are okay with partial rending, some of them I got the error message as below:

http://localhost

Failed to load viewstate. The control tree into which viewstate is being loaded must match the control tree that was used to save viewstate during previous request. For example, when adding controls dynamically, the controls added during a post-back must match the type and position of the controls added during the initial request.

To me these pages seems no difference when applying partial rendering. All of them use same pattern when using UpdatePanel.

Help please.

Hi,KentZhou

I am afraid we cannot find out the exact root cause without further information captured when the problem occurs.

Why don't you provide us with some source codes of the pages that get error?

To troubleshoot this issue, we really need the source code to reproduce the problem, so that we can investigate the issue in house. It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business logic from it.

According to the error message,I guess the problem lies on adding controls dynamically, maybe you can checkDynamicaly loading User Controls into UpdatePanel for solution and more infomation.

Let me know if you need more info.

Hope this helps.

Thank you.

Hi, Thanks for reply.

This message comes out when using Safari to run AJAX application. This application works fine when using IE or Firefox.
The page loads many ascx dynamically and using UpdatePanel with RenderMode="Inline" UpdateMode="Conditional"