Question

我正在尝试构建一个简单的WebApi服务，该服务将实时返回帖子的评论。所以该服务只实现了Get方法，它是一个简单的返回IEnumerable字符串，用于传递Post ID：

 public class CommentApiController : ApiController
    {
        // GET api/<controller>
        public IEnumerable<string> Get(int id)
        {
            return new ApplicationDbContext().Posts.First(x => x.PostId == id).CommentId.Select(x => x.CommentText).ToList();
        }

        // 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)
        {
        }
    }

我也制作了WebApiConfig类，并指定路由如下：

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

在我的Global.asax.cs文件中，我添加了该路由的参考：

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

在简单的局部视图中，我尝试每隔8秒调用一次此服务，因此帖子的评论可以自行显示，无需刷新页面，以检查其他一些用户是否在帖子上发布评论

@model List<StudentBookProject.Models.Post>

<table class="table table-striped">
    @foreach (var item in Model)
    {
        if (item.ImagePost != null)
        {
            <tr class="info">
                <td>@item.CurrentDate</td>
            </tr>
            <tr class="info">
                <td>
                    |@Html.ActionLink("Delete", "Delete", new { id = item.PostId }) |
                    @Html.ActionLink("Comment", "AddComment", new { id = item.PostId }, new { @class = "comment" }) |
                </td>
            </tr>
            <tr class="info">
                <td>
                    <img src="data:image/png;base64,@Convert.ToBase64String(item.ImagePost, 0, item.ImagePost.Length)" width="620" />
                </td>
            </tr>
            <tr>
                <td>
                    @Html.Partial("~/Views/Posts/ListComment.cshtml", item.CommentId)
                </td>
            </tr>
        }
        if (item.FilePost != null)
        {
            <tr class="info">
                <td>@item.CurrentDate</td>
            </tr>
            <tr class="info">
                <td>
                    | @Html.ActionLink("Delete", "Delete", new { id = item.PostId }) |
                    @Html.ActionLink("Comment", "AddComment", new { id = item.PostId }, new { @class = "comment" }) |
                </td>
            </tr>
            <tr class="info">
                <td>
                    File attachment
                </td>
            </tr>
        }
        if (item.TextPost != "")
        {
            <tr class="info">
                <td>@item.CurrentDate</td>
            </tr>
            <tr class="info">
                <td>
                    | @Html.ActionLink("Edit", "Edit", new { id = item.PostId }, new { @class = "lnkEdit" }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.PostId }) |
                    @Html.ActionLink("Comment", "AddComment", new { id = item.PostId }, new { @class = "comment" }) |
                </td>
            </tr>
            <tr class="info">
                <td>
                    @item.TextPost
                </td>
            </tr>
        }
    }
</table>

@{
    int i = 0;

    while (i < Model.Count())
    {
        if (Model[i].ImagePost != null || Model[i].TextPost != null || Model[i].FilePost != null)
        {
            <script>
                $(document).ready(function () {

                    var showAllComments = function () {                 
                        $.ajax({
                            url: "/api/CommentApi/" + "@Model[i].PostId.ToString()"        
                        }).done(function (data) {
                            var html = "";                              
                            for (item in data) {
                                html += '<div>' + data[item] + '</div>';
                            }
                            var divID = "@("quote" + Model[i].PostId.ToString())"

                            $('#' + divID).html(html);

                            setInterval(function () {   
                                showAllComments();                                          
                            }, 8000);                                                       

                        });
                    };
                })
            </script>
        }
        ++i;
    }
}

我的服务未被调用，至少没有以正确的方式调用，因此只有在刷新页面后才会显示新注释。我知道WebApi，特别是在这种情况下应该易于实现并且非常直接，但我对这项技术完全陌生，我不知道我错过了什么或者错误地实施了什么。一直试图找到一些合适的教程来帮助我解决这个问题，但没有任何帮助我。

我已经读过某个地方，我应该为WebDAV的Web.config文件添加一行，但这对我也没有帮助。

<handlers>
      <remove name="WebDAV"/>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>

有人看到了我没做过的事情以及可能出现的错误吗？另外，有人知道一些好的.NET WebApi教程吗？

P.S。当我直接从浏览器调用WebApi Get方法时使用：... / api / CommentApi / id路由服务被调用并返回发布的传递id的注释，所以服务没问题，我没有调用它以良好的方式在代码中......

Answer 1

首先，正如您自己所说，当您在浏览器中键入URL并按Enter键时，您将从Web API获得响应：这意味着Web API服务和服务器已正确配置。所以你的问题与配置无关：问题出在请求本身。

网址和方法

对于要求工作，它必须是GET请求，正确的URL和正确的参数。

您的路线模板看起来像routeTemplate: "api/{controller}/{id}"，带有可选的id。你的方法是一个get方法。在这种方法中，参数可以从路径（模板中的{id}段）或查询字符串中恢复，即：

GET api/CommentApi/5
GET api/CommentApi?id=5

您可以使用任何此网址。

返回的数据格式和Accept标头

Web API可以以两种不同的格式（XML或JSON）返回数据。如果您没有指定任何内容，则返回的数据将以XML格式显示（这是您在浏览器中键入URL时获得的内容）。如果您更喜欢JSON，那就是在这种情况下，您需要在请求中添加标头：Accept: application/json

注意：指定Content-Type没有意义，因为您无法在GET请求中发送有效负载（正文中的数据）

使用jQuery

从Web API服务中的GET方法获取数据的最简单方法是使用jQuery .getJSON。如果你查看文档，你会发现这个方法等同于

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

并且，如果您阅读了.ajax()的文档，您将理解指定dataType: "json"等同于包含标头Accept:application/json，它要求Web API返回JSON数据。而且你也会明白默认方法是GET。因此，您必须确保的唯一其他事情是URL看起来像预期的那样。查看getJSON：jQuery.getJSON( url [, data ] [, success ] )

