Al integrar una aplicación ASP.NET MVC con un servicio remoto, las peticiones a la Web API pueden realizarse desde el servidor o bien delegarse parcialmente al cliente. En el backend, las opciones más habituales son HttpClient (recomendada en escenarios modernos) y la API clásica HttpWebRequest/WebRequest. En el front end, jQuery AJAX sigue siendo un mecanismo sencillo para invocar acciones del controlador MVC que, a su vez, actúa como proxy hacia la API externa.

1. Consumir la API con HttpClient

HttpClient facilita el envío de peticiones asíncronas y el tratamiento de respuestas JSON. Los ejemplos siguientes usan System.Text.Json para serializar y deserializar el contenido.

Petición GET

private const string ApiBase = "http://10.1.1.1:8080/";

public async Task<ActionResult> FetchCatalog()
{
    using var http = new HttpClient();
    http.BaseAddress = new Uri(ApiBase);
    http.DefaultRequestHeaders.Accept.Add(
        new MediaTypeWithQualityHeaderValue("application/json"));

    var response = await http.GetAsync("api/products/list?page=1&size=10");

    if (!response.IsSuccessStatusCode)
        return Json(new { error = "Request failed" });

    var json = await response.Content.ReadAsStringAsync();
    var data = JsonSerializer.Deserialize<object>(json);

    return Json(data);
}

Petición POST

[HttpPost]
public async Task<ActionResult> CreateCatalogItem(string payload)
{
    using var http = new HttpClient();
    http.BaseAddress = new Uri(ApiBase);
    http.DefaultRequestHeaders.Accept.Add(
        new MediaTypeWithQualityHeaderValue("application/json"));

    var body = new StringContent(payload, Encoding.UTF8, "application/json");
    var response = await http.PostAsync("api/products/create", body);

    if (!response.IsSuccessStatusCode)
        return View();

    var json = await response.Content.ReadAsStringAsync();
    var data = JsonSerializer.Deserialize<object>(json);

    return Json(data);
}

2. Consumir la API con HttpWebRequest

Cuando se trabaja con versiones antiguas de .NET Framework o se prefiere un helper reutilizable, HttpWebRequest permite enviar el cuerpo directamente como flujo de bytes. La siguiente clase centraliza las operaciones GET y POST con JSON.

public static class LegacyHttpHelper
{
    public static string Get(string endpoint)
    {
        var request = WebRequest.Create(endpoint);
        request.Method = "GET";

        using var response = request.GetResponse();
        using var stream = response.GetResponseStream();
        using var reader = new StreamReader(stream, Encoding.UTF8);
        return reader.ReadToEnd();
    }

    public static string PostJson(string endpoint, string jsonBody)
    {
        var payload = Encoding.UTF8.GetBytes(jsonBody);

        var request = WebRequest.Create(endpoint);
        request.Method = "POST";
        request.ContentType = "application/json";
        request.ContentLength = payload.Length;

        using (var body = request.GetRequestStream())
        {
            body.Write(payload, 0, payload.Length);
        }

        using var response = request.GetResponse();
        using var stream = response.GetResponseStream();
        using var reader = new StreamReader(stream, Encoding.UTF8);
        return reader.ReadToEnd();
    }
}

Llamada GET

public ActionResult FetchCatalog()
{
    var json = LegacyHttpHelper.Get(ApiBase + "api/products/list?page=1&size=10");
    var data = JsonSerializer.Deserialize<object>(json);
    return Json(data);
}

Llamada POST

[HttpPost]
public ActionResult CreateCatalogItem(string payload)
{
    var json = LegacyHttpHelper.PostJson(ApiBase + "api/products/create", payload);
    var data = JsonSerializer.Deserialize<object>(json);
    return Json(data);
}

3. Invocar las acciones MVC desde jQuery

Desde la vista, se puede llamar a los métodos del controlador medianet AJAX. En el ejemplo, el objeto se serializa dos veces: una para convertirlo en cadena JSON y otra para incluirlo como valor del parámetro esperado por la acción.

$.ajax({
    type: "GET",
    url: "/catalog/fetch",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (response) {
        console.log(response);
    }
});

var product = { Id: "382accff-57b2-4d6e-ae84-a61e00a3e3b8", Category: 111 };

$.ajax({
    type: "POST",
    url: "/catalog/create",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({ payload: JSON.stringify(product) }),
    success: function (response) {
        console.log(response);
    }
});