Question

您好我已经开始学习Web API了我目前在项目的根目录（不在文件夹中）有一个Web Api控制器，如下所示

  public class LearnWebApi : ApiController
  {
    // GET api/<controller>
    public IEnumerable<string> Get()
    {
        return new string[] { "value1", "value2" };
    }

    // GET api/<controller>/5
    public string Get(int id)
    {
        return "value";
    }

    // POST api/<controller>
    public void Post([FromBody]string value)
    {
    }

    // PUT api/<controller>/5
    public void Put(int id, [FromBody]string value)
    {
    }

    // DELETE api/<controller>/5
    public void Delete(int id)
    {
    }
  }

现在我有一个住在控制器文件夹内的家庭控制器，视图位于视图文件夹中。现在在视图上我有一个按钮，当我单击此按钮时，我想调用Api Web控制器获取方法并传入ID为2，例如我在下面放置了一个断点

// GET api/<controller>/5
public string Get(int id)
{
    return "value";
}

但它并没有被击中，而是我在浏览器中收到消息

404 Not Found - http://localhost:27774/~/api/LearnWebApi/Get/5"

我的jquery就在这里

<h2>Index</h2>
<button id="PressMe">Press me</button>

<script type="text/javascript">
$(document).ready(function () {

    $('#PressMe').click(function () {
        $.ajax({
            type: "POST",
            dataType: "json",
            // data: source,
            url: '~/api/LearnWebApi/Get/5', // url of Api controller not mvc
            success: function (data) {
                alert("Redirect true !");

            },
            error: function () {
                alert('erere');
            }

        });

        return false;

    });

});
</script>

这是我的WebApiConfig

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

以下是我的项目构建方式

enter image description here 现在我想这可能与我指定的网址有关，但我不确定是否有任何帮助？

Answer 1

我没有像你一样精确的项目结构，但我有一个完美的工作api演示，我今天创建。

很抱歉我无法上传截图，因为我刚开始使用stackoverflow而且我还是初学者，他们还不允许我上传屏幕截图。

但我希望这会有所帮助。

控制器名称为Default1，位于控制器文件夹下。这是代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using demowebapi1.Models;

namespace demowebapi1.Controllers
{
   public class Default1Controller : ApiController
{
    public void test1(List<Class1> obj)
    {
       for(int i=0; i<obj.Count;i++)
       {
           string s1 = obj[i].text1;
           string s2 = obj[i].text2;

       }
     }
  }
}

我在控制器中使用了一个列表对象作为我的action方法的参数。 Class1是我的模型类，位于models文件夹下。这是代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace demowebapi1.Models
{
  public class Class1
  {
    public string text1 { get; set;}
    public string text2 {get; set;}
  } 
 }

这是我在app_start文件夹中的webapiconfig.cs的代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;

namespace demowebapi1
{
  public static class WebApiConfig
 {
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
      }
      }
  }

这里是名为＆＃34; test1.html＆＃34;的html文件。通过它我正在进行jquery ajax调用。请注意，我使用的是post而不是get。

<html>
<head>
<title> </title>
<script src="jquery-2.1.3.js"></script> 
 </head>
 <body>
  <input type="text" id="txt0" />  <input type="text" id="text0" class="tmp" />  <br />
   <input type="text" id="txt1" />  <input type="text" id="text1" class="tmp" />

   <input type="button" onclick="makepost();" value="click me" /> 
   <script type="text/javascript">

    function makepost()
    {
    var POExpedite = [];
    var arr = $(".tmp");

    console.log(arr.length);



    for(var i=0;i<arr.length; i++)
    {
        var str1 = $("#txt" + i).val();           

        alert(str1);

        var str2 = $("#text" + i).val();

        alert(str2);



        POExpedite.push({

            "text1": str1,
            "text2": str2

        });

    }

    console.log(JSON.stringify(POExpedite));

    var apiurl = "http://localhost:4086/api/Default1/test1"

    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: apiurl,
        data: JSON.stringify(POExpedite),
        async: false
      });
   }
  </script>
  </body>
  </html>

Answer 2

请注意，您需要先运行您的web api项目，并且应该继续运行。只有这样你才能进行ajax调用。

在我的例子中，web api控制器和test1.html文件在同一个项目中。

如果您的web api项目不同且您的mvc项目不同，那么您可能会遇到跨站点脚本错误。

可在以下链接中找到更多信息。

http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

从MVC View调用API控制器

2 个答案: