Web API call to controller not working, breakpoints not hit, prior versions of code no longer work (UPDATED WITH ANSWER)

Question

A view in my intranet ASP.NET MVC website uses Web API to render image thumbnails when a user hovers over documents (normally, a graphic appears that looks like the first page of the document). I'm stuck because this code was working before; I'm not sure if outside code modification by a third party (or bad code on my part) broke it, but now I don't see image thumbnails.

I'm having difficulty determining what happened. Here's what I've done so far:

1. Modified code directly

This is one of the first things I normally do: presume the mistake is due to some kind of error (or something I forgot to do). The problem area I focused on was this JavaScript/jQuery snippet, just inside my <script> area of code on the view:

    $(".tile2").each(function () {
        $(this).tooltip({ content: "<img src='/jportal/api/portalDocument/thumbnail?u=" + this.id + "' />" });
});

The .tile2 class reference is for each individual document that is rendered on the page. $(this).tooltip *has the code for the thumbnail functionality. *this.id is a reference to the unique id for each file (which looks like a long 32 or 64-character "hash", used to render the document graphic in the thumbnail).

I tried modifying the HTML <img> tag inside the tooltip section (because I thought someone modified it to render incorrectly), but it still fails (the thumbnail shows up with no image inside it). When I commented that whole line of code out, no preview frame appears at all, so that's how I reasoned the problem must be close.

2. Looked at multiple files to try and find inconsistencies (aka "viewing the problem from above")

I tried looking at supporting model and controller code to see if the problem was going out to either one of them:

Controller

The Web API controller looks to convert and return information which can be rendered:

public HttpResponseMessage GetThumbNailImage(string u)
    {
        string url = new Hex(u);
        HttpResponseMessage response = new HttpResponseMessage();
        using (var webclient = new System.Net.WebClient() { Credentials = SharePointCredential.Credential })
        {
            var data = webclient.DownloadData(url);
            using (var ms = new System.IO.MemoryStream(data))
            {
                using (Bitmap img = new Bitmap(ms))
                {
                    using (Bitmap b = new Bitmap(img, new Size(img.Width / 3, img.Height / 3)))
                    {
                        using (Graphics gr = Graphics.FromImage(b))
                        {
                            using (var ia = new ImageAttributes())
                            {
                                ia.SetColorMatrix(new ColorMatrix(DocumentViewer.gray_matrix));
                                ia.SetThreshold(0.8f, ColorAdjustType.Default);
                                gr.DrawImage(b, new Rectangle(0, 0, b.Width, b.Height), 0, 0, b.Width, b.Height, GraphicsUnit.Pixel, ia);
                                using (System.IO.MemoryStream mms = new System.IO.MemoryStream())
                                {
                                    b.Save(mms, System.Drawing.Imaging.ImageFormat.Png);
                                    response.Content = new ByteArrayContent(mms.ToArray());
                                    response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("image/png");
                                    return response;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

I proceeded to throw breakpoints on this API controller call to see if I could get them to hit, but nothing happened. It's as if the action is never used, even though there is an actual graphic rendered for each document (it's a generic X graphic, like "no image found").

Model

I tried throwing breakpoints on a couple of model files which I thought were called by the API controller, but none of those breakpoints got hit either. (I could add the code here, but since neither model was traversed by the call, it might not be worth it.)

3. Restored prior working versions of code to test (and watched them fail too)

Here's where it gets real weird. I restored one or two copies of code from the past (just to see if the old code worked, and I indeed botched something). The prior copies also failed to show a thumbnail.

---

UPDATE: Simple fixes save the day! (subtitle: watch it when debugging)

Thank you for those people that responded earlier. As discussed in early responses below, the fix came through a combination of using browser developer tools and paying close attention to my URLs. Here's what I did:

1. I had to modify the javascript code which rendered each "tooltip"

The <img> tag had its src value set to /jportal/api/portalDocument/thumbnail?u=. This was indeed a bad URL; that is, a full tag would read something like

<img src='/jportal/api/portalDocument/thumbnail?u=3409802204320321309280342...'/>

When the URL needed to be closer to

<img src='http://...actual site URL prefix (e.g. mywebsite.com).../jportal/api/portalDocument/thumbnail?u=340980...'/>

I stumbled across this during debugging yesterday, but didn't put 2 and 2 together until this morning. I had tried to insert the correct URL prefix into the <img> tag directly, but it still failed:

$(this).tooltip({ content: "<img src='" + '@Model.documentContext' + this.id + ...' /> }); produces an img tag resembling

<img src='http://website.com'/jportal/api/portalDocument...u=340980...'/>

which fails. (You see the extra single quote, right? That seems to botch it up.)

When I separated the URL prefix into its own variable, it worked:

var imageURLPrefix = '@Model.documentContext'; //that whole http://website.com/jportal/api/portalDocument/thumbnail?u= deal
    $(this).tooltip({ content: "<img src='" + imageURLPrefix + this.id + "' />" }); //a little cleaner, AND it works :)

Phew! I learned something new about website debugging API actions: I had to look past my typical solution path - I was being thrown off the scent because the breakpoints I put on my API actions and model files weren't being hit; after I looked at the code that was broken (by viewing the page source) I had what I needed. (I just hadn't applied it properly until today.)

Answer 1

I would go this path to pin point the location of the problem:

1. Fire up fiddler or the browser developer tools (F12) and check the network activity - does your page actually call this Web API action? (i.e GETs the image from the expected URL)
2. Assuming it does, does the URL contains the correct parameter?
3. If all of the above is OK - assume your server is the problem. Otherwise, its the client application for sure (The browser / application javascript code etc.) and maybe also the server.

To test the server - just navigate to a URL of the image that you know should work using the standard browser URL bar - if the image loads the server is doing it's part just fine.

To test the client application - start replacing code parts like the tag with a static URL of a thumbnail that you know works. (could be just an image you load from a static resource on the server and not a Web API call)

When you are sure it's the browser side, you can:

• Debug the code using the developer tools to see what goes wrong
• Check the source control for any changes since the last version which worked
• Test other browsers (!) maybe your browser vendor changed something on you. For example you did something a little off-standard and it became strict about following that standard.

Last, provide more info after these tests so we could help more.