Web API call for controller does not work, breakpoints are not hit, previous versions of code no longer work (UPDATED FROM ANSWER)

On my intranet, the ASP.NET MVC website uses a web API to render thumbnail images when the user hovers over documents (usually an image appears that looks like the first page of the document). I got stuck because this code worked before; I'm not sure if external modification of the code by a third party (or wrong code on my part) broke it, but now I can't see the thumbnail images.

It's hard for me to determine what happened. Here's what I've done so far:

• Modified code directly

This is one of the first things I usually do: suppose the error is caused by some bug (or something I forgot to do). The problem area I focused on was this JavaScript / jQuery snippet, just inside the <script>

code area in the view:

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

      

        
        
        
      

    

The class reference .tile2

is for each individual document that appears on the page. $(this).tooltip

* has code for thumbnail function. * this.id

is a link to a unique identifier for each file (which looks like a long 32- or 64-character "hash" used to render a thumbnail image document).

I tried changing the HTML tag <img>

inside the tooltip section (because I thought someone changed it to display incorrectly), but it still doesn't work (the thumbnail is displayed without the image inside it). When I commented out this whole line of code, the preview frame does not appear at all, so as I reasoned about the problem you should be close.

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

I tried to look at the supporting model and controller code to see if the problem is one of them:

controller

The Web API controller is looking to convert and return information that can be displayed:

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 started throwing breakpoints on this API controller call to see if I could get them to hit, but nothing happened. It is as if the action has never been used, although there is an actual graphic rendering for each document (this is a generic X graphic, such as "image not found").

Model

I tried throwing breakpoints on a couple of model files that I thought were called by the API controller, but none of those breakpoints hit. (I could add some code here, but since no model went through the call, it might not be worth it.)

3. Recovered previous working versions of code for testing (and observed crashes too)

Here's where it gets real weird. I have restored one or two copies of the code from the past (just to make sure the old code worked and I really messed something up). Previous copies also did not display the thumbnail.

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

Thanks for the people who answered earlier. As discussed in the early answers below, the fix came from using browser developer tools and paying close attention to my URLs. Here's what I did:

• I had to change the javascript code that displayed each "hint"

The tag <img>

had a value src

set to /jportal/api/portalDocument/thumbnail?u=

. This is a really bad URL; those. the full tag will read something like

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

When the url should be closer to

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

I came across this while debugging yesterday but didn't put 2 and 2 together until this morning. I tried to insert the correct url into the tag <img>

directly, but it still failed:

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

creates an img label resembling

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

which fails. (You see an extra single quote, don't you?) This seems to make her fearful.)

When I stripped the url prefix into my 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 API actions for debugging a website: I had to overlook my typical solution path - I was kicked out of the smell because the breakpoints imposed on my API actions and model files were not affected; after looking at the code that was broken (by looking at the source of the page) I had what I needed. (I just haven't applied it until today.)