将多个添加到一个表单时，Asp.Net用户控件无法正常工作

我创建了一个用户控件，允许上传图像然后裁剪，但是当我在一个表单上有几个这样的控件时，只有最后添加的图像才能正常工作。 问题是函数storeCoords，对X，Y，W和H隐藏字段没有影响，因此当移动裁剪“橡皮筋”时，这些值不会改变。 随着最终控件的添加，随着“橡皮筋”的移动，隐藏的字段会更新，然后一切都按预期工作。 为什么当我在一个页面上有几个这样的控件时，只有最后一个javascript按预期工作。

    $(window).on('load', function () { var elem = $('#'), boxWidth = elem.width(), boxHeight = elem.height(); elem.Jcrop({ onSelect: storeCoords, boxWidth: boxWidth, boxHeight: boxHeight }); $('#').click ( function () { var cropImg = $('.jcrop-holder img'); $('#').val(cropImg.width()); $('#').val(cropImg.height()); } ); }); function storeCoords(c) { $('#').val(cx); $('#').val(cy); $('#').val(cw); $('#').val(ch); }  
   
      
             

Answer 1

我发现这个控件几乎没有问题：

1。

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

这些行不应该跟一个分号“;” 而不是逗号？ 但也许是一个错字。

2。

因为您在页面的几个位置使用此控件，所以您需要处理任何JavaScript代码的“重复”外观：

例如，每次将控件添加到页面时，都会出现以下标记。

然而，这对function没有任何坏处（我认为？！），但是下面的函数肯定会这样做，因为JavaScript将具有相同参数的相同函数的更多副本。 考虑哪一个？

 function storeCoords(c) { $('#<%= X.ClientID %>').val(cx); $('#<%= Y.ClientID %>').val(cy); $('#<%= W.ClientID %>').val(cw); $('#<%= H.ClientID %>').val(ch); } 

快速解决方案是：

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

和

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

通过这种方式，您将拥有唯一的函数名称。

但是，ASP .Net具有处理使用JavaScript的用户控件的机制。 请参见ClientScriptManager