JQuery JCrop Image MVC 4 Razor Fails

Question

I am trying to implement the image crop feature for my MVC application.

I am following this tutorial: http://www.askamoeba.com/Opensource/Opensourcedetail/132/Crop-Resize-Upload-Images-in-C-MVC3-MVC4-using-Jquery-Razor

I am using this library: http://deepliquid.com/content/Jcrop.html

I am new to JQuery with MVC and Razor.

For some reason this JQuery is not even registering:

@{
    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>

I have the view models and controller set up correctly.

Answer 1

You must

Close (div id="mainform")

Adding: in the edit view

@{
    @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" />
}