Question

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

<script src="/Controls/ImageUploadAndCrop/Javascript/jquery.Jcrop.min.js" type="text/javascript"> </script>
<link href="/Controls/ImageUploadAndCrop/CSS/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    $(window).on('load', function ()
    {

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

        elem.Jcrop({
            onSelect: storeCoords,
            boxWidth: boxWidth,
            boxHeight: boxHeight
        });

        $('#<%=CropButton.ClientID%>').click
        (
            function ()
            {
                var cropImg = $('.jcrop-holder img');

                $('#<%= ImgWidth.ClientID %>').val(cropImg.width());
                $('#<%= ImgHeight.ClientID %>').val(cropImg.height());
            }
        );
    });

        function storeCoords(c)
        {
            $('#<%= X.ClientID %>').val(c.x);
            $('#<%= Y.ClientID %>').val(c.y);
            $('#<%= W.ClientID %>').val(c.w);
            $('#<%= H.ClientID %>').val(c.h);
        }
 </script>
<div>
    <asp:Panel ID="UploadPanel" runat="server">
        <asp:FileUpload ID="Upload" runat="server" />
        <br />
        <asp:Button ID="UploadButton" runat="server" OnClick="UploadButton_Click" Text="Upload" />
        <asp:Label ID="ErrorLabel" runat="server" Visible="false" />
    </asp:Panel>
    <asp:Panel ID="CropPanel" runat="server" Visible="false">
        <asp:Image ID="CropImage" runat="server"/>
        <br />
        <asp:HiddenField ID="X" runat="server" />
        <asp:HiddenField ID="Y" runat="server" />
        <asp:HiddenField ID="W" runat="server" />
        <asp:HiddenField ID="H" runat="server" />
        <asp:HiddenField ID="ImgWidth" runat="server"/>
        <asp:HiddenField ID="ImgHeight" runat="server"/>
        <asp:Button ID="CropButton" runat="server" Text="Crop" OnClick="CropButton_Click" />
    </asp:Panel>
    <asp:Panel ID="CroppedPanel" runat="server" Visible="false">
        <asp:Image ID="CroppedImage" runat="server" />
    </asp:Panel>
</div>

Answer 1

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

1

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

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

2

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

例如，每次将控件添加到页面时，都会显示以下<script>标记。

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

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

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

快速解决方法是：

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

和

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

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

然而，ASP .Net具有处理使用JavaScript的用户控件的机制。见ClientScriptManager

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

1 个答案: