如何将坐标值 (x,y,w,h) 作为 JSON 发送到控制器并在 WEB API 中获得响应

Question

我正在使用 Jquery Jcrop 获取 selected 区域。根据为 x、y、w、h 获得的值，我需要检索 "key" 和 "value"。我需要使用 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 调用。下面是编写的 jquery 脚本，用于启用 jcrop 到 select 特定区域。

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

下面是我在webAPI项目中声明的class

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
    }

如何将坐标值 (x,y,w,h) 作为 JSON 发送到控制器并在 WEB API 中获得响应

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

jquery

json

asp.net-web-api

jcrop