Question

我正在尝试拖放以上传图像，然后裁剪相同的图像。

到目前为止，我有一个名为Index的页面正在上传图片，没有问题，但是在帖子之后它没有更新页面上的模型。我使用Html.helpers来显示模型中的数据。我试过清除模型状态，但我没有改变。我使用dropzone.js上传和裁剪我已经准备好了Jcrop。

型号：

    public class ImageModel
{
    public string ImageUrl { get; set; }
    public string FileName { get; set; }
}

public class EditorInputModel
{
    public ImageModel Image { get; set; }
    public double Top { get; set; }
    public double Bottom { get; set; }
    public double Left { get; set; }
    public double Right { get; set; }
    public double Width { get; set; }
    public double Height { get; set; }

    public string Caption { get; set; }
}

动作：

 public ActionResult Index()
    {
        var model = new EditorInputModel();
        model.Image = new ImageModel();
        model.Image.ImageUrl = "";
        model.Image.FileName = "";
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(EditorInputModel model)
    {

        var image = WebImage.GetImageFromRequest();
        if (image != null)
        {
            var filename = Guid.NewGuid().ToString("d");

            model.Image = new ImageModel();                
            model.Image.FileName = image.FileName;                
            model.Image.ImageUrl = string.Format("data:image/{0};base64,{1}",image.ImageFormat, Convert.ToBase64String(image.GetBytes()));


            model.Width = image.Width;
            model.Height = image.Height;
            model.Top = image.Height * 0.1;
            model.Left = image.Width * 0.9;
            model.Right = image.Width * 0.9;
            model.Bottom = image.Height * 0.9;
            ModelState.Clear();
        }
        return View(model);
    }

查看：

@model FileUploadTest1.Controllers.EditorInputModel

@{
    ViewBag.Title = "Index";
}
<h2>File Upload Test</h2>

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "dropzone", id = "dropzoneForm" }))
{

}

@using (Html.BeginForm("Editor","Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "cropView", style = "display:none" }))
{    <div class="container">
        <div class="image-cropper">
        @Html.HiddenFor(x => x.Left)
        @Html.HiddenFor(x => x.Right)
        @Html.HiddenFor(x => x.Top)
        @Html.HiddenFor(x => x.Bottom)
        @Html.HiddenFor(x => x.Image.ImageUrl)
        @Html.HiddenFor(x => x.Image.FileName)

        @Model.Left;
        <div class="col-lg-7 col-md-5 col-sm-7">
            <img src="@Model.Image.ImageUrl" runat="server" class="image " style="max-width:400px;" alt="" />
        </div>
        <div class="col-lg-1 col-md-2 col-sm-1"></div>
        <div class="col-lg-4 col-md-5 col-sm-4">
            <div style="margin: 50px; width: 200px; text-align: center">
                <div class="preview" style="width: 200px; height: 200px">
                </div>
                <input type="checkbox" class="keepAspectRatio" />
                Lock aspect ratio<br />
            </div>
        </div>
    </div>
</div>
<div class="container">
    <br />
    <div class="col-lg-12 col-md-12 col-sm-12">
        @Html.LabelFor(model => model.Caption)
        @Html.TextBoxFor(model => model.Caption, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Caption)
        <div class="container center">
            <br />
            <input type="submit" name="action" class="btn btn-success" value="Crop" />
        </div>
    </div>
</div>

}

Answer 1

您正在视图中调用controller.classname

  @model FileUploadTest1.Controllers.EditorInputModel

它必须是model.classname

  @model projectname.Models.classname

Post后模型不更新

1 个答案: