JSONをコントローラに送信してWEB APIで座標値（x、y、w、h）を送信する方法

Question

Jquery Jcropを使用して選択領域を取得しています。 x、y、w、hについて得られた値に基づいて、「キー」と「値」を取得する必要があります。私はそうするためにWeb APIを使用する必要があります。

function PostCoordinateValues() { 
    $.ajax({ 
     type: "GET", 
     url: "api/ExtractWithKey", 
     data: JSONString, 
     success: function (result) { 
      alert("success"); 
      if (result != null) { 
       var data = result.d; 
       $('#keyBox').text(data[0]); 
       $('#valueBox').text(data[1]); 
      } 
     } 
    }); 
} 

上記はajaxコールです。以下は、jcropが特定の地域を選択できるようにするために書かれたjqueryスクリプトです。

$(document).ready(function() { 
    $('#docView').Jcrop({ 
     onSelect: function (c) { 
      var x1 = $('#cropx').val(c.x); 
      var y1 = $('#cropy').val(c.y); 
      var x2 = $('#cropw').val(c.w); 
      var y2 = $('#croph').val(c.h); 
     } 
    }); 
    $('#form').on('change', '[type=text]', function (c) { 
    $('#docView').Jcrop('api').setSelect([ 
     x1, y1, x2, y2]); 
     var JSONString = {'xv': x1, 'yv': y1, 'wv': x2, 'hv': y2}; 
     PostCoordinateValues(); 
    }); 
}); 

以下は、Web APIプロジェクトで宣言したクラスです。ここで

public class KeyValueData 
{ 
    public string XVal { get; set; } 
    public string YVal { get; set; } 
    public string WVal { get; set; } 
    public string HVal { get; set; } 
    public string Key { get; set; } 
    public string Value { get; set; } 
} 

は、コントローラー・コードです：

public class ExtractWithKeyController : ApiController 
{ 
    List<string> ReturnData; 
    public List<KeyValueData> responseData = new List<KeyValueData>() 
    { 
     new KeyValueData() { XVal = "79", YVal = "198", WVal = "218", HVal = "32", Key = "EMPNAME", Value ="Ron" } 
    }; 

    [System.Web.Http.HttpGet] 
    public List<string> GetResponse(string coordinates) 
    { 
     if (coordinates[0] == responseData[0].XVal && coordinates[1] == responseData[0].YVal && coordinates[2] == responseData[0].WVal && coordinates[3] == responseData[0].HVal) 
     { 
      ReturnData = new List<string>(); 
      ReturnData[0] = responseData[0].Key; 
      ReturnData[1] = responseData[0].Value; 
     } 
     return ReturnData; 
    } 
} 

Answer 1

あなたがあなた自身のモデルバインディングを実装する必要はありません。 MVCはすでにあなたのためにそれを行うことができます。あなたのコントローラーに必要なのは、着信モデルを適切に記述することだけです。だからアクションは、次のようになります。

モデル：

public class MyCoordinates{ 
    public decimal Xv {get; set;} 
    public decimal Yv {get; set;} 
    public decimal Wv {get; set;} 
    public decimal Hv {get; set;} 
} 

処置：

[HttpGet] 
    public List<string> GetResponse(MyCoordinates coordinates) 
    { 
     //Here you can use coordinates.Xv and other members 
    }