的签名

它需要一个URL和可选的数据以及一个成功的回调。我建议不要使用回调，所以让我们看看2个可能的选项来发出请求：

$.getJSON('/api/CommentApi/'+id)会呈现类似/api/CommentApi/5（未指定数据）
$.getJSON('/api/CommentApi',{id:5})会呈现类似/api/CommentApi?id=5的网址（数据指定为JavaScript对象，属性名称类似于操作的参数名称：在这种情况下为id）

使用回复

我建议不要使用success回调，而是使用promise .done方法。因此，无论您使用哪种语法进行通话，都必须推迟.done这样（就像您在原始代码中所做的那样）：

$.getJSON('/api/CommentApi/'+id).done(function(response) {
    // use here the response
});

最终代码

因此，修改后的showAllComments方法看起来像这样

请特别注意评论

var showAllComments = function () {
    $.getJSON("/api/CommentApi/" + "@Model[i].PostId.ToString()")
    .done(function (data) {
        // create empty jQuery div
        var $html = $('<div>'); 
        // Fill the empty div with inner divs with the returned data
        for (item in data) {
          // using .text() is safer: if you include special symbols
          // like < or > using .html() would break the HTML of the page
          $html.append($('<div>').text(data[item]));
        }
        // Transfer the inner divs to the container div
        var divID = "@("quote" + Model[i].PostId.ToString())";
        $('#' + divID).html($html.children());
        // recursive call to the same function, to keep refreshing
        // you can refer to it by name, don't need to call it in a closure
        // IMPORTANT: use setTimeout, not setInterval, as
        // setInterval would call the function every 8 seconds!!
        // So, in each execution of this method you'd bee asking to repeat
        // the query every 8 seconds, and would get plenty of requests!!
        // setTimeout calls it 8 seconds after getting each response,
        // only once!!
        setTimeout(showAllComments, 8000);                                        
    }).fail(function() {
        // in case the request fails, do also trigger it again in seconds!
        setTimeout(showAllComments, 8000);                                        
    });
};

Answer 2

您需要设置dataType，contentType并在数据中传递id参数;

尝试以下方法：

 $.ajax({
        url: "/api/CommentApi/Get",
        type: 'GET',
        data: { id: @Model[i].PostId },
        dataType: 'json',
        contentType: 'application/json',
        success: function (data) { 

                            var html = "";                              
                            for (item in data) {
                                html += '<div>' + data[item] + '</div>';
                            }
                            var divID = "@("quote" + Model[i].PostId.ToString())"

                            $('#' + divID).html(html);

                            setInterval(function () {   
                                showAllComments();                                          
                            }, 8000);                                                        }
    });

<强>更新

好的，将其分解为一个更简单的工作示例，以下内容将起作用。

<强>的javascript

    var urlString = "http://localhost/api/CommentApi/Get";

    $.ajax({
        url: urlString,
        type: 'GET',
        data: { id : 1},
        dataType: 'json',
        contentType: 'application/json',
        success: function (data) { console.log(data); }
    });
</script>

让您的控制器只返回硬编码值，如下所示：

// GET api/values
public IEnumerable<string> Get(int id)
{
    return new List<string>() { "one", "two" };
}

运行以上内容并测试它是否将值打印到控制台。

Answer 3

嗨，起初它看起来你没有调用该方法。我找不到任何'showAllComments'函数的调用。当我复制你的代码并在声明后调用

 <script>
    $(document).ready(function () {

        var showAllComments = function () {
            // code
        };

        showAllComments();
    })
</script>

我看到调用了ApiController方法，为我更新了html。你确定你称之为'showAllComments'功能吗？

JotaBe的答案非常好，应该有效。并按照JotaBe编写的setTimeout函数进行操作。请参阅功能说明。

http://www.w3schools.com/jsref/met_win_setinterval.asp http://www.w3schools.com/jsref/met_win_settimeout.asp

Answer 4

您是否查看过调用的路由以及真实的服务器响应是什么？

您可能希望将Route属性设置为操作，然后查看使用Postman快速调用它以查看响应。我发现没有使用邮递员，它检查路由比它需要的要困难得多。

示例项似乎只是将根调用为/ api / comments / 1或api / comments /？id = 1其中get调用看起来是/ api / comments / get？id = 1来自路由为IIRC默认路由将具有索引未获取或查看的操作。

稍后当我可以启动一个演示项目并测试发生了什么时，我会更详细地看一下这个

编辑：如果您将属性添加到控制器/操作中，您可以更轻松地看到调用的构建方式：

[RoutePrefix("api/Account")]
public class AccountController : BaseAPIController
{
       [Route("someroute")]
       [HttpGet]
       public int mymethod(int ID){return 1;}
}

在这个例子中，你会打电话给/ api / account / soumeroute？id = 123123，你会得到1回。 HTTPGet只是帮助分离可读性方面的代码（如果你启用了XML API文档，它就是一个很好的选择）

Answer 5

您是否尝试添加此内容：

dataType: 'json',
async: true,
type: 'GET', //EDIT: my mistake should be GET, thx JotaBe for pointing that

到您的$ .ajax电话？

或者尝试这种方式：

$.ajax({
                url: "/api/CommentApi/" + "@Model[i].PostId.ToString()",

                dataType: 'json',
                async: true,
                type: 'GET',
                error: function () {
                    alert('Error');
                }

            success: function (data) {
                alert('Success')
            }});

使用jQuery在ASP.NET MVC 5应用程序中调用WebAPI服务

5 个答案:

网址和方法

返回的数据格式和Accept标头

使用jQuery

使用回复

最终代码