[CLOSED] Image Viewer

Hi,

I was trying to use a Data View and a Store to make the thumbnail of this Image Viewer control but it didn't work out. Now, to generate the thumbnail I use image buttons and the image is generated by a streaming page. I dynamically add this image buttons. The problem I am having right now is on the click event.

I have attached the solution + the website (add it to the IIS) without the Coolite dlls (v.0.8.1).

Basically I Register the script on the client on the control's onPreRender event with this

Code:

---

const string resourceName = "ImageViewer.COBISImageViewerJS.js";
ScriptManager.RegisterClientScriptInclude(typeof(COBISImageViewer), resourceName);

---

The simple Script I add (its on the COBISImageViewerJS.js file )

Code:

---

function loadImage(imageUrl) {
    Coolite.AjaxMethods.ReloadImage(imageUrl);
}

---

Create the buttons dynamically with this on the OnLoad event

Code:

---

  foreach (var image in _imagesContainer)
            {
                Coolite.Ext.Web.ImageButton imgButton = new Coolite.Ext.Web.ImageButton();
                imgButton.ImageUrl = @"http://localhost/WebSiteTestImageViewer/COBISImageViewerPage.aspx?path=" +
                                    image.ImageUrl;
                imgButton.Listeners.Click.Handler = "loadImage('" + imgButton.ImageUrl + "');";
                _leftPanel.BodyControls.Add(imgButton);
                _leftPanel.BodyControls.Add(new LiteralControl("<p>"));
                _leftPanel.BodyControls.Add(new LiteralControl("<span style=\"text-align:center;\">Text</span>"));
                _leftPanel.BodyControls.Add(new LiteralControl("</p>"));

            }

---

And of course the AjaxMethod wich in theory, it will help me remove the current image and add the selected one.

Code:

---

[AjaxMethod]
        public void ReloadImage(string url)
        {
            _mainPanel.BodyControls.Remove(_mainImage);
            Coolite.Ext.Web.Image img = new Coolite.Ext.Web.Image();
            img.ImageUrl = url;
            _mainImage = img;
            _mainPanel.BodyControls.Add(img);
            _mainPanel.Reload();
        }

---

I think this one is giving me the problems

Quote:

---

imgButton.Listeners.Click.Handler = "loadImage('" + imgButton.ImageUrl + "');";

---

Am I using something wrong? I am getting this error.

Microsoft JScript runtime error: Object expected

Hi,

1. You have to mark COBISImageViewerJS.js as Embedded Resources (in the Properties of the file), in your case WebResource http handler cannot find that resource and return empty response therefore loadImage method is not defined
2. AjaxMethods cannot be placed inside class (it is supported since 1.0 version), such methods can be placed inside page or user control only

You are totally right.

Which approach I should try then? I have used WebMethods, PageMethods and even jQuery. Don't tell me I will have to do this all in JS. Like for instance open a print screen dialog or even change the picture on the panel with JS. If so, could you give me an example on how I could remove the current picture from a panel and then reload the panel with a new one.

Ty

Hi,

Quote:

---

Which approach I should try then? I have used WebMethods, PageMethods and even jQuery. Don't tell me I will have to do this all in JS. Like for instance open a print screen dialog or even change the picture on the panel with JS. If so, could you give me an example on how I could remove the current picture from a panel and then reload the panel with a new one.

---

0.8.1 has few limitations
1. AjaxMethods cannot be placed inside controls (supported since Ext.Net 1.0 only)
2. You cannot create controls during AjaxEvent (AjaxMethod is ajax event also), new control will not be rendered (supported since Ext.Net 1.0 only).

What I can suggest for 0.8.1
1. You can use user controls instead custom controls in this case you can define AjaxMethods inside user control
2. You cannot create controls during AjaxEvent therefore new controls can be added
- via javascript
- use UpdatePanel

In your scenario you don't need to remove current picture, just set new ImageUrl and image source will be reloaded

P.S. if you can update your toolkit to the Ext.Net then it is better solution