如何將View中的JavaScript值傳遞給Controller？

我有一個ASP.NET MVC項目，我使用的是Cropbox.js：jQuery Image Crop Plugin - http://www.jqueryrain.com/demo/jquery-crop-image-plugin/來裁剪用戶的圖像，但我找不到如何將裁剪後的圖像發送到控制器。如何將View中的JavaScript值傳遞給Controller？

的JavaScript看起來像這樣：

<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'm請求文件，我不確定是否它甚至可以工作：

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

也許有可能將img文件從javascript存儲到模型中？

來源

2014-10-01 Velusoid

你應該用你的修補程序回答你自己的問題，然後選擇它作爲一天後的「回答」。 :) – code4coffee 2014-10-02 15:10:06

噢，好的，謝謝。 – Velusoid 2014-10-02 15:43:47

我的朋友已經加入以下解決它：

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

到腳本的這一部分：

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

然後使用隱形輸入查看形式：

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

現在我可以趕上它的控制器：

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

而且I'll得到：

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

要使用此字符串的工作，有一個非常有用的問題&答案 - MVC Convert Base64 String to Image, but ... System.FormatException

來源

2014-10-02 15:54:35 Velusoid

我不知道jQuery的圖片裁剪插件，但我認爲你需要做這樣的事情：

獲取圖像的字節，將它們轉換爲Base64，然後使用Ajax將其發送到視圖控制器動作帖子。

來源

2014-10-01 21:48:55

我可以使用AjaxForm或HtmlForm並將其推送到任何操作。然後使用FormCollection並觀察您的值。例如，在我的驗證碼發生器我重寫了一些行動過濾器：

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); 
     } 
    }

和控制器使用方法：

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

我認爲你可以在這裏你byte[]變化bool captchaValid。

我希望它可以幫助你:-)

來源

2014-10-01 21:55:54 W92

如何將View中的JavaScript值傳遞給Controller？

回答

相關問題