asp.net 母版页的 JCrop 问题

Posted 2023-02-25

【中文标题】asp.net 母版页的 JCrop 问题

【英文标题】：JCrop Problem with asp.net masterpage

【发布时间】：2011-08-30 16:00:06

【问题描述】：

我有一个 MasterPage、defaultPage 和 Cropper 页面，当我只有 default.aspx 页面而没有母版页和裁剪器页面时，我可以使用 JCrop。

问题：当我拥有母版页时，我无法使用 Jcrop，因为它没有显示 Image Cropper 矩形。

任何帮助将不胜感激！

这是我的代码：

母版页的头部：

 <link href="css/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.2.js" type="text/javascript"></script>
<script src="js/jquery.Jcrop.min.js" type="text/javascript"></script>
<script src="js/jquery.Jcrop.js" type="text/javascript"></script>
<script src="js/jquery.color.js" type="text/javascript"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>

母版页的正文部分：

<form id="form1" runat="server">
<div>
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

    </asp:ContentPlaceHolder>
</div>
</form>

这是我的 Cropper.aspx 代码：

<asp:Panel ID="pnlUpload" runat="server">
  <asp:FileUpload ID="Upload" runat="server" />
  <br />
  <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" />
  <asp:Label ID="lblError" runat="server" Visible="false" />
</asp:Panel>
<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>
<asp:Panel ID="pnlCropped" runat="server" Visible="false">
  <asp:Image ID="imgCropped" runat="server" />
</asp:Panel>

【问题讨论】：

你有 JavaScript 错误吗？

我无法上传图片，也无法裁剪，因为裁剪器没有显示出来。

上传图片后初始化jCrop的时候？例如，jQuery('#image_to_crop').jCrop();

是的，我在正文中也这样做了，但没有用。

你能在IIS工作后粘贴生成的代码吗？

【参考方案1】：

你包含两次 jCrop

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

只需要一个！

【讨论】：

不，实际上没有工作，有两个带有 zip 文件的 .js 文件。我认为需要并包含 bot。

两个文件是一样的，希望 .min.js 是缩小的。 （没有空格、回车等）

好的，但我正在努力解决这个问题。我不明白为什么会这样母版页。

我不是APS.NET，而是MasterPage.Default，是不是只用了.aspx页面的模板？

是的，但是当我们包含任何页面时，默认情况下我们选择它包含在母版页中。我目前没有收到任何错误。

【参考方案2】：

终于找到了解决办法，很简单，在服务器控制的代码中添加。

这是我修改的代码：

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