从jQuery的调用的WebAPI(Calling WebApi from jQuery)

刚开始的WebAPI，并有多个问题。阅读吨的信息，但可能缺少一些概念。

在我的控制器：

    public IEnumerable<Product> GetProducts()
    {
        return db.Products.AsEnumerable();
    }


    public Product GetProduct(string name)
    {
        Product product = db.Products.FirstOrDefault(p => p.Name == name);
        if (product == null)
        {
            throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));
        }

        return product;
    }

使用Javascript：

 $('#Search').click(function () {
    jQuery.support.cors = true;
    var productName = $('#Name').val();

    $.ajax({

        url: "http://localhost:62178/api/product",
        //url: "http://localhost:62178/api/product/" + productName,
        type: "GET",
        success: function (data) {
            alertData(data);
        }
    });
});

首先，如果我传递一个参数产品名称不管，无参数GetProduct叫（应该将数据返回）。 我需要能够调用这两个GET方法。 其次，成功的功能不被调用。所以我不从的WebAPI方法得到任何数据备份。

任何提示或指导表示赞赏。谢谢。 WebApiConfig.cs

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

只有现在的问题是，我没有得到我的警报数据：

$('#Search').click(function () {
    jQuery.support.cors = true;
    var productName = $('#Name').val();

    $.ajax({

        url: "http://localhost:62177/api/product/" + productName,
        //data: { name: productName },
        type: "GET",
        dataType: "jsonp",
        error: function (request, status, error) {
            alert(request.responseText);
        },
        success: function (data) {
            alert(data);
        }
    });
});

Answer 1:

更改或者您的方法签名

public Product GetProduct(string id)

或者你的路由

routeTemplate: "api/{controller}/{name}"

方法参数的名称来确定所选择的路线。

Answer 2:

这是最有可能是由于同源策略。尝试移动你的HTML文件中的Visual Studio解决方案（假设你使用Visual Studio），并从那里运行它（如本地主机：62177 / TEST.HTM）。如果您收到结果这种方式，将确认同源策略阻止。

Answer 3:

首先，我假设你正在查看使用Internet Explorer你的网站，因为事实上，你没有看到在刚刚发生在我身上控制台的错误，但是如果你使用Chrome试试吧，你会看到一个错误与此类似在控制台上：

XMLHttpRequest cannot load http://localhost:44271/api/routes/1. Origin http://localhost:27954 is not allowed by Access-Control-Allow-Origin.

如果您没有看到错误，你仍然可以检查Chrome的开发者工具的网络选项卡上的网络调用的结果。它很可能不会有响应可用，它应该被标记为失败的请求（不是200种状态），就像这样：

如果你的MVC网站是在一个单独的项目比你的WebAPI，当您启动调试与Visual Studio，他们将被部署在IIS中表达不同的应用程式（网址）。

这意味着，为您的WebAPI的调用将因被禁止CORS政策。

但是，您可以通过变通解决此布洛克·艾伦对的WebAPI CORS实施，其最近宣布的ASP.NET团队将直接集成的WebAPI的下一个版本。

我今天不得不创建一个简单的POC和有同样的问题，并成功地应用于Brock的实现来解决它。步骤非常简单：

你不必对您的ApiController任何更改。
您添加CorsConfig类的App_Start文件夹
您添加呼叫该CorsConfig类，到登记CORS支持静态方法
就是这样，你不应该再得到一个错误。请注意，这CORS配置将允许CORS呼吁所有方法，所有的请求和所有的起源。我只是用它为我的PoC。您可以使用图书馆的流畅配置方法更严格。

CorsConfig.cs

public static void RegisterCors(HttpConfiguration httpConfig)
{
    WebApiCorsConfiguration corsConfig = new WebApiCorsConfiguration();

    // this adds the CorsMessageHandler to the HttpConfiguration’s
    // MessageHandlers collection
    corsConfig.RegisterGlobal(httpConfig);

    // this allow all CORS requests to the Products controller
    // from the http://foo.com origin.
    corsConfig.AllowAll();
}

Global.asax中

protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        WebApiConfig.Register(GlobalConfiguration.Configuration);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);

        CorsConfig.RegisterCors(GlobalConfiguration.Configuration);
    }

Answer 4:

部分答案 - 你必须设置在jQuery的AJAX调用数据PARAM
和公正的清晰度 -
你也许不应该用“数据”作为回报变种
（我改成了“结果”下）
所以：

$.ajax({
    url: "http://localhost:62178/api/product",
    data: {name: productName},
    type: "GET",
    success: function (result) {
        alertData(result);
    }
});

Answer 5:

尝试装潢乌尔网页API法

[HttpGet]

和参数作为

[HttpGet]
public Product GetProduct([FromUri]string name)

然后尝试

文章来源: Calling WebApi from jQuery