Client callback, Ajax or ?

[Bjorn Sagbakken]

I am porting my digital photo archive from a windows app to web using ASP.NET 2.0

- The search options is contained within one UpdatePanel
- The result, a filmstrip of thumnails(ImageButton) in a repeater is contained within a scrollable Panel within another UpdatePanel
- The view of a large image (on clicking on the thumnail) is contained within yet another UpdatePanel

All this works kind of nice, except a couple of minor issues that made me re-think a bit.
a) Clicking on a thumnail a bit down the list makes the list regenerate, showing the images at the top
b) When the search result is like 100 images or more there is a noticable delay at each click on the list.

Sure, this is because the whole list is included in the partial postback. I have tried to encapsulate each image in a separate UpdatePanel, but for some reason the compiler doesn't like this. Here is the portion where I try to insert a separate UpdatePanel for each image. The <td> is the cell in the ItemTemplate of a repeater.


<td align="center" style="background-color:Transparent">
<asp:UpdatePanel runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:ImageButton runat="server" OnClientClick="Image_Click(this);" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID") %>' BorderStyle="None" BorderWidth="0" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "Image") %>'/>
</ContentTemplate>
</asp:UpdatePanel>
</td>

The error message is:
Error 21 'System.Web.UI.Control' does not contain a definition for 'DataItem'

Question 1: Any idea why this happens?

Next, I thought of a bit different approach. I replaced the ImageButton with a Image (asp or html). The filmstrip of thumnails still show very well. But now I have the challenge of showing the large image on client click. Detecting which image is clicked via java-script is easy, but I also need to return to the server, retrieve tha large image from the SQL server and refresh the UpdatePanel containing the large image. As I understand this should be fairly easy using the Client Callback feature in ASP.NET 2.0 I have read some articles I have found on the net, copied the code and tried various settings. Nevertheless, I always get a client script error: "Object expected"
I am not sure which object...

Here is the client sript I am testing:

function Image_Click(ID)
{
UseCallBack();
}
function JSCallback(ReturnValue, context)
{
document.getElementById("Textbox1").value=ReturnValue;
}

And here is the server code:

public partial class _Default :
System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
#region ICallbackEventHandler Members

string callbackresult;
protected void Page_Load(object sender, EventArgs e)
{
// get reference of call back method named JSCallback
string cbref = Page.ClientScript.GetCallbackEventReference(this, "arg", "JSCallback", "context");

// Generate JS method trigger callback
string cbScr = string.Format("function UseCallBack(arg, context) {{ {0}; }} ", cbref);

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "UseCallBack", cbScr, true);
}
public string GetCallbackResult()
{
return callbackresult;
}
public void RaiseCallbackEvent(string strID)
{
int ID = Convert.ToInt32(strID);
callbackresult = "Ok: "+ID.ToString();
}

#endregion
}

Question 2: Any idea why this doesn't work?

Question 3: Is the Client Callback the best approach for this task? Any good examples to study?


Thanks.

Bjorn

 

[James Crosswell]

I am porting my digital photo archive from a windows app to web using
ASP.NET 2.0

- The search options is contained within one UpdatePanel
- The result, a filmstrip of thumnails(ImageButton) in a repeater is
contained within a scrollable Panel within another UpdatePanel
- The view of a large image (on clicking on the thumnail) is contained
within yet another UpdatePanel

All this works kind of nice, except a couple of minor issues that made
me re-think a bit.
a) Clicking on a thumnail a bit down the list makes the list regenerate,
showing the images at the top
b) When the search result is like 100 images or more there is a
noticable delay at each click on the list.

Sure, this is because the whole list is included in the partial
postback. I have tried to encapsulate each image in a separate

If you've got your thumbnails in one update panel and your large image
in another, clicking on a thumbnail shouldn't refresh the thumbnail's
update panel... you need to change the update mode on that update panel
to conditional (and it's conditional on a postback from the search
button, so chuck the ID of the search button in the trigger that you
setup for this).

Another thing you might consider is paging the results of a seach
(showing them 10 or 20 at a time) which should help with the delay problem.

Best Regards,

James Crosswell
Microforge.net LLC
http://www.microforge.net

 

[Bjorn Sagbakken]

If you've got your thumbnails in one update panel and your large image in
another, clicking on a thumbnail shouldn't refresh the thumbnail's update
panel... you need to change the update mode on that update panel to
conditional (and it's conditional on a postback from the search button, so
chuck the ID of the search button in the trigger that you setup for this).

The thumbnail update panel is set to conditional, but the case is that on
clicking on an imagebutton inside the updatepanel, the updatepanel is posted
back - witch it actually has to do if I want some servercode to be executed.
So, in my mind this solution works as it technically is supposed to, only
not as I want it to.

I have found a workaround that at least mimics my desire: The images are
presented as html images instead of asp:imagebuttons, then I attach an
"onclick" triggered client script: So what does this client script do?
It writes the image ID into a hidden field, and then emulate a click event
on a descrete button. Both the hidden field and the discrete button resides
in a separate update panel, so the script actually post back this small
update panel, which in server code retrieves the larger image and updates
the update panel with the large image.

This works very well, and I have even added an Ajax animation control that
fades in the image on load so it looks kind of nice. I should only try to
hide the discrete button...

Still I am not sure this is the optimal way, but for now it will do. There
is no unneccessary screen updates, and soon the web-solution doesn't stand
much back for the windows one.

Another thing you might consider is paging the results of a seach (showing
them 10 or 20 at a time) which should help with the delay problem.

The problem is not any problem anymore when the image list isn't updated on
each image_click. But of course, if the result should be like 1000
images...? So paging is absolutely something I should add.

Bjorn

 

[James Crosswell]

The thumbnail update panel is set to conditional, but the case is that on
clicking on an imagebutton inside the updatepanel, the updatepanel is posted
back - witch it actually has to do if I want some servercode to be executed.
So, in my mind this solution works as it technically is supposed to, only
not as I want it to.

Ah, I see. Sorry, my bad - I didn't read your original post very well.

An alternative to a postback would be to use a callback (javascript that
makes an asynchronous call to the server). I'm not sure what this is
called in the MS AJAX toolkit - I know DevExpress have a callback
component though for exactly the situation that you're describing.

Best Regards,

James Crosswell
Microforge.net LLC
http://www.microforge.net

 

[Bjorn Sagbakken]

Ah, I see. Sorry, my bad - I didn't read your original post very well.

An alternative to a postback would be to use a callback (javascript that
makes an asynchronous call to the server). I'm not sure what this is
called in the MS AJAX toolkit - I know DevExpress have a callback
component though for exactly the situation that you're describing.

Yes, that was one of my trial ... and errors. I think I was very close to
success, so I will have another go for that later.
ASP.NET 2.0 have a Client Callback method called "ICallbackEventHandler"
that will do this.

Bjorn