JQuery JCrop Image MVC 4 Razor échoue

Question

J'essaie d'implémenter la fonctionnalité de recadrage d'image pour mon application MVC.

Je suivais ce tutoriel: http://www.askamoeba.com/Opensource/Opensourcedetail/132/Crop-Resize-Upload-Images-in-C-MVC3-MVC4-using-Jquery-Razor

J'utilise cette bibliothèque: http://deepliquid.com/content/Jcrop.html

Je suis nouveau à JQuery avec MVC et Razor.

Pour une raison quelconque cette JQuery est même pas enregistrait:

@{ 
    ViewBag.Title = "Avatar Editor Page"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
@model SimsTemplate.Models.ViewModels.AvatarEditorModel 

<script type="text/javascript"> 

    $(function() { 
    jQuery('#avatarImageEditor').Jcrop({ 
     onChange: showPreview, 
     onSelect: showPreview, 
     setSelect: [@Model.Top, @Model.Left, @Model.Right, @Model.Bottom], 
     aspectRatio: 1 
    }); 
}); 

function showPreview(coords) { 
    if (parseInt(coords.w) > 0) { 
     $('#Top').val(coords.y); 
     $('#Left').val(coords.x); 
     $('#Bottom').val(coords.y2); 
     $('#Right').val(coords.x2); 

     var width = @Model.Width; 
     var height = @Model.Height; 
     var rx = 100/coords.w; 
     var ry = 100/coords.h; 

     jQuery('#preview').css({ 
      width: Math.round(rx * width) + 'px', 
      height: Math.round(ry * height) + 'px', 
      marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
      marginTop: '-' + Math.round(ry * coords.y) + 'px' 
     }); 
    } 
} 

</script> 

<div id="cropContainer"> 

    <div id="cropPreview"> 
    Preview: 
     <img src="@Model.Avatar.ImageUrl" id="preview" alt="" /> 
    </div> 

<div id="cropDisplay"> 
Display: 
    <img src="@Model.Avatar.ImageUrl" id="avatarImageEditor" alt="" /> 
</div> 

<input id="Top" name="Top" type ="text"/> 
<input id="Bottom" name="Top" type ="text"/> 
<input id="Left" name="Top" type ="text"/> 
<input id="Right" name="Top" type ="text"/> 

</div> 

<div id="mainform"> 

@using (Html.BeginForm("Edit", "Avatar", FormMethod.Post)) 
{ 
    @Html.DisplayFor(x => x.Avatar.ImageUrl)   
    @Html.HiddenFor(x => x.Left) 
    @Html.HiddenFor(x => x.Right) 
    @Html.HiddenFor(x => x.Top) 
    @Html.HiddenFor(x => x.Bottom) 
    @Html.HiddenFor(x => x.Avatar.ImageUrl) 
    <input type='submit' name='action' value='Crop' /> 
} 
</div> 

J'ai les modèles de vue et le contrôleur mis en place correctement.

Answer 1

Vous devez

Fermer (div id = "mainform")

Ajout: dans la vue modifier

@{ 
    @Scripts.Render("~/bundles/jquery") 
    <script src="@Url.Content("~/Scripts/JCrop/jquery.Jcrop.js")" type="text/javascript"></script> 
    <link rel="stylesheet" href="@Url.Content("~/Content/JCrop/jquery.Jcrop.css")" type="text/css" /> 
}