How to send Coordinate values(x,y,w,h) as JSON to Controller and get response in WEB API

Question

I am using Jquery Jcrop for getting a selected area. Based on the values obtained for x,y,w,h I need to retrieve a "key" and "value". I need to use Web API to do so.

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

The above is the ajax call made. Below is the jquery script written to enable jcrop to select a particular region.

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

Below is the class I declared in the web API project.

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

Here is the Controller code:

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

You don't need to implement your own model binding. The MVC already can do it for you. All you need in your controller - describe the incoming model properly. So you action might look like this:

Model:

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

Action:

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