2

画像をアップロードしてトリミングできるようにするユーザー コントロールを作成しましたが、これらのコントロールを 1 つのフォームに複数配置すると、最後に追加したものだけが正しく機能します。問題は関数 storeCoords であり、X、Y、W、および H の非表示フィールドに影響を与えないため、トリミングの「ラバー バンド」が移動しても、これらの値は変化しません。最後のコントロールを追加すると、「ラバー バンド」が移動すると、非表示のフィールドが更新され、すべてが期待どおりに機能します。これらのコントロールを 1 つのページに複数配置すると、最後のコントロールの 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>
4

1 に答える 1

2

このコントロールにはいくつか問題があります。

1.1。

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

これらの行の後にセミコロン「;」を付けることはできません。カンマではありませんか？しかし、おそらくタイプミスです。

2.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を参照してください

于 2012-07-04T15:33:55.057 に答える