Asp.Net User Control Does Not Work Correctly When Multiple Are Added To One Form

I have made a user control that allows an image to be uploaded and then cropped, but when I have several of these controls on one form, only the last one added will work correctly.

Solution 1:

I see few problems with this control:

1.

 var elem = $('#<%= CropImage.ClientID %>'),
            boxWidth = elem.width(),
            boxHeight = elem.height();

Shouldn't these lines to be followed by a semi-colon ";" and not a comma? But maybe is a typo.

2.

Because you are using this control in several places of the page, you need to take care of the "duplicate" appearances of any JavaScript code:

For example the following <script> tag will appear every time you the control is added to the page.

<script src="/Controls/ImageUploadAndCrop/Javascript/jquery.Jcrop.min.js" type="text/javascript"> </script>

This however won't do anything bad to functionality (I think?!), but the following function will do for sure, because the JavaScript will have more copies of the same function with the same arguments. Which one is considered?

function storeCoords(c)
        {
            $('#<%= X.ClientID %>').val(c.x);
            $('#<%= Y.ClientID %>').val(c.y);
            $('#<%= W.ClientID %>').val(c.w);
            $('#<%= H.ClientID %>').val(c.h);
        }

A quick fix would be:

 elem.Jcrop({
            onSelect: storeCoords<%= CropImage.ClientID %>,
            boxWidth: boxWidth,
            boxHeight: boxHeight
        });

And

function storeCoords<%= CropImage.ClientID %>(c) { ... }

In this way you'll have unique function names.

However ASP .Net has mechanisms to handle user controls which use JavaScript. See ClientScriptManager