如何在带有母版页的 ASP.NET 中使用 JCrop

Posted 2023-02-25

技术标签:

【中文标题】如何在带有母版页的 ASP.NET 中使用 JCrop【英文标题】：How to use JCrop in ASP.NET with Master Page 【发布时间】：2011-03-29 15:16:49 【问题描述】：

我正在使用 asp.net 4、c#、jQuery 1.5.1 和 Jcrop-0.9.8。

对于 jQuery，我使用 MS CDN 和 ScriptManager 加载包。

jQuery 加载成功，但 Jcrop 有问题。

调用 Jcrop 时，我在 IE 8 中收到错误。

Line: 461
Error: Object doesn't support this property or method

似乎我无法将 jCrop 与 MasterPage 一起使用。我尝试在没有关联 MasterPage 的页面中使用相同的脚本并且它正在工作。

您有任何解决方法的想法吗？感谢您的宝贵时间。

GlobalAsax

protected void Application_Start(object sender, EventArgs e)
        
            // Map jQuery to MS CDN Path
            ScriptResourceDefinition myScriptResDef = new ScriptResourceDefinition();
            myScriptResDef.Path = "~/Assets/Scripts/jQuery/jquery-1.5.1.min.js";
            myScriptResDef.DebugPath = "~/Assets/Scripts/jQuery/jquery-1.5.1.js";
            myScriptResDef.CdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js";
            myScriptResDef.CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js";
            ScriptManager.ScriptResourceMapping.AddDefinition("jquery", null, myScriptResDef);

母版页

<head runat="server">
    <title>Cms Administration</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="uxScriptManagerMasterPage" runat="server" EnableCdn="True">
        <Scripts>
            <asp:ScriptReference Name="jquery" />
        </Scripts>
    </asp:ScriptManager>       
    <div id="main-content">
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

子页面

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="Assets/Scripts/Jcrop/js/jquery.Jcrop.min.js"></script>
    <link rel="stylesheet" href="Assets/Scripts/Jcrop/css/jquery.Jcrop.css" type="text/css" />
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">

        $(document).ready(function () 
            $("#msgid").html("This is Hello World by JQuery");
        );

    jQuery(function()
        jQuery('#cropbox').Jcrop();
    );

    </script>



    This is Hello World by HTML
    <div id="msgid">
    </div>

    <img src="demo_files/flowers.jpg" id="cropbox" />

</asp:Content>

【问题讨论】：

【参考方案1】：

遇到同样的 EXACT 问题，我找到了解决方案。

对于上面的问题，解决方法应该是内容的页面jquery scripting。您需要引用 clientid，因为 ASP.NET 在运行时会倾向于在母版页环境中以不同的方式呈现名称。

这样做：

将“#msgid”替换为“#”

将“#cropbox”替换为“#”

这解决了我的问题。

祝你好运

【讨论】：

感谢 Sony 分享您的解决方案！【参考方案2】：

jQuery 可能在 jCrop 之后加载，导致错误。尝试对两个文件使用相同的方法包含 javascript，以便它们以正确的顺序加载。