如何将JavaScript值从View传递到Controller？

Question

I have an ASP.NET MVC project and I´m using Cropbox.js : jQuery Image Crop Plugin - http://www.jqueryrain.com/demo/jquery-crop-image-plugin/ to crop an image of a user, but I cannot find how to get the cropped image to the controller.

JavaScript looks like this:

 <script type="text/javascript">
    window.onload = function () {
        var options =
        {
            imageBox: '.imageBox',
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: 'avatar.png'
        }
        var cropper;
        document.querySelector('#file').addEventListener('change', function () {
            var reader = new FileReader();
            reader.onload = function (e) {
                options.imgSrc = e.target.result;
                cropper = new cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
        })
        document.querySelector('#btnCrop').addEventListener('click', function () {
            var img = cropper.getAvatar()
            document.querySelector('.cropped').innerHTML += '<img id="Portrait" src="' + img + '">';
        })
        document.querySelector('#btnZoomIn').addEventListener('click', function () {
            cropper.zoomIn();
        })
        document.querySelector('#btnZoomOut').addEventListener('click', function () {
            cropper.zoomOut();
        })
    };
</script>

I tried to use the following in the controller, but since I´m requesting the file, I´m not sure if it can even work:

HttpPostedFileBase file = Request.Files["Portrait"];

Maybe it would be possible to store the img file from javascript to the model?

Answer 1

My friend has solved it by adding following:

document.getElementById('avatarData').value = img;

To this part of the script:

    document.querySelector('#btnCrop').addEventListener('click', function () {
        var img = cropper.getAvatar()                
        document.querySelector('.cropped').innerHTML += '<img src="' + img + '">';             
        //new added
        document.getElementById('avatarData').value = img;
    })

Then used invisible input in View form:

<input type="hidden" id="avatarData" name="avatarData" value="">  

Now I can catch it in controller:

var file = Request.Form["avatarData"];

And I´ll get:

"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQA..."

To work with this string, there is a very useful question & answer - MVC Convert Base64 String to Image, but ... System.FormatException

Answer 2

I don't know the jQuery Image Crop Plugin, but I think you'll need to do something like that:

Get the image's bytes, convert them to base64 and then send them to ViewController action using Ajax Post.

Answer 3

i thing that you can use AjaxForm or HtmlForm and push it to any action. Then use FormCollection and watch your values. For example in my Captcha generator I override some action for filter:

   public class CaptchaValidator : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            RegisterViewModel model = filterContext.ActionParameters["model"] as RegisterViewModel;
            if (filterContext.HttpContext.Session["Captcha"] == null || filterContext.HttpContext.Session["Captcha"].ToString() != model.Captcha)
            {
                filterContext.ActionParameters["captchaValid"] = false;
            }
            else
            {
                filterContext.ActionParameters["captchaValid"] = true;
            }
            base.OnActionExecuting(filterContext);
        }
    }

and use in your controller:

[CaptchaValidator]
public async Task<ActionResult> Register(RegisterViewModel model, bool captchaValid)

I think that you can here change bool captchaValid to your byte[] .

I hope that it can help you :-)