How to use JCrop in ASP.NET with Master Page
I'm using asp.net 4, c#, jQuery 1.5.1 and Jcrop-0.9.8.
For jQuery I load the package using MS CDN and ScriptManager.
jQuery load successfully but I have a problem with Jcrop.
I receive an Error in IE 8 when calling Jcrop.
Line: 461
Error: Object doesn't support this property or method
It seems that I cannot use jCrop with a MasterPage. I tried to use the same script in a page without MasterPage associated and it is working.
Do you have any ideas how to solve it? Thanks for your time.
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);
}
MasterPage
<head runat="server">
<title>Cms Administration</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:Scri开发者_开发知识库ptManager 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>
Child Page
<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>
Have the same EXACT issue and I've found the solution.
For the above problem, the solution should be the content's page jquery scripting. You need to reference the clientid, as ASP.NET will tend to render the name differently during runtime, in a Master Page environment.
so do this:
replace "#msgid" with "#<%= msgid.ClientID %>"
replace '#cropbox' with "#<%= cropbox.ClientID %>"
This resolved my problem.
Good Luck
jQuery may be loading after jCrop, causing the error. Try including the javascript using the same method for both files so they load in the proper order.
Or, you could try following this short article: http://nathanaeljones.com/573/combining-jcrop-and-server-side-image-resizing/
加载中,请稍侯......
精彩评论