1

Basically, I am trying to develop a ASPX page where the user will be able to upload an image, then display it in a modal pop window and crop it if required.

If I display the image outside of pop window it works completely fine, but if I try to display inside of the pop window the image is not displayed. However, I have noticed if I keep the image there and remove <asp:Image ID="imgCrop" from the javascript below, the image is displayed and off course it will not allow me to crop it.

Here is the javacripts I use to display the modal popwindow and set the crop settings: 

            <head runat="server">
                <title>Crop Image</title>
                <link href="Styles/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
                <script type="text/javascript" src="Scripts/jquery.Jcrop.js"></script>


                <script type="text/javascript" src="scripts/jquery.helper.js" ></script>
                <link href="styles/style.css" rel="stylesheet" type="text/css" />

                <script type="text/javascript">
                    jQuery(document).ready(function () {
                        jQuery('#imgCrop').Jcrop({
                            onSelect: storeCoords
                        });
                    });

                    function storeCoords(c) {
                        jQuery('#X').val(c.x);
                        jQuery('#Y').val(c.y);
                        jQuery('#W').val(c.w);
                        jQuery('#H').val(c.h);
                    };
                </script>
            </head>

here is the definition of modal pop window and where I want to see the image to be cropped in <asp:Image ID="imgCrop"

            <input class="button_popup" id="btnShowModalDiv" onclick="$('#divSimplePopup').showModal(); return false;" type="submit" value="Show Modal Div"/>

                <div id="divSimplePopup" class="popup" style="display: none; width: 350px;">
                    <div class="container">
                        <div class="header">
                            <span id="lblPopupHeader" class="msg">Simple Popup Header</span>
                            <a id="btnClosePopup" class="close" onclick="$('#divSimplePopup').hideModal(); return false;" ></a>
                        </div>
                        <div>
                            <div class="body" style="height: 100px; overflow: auto;">

                            <asp:Panel ID="pnlCrop" runat="server" Visible="false">
                                <asp:Image ID="imgCrop" 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:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />
                           </asp:Panel>    
                            </div>
                            <div class="footer">
                                <input class="button_popup" id="btnOK" style="width: 40px;" type="submit" value="OK"/>
                                <input class="button_popup" id="btnCancel" onclick="$('#divSimplePopup').hideModal(); return false;" type="submit" value="Cancel"/>
                            </div>
                        </div>
                    </div>
                </div>

source code and references: http://geekswithblogs.net/vladimirl/archive/2009/12/20/jquery-simple-modal-plugin.aspx http://supershope.com/tuvianblog/cropimage.zip

Does anyone has any hint?

4

1 回答 1

0 
<asp:Image ID="imgCrop" runat="server" />

您的图像具有 runat="server" 因此在渲染时可能具有不同的 ID。

所以你需要在你的页面中有以下内容。

jQuery(document).ready(function () 
 {
   jQuery('#<%= imgCrop.ClientID %>').Jcrop({
     onSelect: storeCoords
   });
 });

除此之外，您还可以在面板上看到“false”，如下面的代码所示：

  <asp:Panel ID="pnlCrop" runat="server" Visible="false">

所以整个面板不会被渲染，你的 jquery 代码也不会工作。而是使用 style="display:none"，面板将被渲染，因此图像将被渲染，您的插件将正常工作。

于 2013-07-25T13:53:56.907 回答