JQuery JCrop镜像MVC 4 Razor失败

Question

我正在尝试为我的MVC应用程序实现图像裁剪功能。

我正在学习本教程：http://www.askamoeba.com/Opensource/Opensourcedetail/132/Crop-Resize-Upload-Images-in-C-MVC3-MVC4-using-Jquery-Razor

我正在使用这个库：http://deepliquid.com/content/Jcrop.html

我是一个使用MVC和Razor的JQuery新手。

由于某些原因，此JQuery甚至没有注册：

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

我已经正确设置了视图模型和控制器。

Answer 1

你必须

Close (div id="mainform")

添加:在编辑视图中

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