Как использовать JCrop в ASP.NET с мастер-страницей

Я использую asp.net 4, С#, jQuery 1.5.1 и Jcrop-0.9.8.

Для jQuery я загружаю пакет с помощью MS CDN и ScriptManager.

jQuery загружается успешно, но у меня проблема с Jcrop.

Я получаю сообщение об ошибке в IE 8 при вызове Jcrop.

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

Кажется, я не могу использовать jCrop с MasterPage. Я попытался использовать тот же скрипт на странице без связанной MasterPage, и он работает.

У вас есть идеи, как это решить? Спасибо за ваше время.

ГлобалАсакс

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>

person GibboK    schedule 29.03.2011    source источник


Ответы (2)


Имейте ту же ТОЧНУЮ проблему, и я нашел решение.

Для вышеуказанной проблемы решением должен быть сценарий jquery страницы содержимого. Вам необходимо указать идентификатор клиента, так как ASP.NET имеет тенденцию отображать имя по-разному во время выполнения в среде главной страницы.

так что сделайте это:

замените "#msgid" на "#‹%= msgid.ClientID %>"

замените '#cropbox' на "#‹%= Cropbox.ClientID %>"

Это решило мою проблему.

Удачи

person Sonny    schedule 06.07.2012
comment
Спасибо Sony за то, что поделились своим решением! - person GibboK; 08.07.2012

jQuery может загружаться после jCrop, вызывая ошибку. Попробуйте включить javascript, используя один и тот же метод для обоих файлов, чтобы они загружались в правильном порядке.

Или вы можете попробовать следовать этой короткой статье: http://nathanaeljones.com/573/combining-jcrop-and-server-side-image-resizing/

person Lilith River    schedule 04.06.2011