gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:00:14 25 4
gpt4 key购买 nike

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

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

这是我用来显示模式弹出窗口并设置裁剪设置的 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

有人有任何提示吗?

最佳答案

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

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

因此您的页面中需要有以下内容。

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

除此之外,您还可以在面板上看到visible="false",如下面的代码所示:

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

因此整个面板将不会被渲染,并且您的 jquery 代码将无法工作。相反,使用 style="display:none",面板将被渲染,因此图像将被渲染,并且您的插件将正常工作。

关于javascript - 使用 javascript 和 asp.net 在模态弹出窗口中不显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17859469/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com