So senden Sie Koordinatenwerte (x, y, w, h) als JSON an Controller und erhalten Antwort in WEB-API

Question

Ich benutze Jquery Jcrop zum Abrufen eines ausgewählten Bereichs. Basierend auf den Werten für x, y, w, h muss ich einen "Schlüssel" und "Wert" abrufen. Dazu muss ich die Web-API verwenden.

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

Das obige ist der Ajax Anruf gemacht. Im Folgenden ist das jquery-Skript beschrieben, mit dem jcrop eine bestimmte Region auswählen kann.

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

Unten ist die Klasse, die ich im Web-API-Projekt deklariert habe.

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

Hier ist der Code-Controller:

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

Sie müssen nicht Ihr eigenes Modell verbindlich umzusetzen. Das MVC kann das schon für Sie tun. Alles was Sie in Ihrem Controller brauchen - beschreiben Sie das eingehende Modell richtig. So Sie Aktion könnte wie folgt aussehen:

Modell:

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

Aktion:

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