JQuery JCrop Image MVC 4 Razor 失败

Posted 2023-02-25

【中文标题】JQuery JCrop Image MVC 4 Razor 失败

【英文标题】：JQuery JCrop Image MVC 4 Razor Fails

【发布时间】：2012-11-21 02:51:30

【问题描述】：

我正在尝试为我的 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"  />
    </div>

 <div id="cropDisplay">
 Display:
     <img src="@Model.Avatar.ImageUrl" id="avatarImageEditor"  />
</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>

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

【参考方案1】：

你必须

关闭 (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" />