如何將js變量發送給mvc控制器

Question

我對客戶端服務器編程概念不熟悉。我需要發送四個js vars到我的MVC 3控制器動作。

$(document).ready(function() { 
     var $jcrop; 

     $('#image').Jcrop({ 
      bgColor: 'red', 
      onSelect: refreshData 
     }, function() { 
      $jcrop = this; 
     }); 

     function refreshData(selected) { 
      myData = { 
       x1: selected.x1, 
       x2: selected.x2, 
       y1: selected.y1, 
       y2: selected.y2 
      }; 
     } 
    }); 

所以我在瀏覽器中得到了我的vars。

在服務器端我有是：

public ActionResult CreateCover(ImageCoordinates coordinates) { 
     ViewData.Model = coordinates; 
     return View(); 
    } 

public class ImageCoordinates 
{ 
    public int x1 { get; set; } 
    public int x2 { get; set; } 
    public int y1 { get; set; } 
    public int y2 { get; set; } 
} 

是否有一個簡單的方法來後我從JS 4個PARAMS我的行動？ 我試圖用幾個例子，從這個網站上，使用$就

像這樣

 $.ajax({ 
      url: '/dashboard/createcover', 
      type: 'POST', 
      data: JSON.stringify(myData), 
      contentType: 'application/json; charset=utf-8', 
      success: function (data) { 
       alert(data.success); 
      }, 
      error: function() { 
       alert("error"); 
      }, 
      async: false 
     }); 

但它不工作，我在操作中收到0 0 0 0。但老實說，我甚至不知道如何調用這個jquery函數。我應該通過點擊按鈕來調用它，還是當我發佈表單時自動調用它？ 還有其他方法發送這個參數嗎？

Answer 1

這裏有雲的解決方案 -

型號 -

public class ImageCoordinates 
{ 
    public int x1 { get; set; } 
    public int x2 { get; set; } 
    public int y1 { get; set; } 
    public int y2 { get; set; } 
} 

行動 -

public ActionResult CreateCover(ImageCoordinates coordinates) 
    { 
     return null; 
    } 

讓我們創建一個視圖這將使得AJAX調用行動。

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 

<script> 
    function submitForm() { 

     var model = new Object(); 
     model.x1 = 120; 
     model.y1 = 240; 
     model.x2 = 360; 
     model.y2 = 480; 


     jQuery.ajax({ 
      type: "POST", 
      url: "@Url.Action("CreateCover")", 
      dataType: "json", 
      contentType: "application/json; charset=utf-8", 
      data: JSON.stringify({ coordinates: model }), 
      success: function (data) { 
       alert(data); 
      }, 
      failure: function (errMsg) { 
       alert(errMsg); 
      } 
     }); 
    } 
</script> 

<input type="button" value="Click" onclick="submitForm()" /> 

輸出 -

Answer 2

嘗試改變傳遞給控制器​​對象的名稱：

$.ajax({ 
    url: '/dashboard/createcover', 
    type: 'POST', 
    data: {coordinates : JSON.stringify(myData)}, //change here 
    contentType: 'application/json; charset=utf-8', 
    success: function (data) { 
     alert(data.success); 
    }, 
    error: function() { 
     alert("error"); 
    }, 
    async: false 
}); 

請注意，這會後的值作爲JSON對象。您需要修改您的控制器像這樣：

public ActionResult CreateCover(string jsonCoordinates) { 
    ImageCoordinates coordinates = JsonConvert.DeserializeObject<ImageCoordinates >(jsonCoordinates); 

    ViewData.Model = coordinates; 
    return View(); 
} 

您還需要添加一個引用Newtonsoft.Json。