使用 javascript 和 asp.net 在模态弹出窗口中不显示图像答案

【问题标题】：Image is not displayed in a Modal Pop Window using javascript and asp.net使用 javascript 和 asp.net 在模态弹出窗口中不显示图像
【发布时间】：2013-07-25 13:30:03
【问题描述】：

基本上，我正在尝试开发一个 ASPX 页面，用户可以在其中上传图像，然后将其显示在模式弹出窗口中，并在需要时对其进行裁剪。

如果我在弹出窗口之外显示图像，它完全可以正常工作，但如果我尝试在弹出窗口内部显示图像则不会显示。但是，我注意到如果我将图像保留在那里并从下面的 javascript 中删除 <asp:Image ID="imgCrop"，图像就会显示出来，当然它不允许我裁剪它。

这是我用来显示模态弹出窗口和设置裁剪设置的 javacripts：

            <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>

这里是模态弹出窗口的定义，我想在<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>

源代码和参考： http://geekswithblogs.net/vladimirl/archive/2009/12/20/jquery-simple-modal-plugin.aspx http://supershope.com/tuvianblog/cropimage.zip

有人有什么提示吗？

【问题讨论】：

您是否检查了页面源以确保在渲染期间没有更改 ID？

标签： javascript asp.net modalpopupextender

【解决方案1】：

<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"，面板将被渲染，因此图像将被渲染，您的插件将正常工作。

【讨论】：

感谢 Nilesh .....可见的="false" 在运行期间动态更改，并且 '#' 或 '#imgCrop' 没有解释为什么图片没有出现在弹出窗口中......即使进行了这些更改，仍然无法正常工作
在“#”中的“#”是什么意思？我在互联网上看到了其他一些没有它的例子，如果我从你的更改中删除它，图像就会出现，但裁剪仍然无法正常工作....
正如我之前所说，您在页面加载时应用插件，因此在运行时显示面板可能不起作用。最好使用 style="display:none;"。 # 与 jquery 选择器一起使用来查找具有 ID 的元素。