javascript - 从未在 ApiController 中调用 Post 方法

Question

我无法将用户添加到我的数据库中。运行代码后，我注意到 ApiController 中的 Post 方法从未被调用。

这是我的 Controller :ChatUserController

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

namespace SignalRChat.Controllers
{
    public class ChatUserController : ApiController
    {
        // GET api/chatuser
        public IEnumerable<ChatRoomUser> Get()
        {
            var user = UserRepository.GetChatRoomUsers();
            return user.ToList();
        }

        // GET api/chatuser/5
        public ChatRoomUser Get(int id)
        {
            return UserRepository.GetChatRoomUsers().FirstOrDefault(u => u.UserId == id);
        }

        public HttpResponseMessage Post(ChatRoomUser user)
        {
            UserRepository.AddUser(user);
            var response = Request.CreateResponse(HttpStatusCode.Created, user);
            var uri = Url.Link("DefaultApi", new { id = user.UserId });
            response.Headers.Location = new Uri(uri);
            return response;
        }

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

        // DELETE api/chatuser/5
        public void Delete(int id)
        {
        }
    }
}

这是我的 javascript 文件，它位于项目根目录中的一个文件夹中:UserViewModel.js

/// <reference path="../Scripts/jquery-1.10.2.min.js" />
/// <reference path="../Scripts/knockout-3.1.0.js" />

$(document).ready(function () {
    ko.applyBindings(new user(), document.getElementById('createNode'));
});

function user(username,roomid,roomname) {
    var self = this;
    self.UserName = username;
    self.RoomId = roomid;
    self.RoomName = roomname;

    self.addUser = function() {
        $.ajax({
            url: "/api/chatuser/",
            type: "post",
            data: ko.toJSON(this),
            contentType: 'application/json',
            success: function(result) {

            }
        });
    };
}

这是我的观点:Users.cshtml

@{
    ViewBag.Title = "Users";
}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/knockout-3.1.0.js"></script>
<script src="~/MyJS/UserViewModel.js"></script>

<h2>Users</h2>

<div id="createNode">@Html.Partial("CreateUser")</div>

这是我的局部 View :CreateUser.cshtml

<table>
    <tr>
        <th>UserName</th>
        <td> <input type="text" data-bind="user: UserName"/></td>

        <th>RoomId</th>
        <td> <input type="number" data-bind="user: RoomId" /></td>

        <th>RoomName</th>
        <td> <input type="text" data-bind="user: RoomName" /></td>
    </tr>


</table>
<br/>
<input type="button" id="btnAddUser" value="Add User" data-bind="click: addUser" />

我一直在努力解决这个问题，但我觉得它与 javascript 文件有关，因为这是应该调用 Post 方法的地方。对吧？

非常感谢所有帮助。

编辑:

我的 WebAPI Controller 位于此处

我没有 WebAPI.config 文件但有 web.config 文件？听起来这是个问题？

这里是我图片中选择的Web.config文件:

<?xml version="1.0"?>

<configuration>
  <configSections>
    <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
      <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    </sectionGroup>
  </configSections>

  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization"/>
        <add namespace="System.Web.Routing" />
        <add namespace="SignalRChat" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>

  <appSettings>
    <add key="webpages:Enabled" value="false" />
  </appSettings>

  <system.webServer>
    <handlers>
      <remove name="BlockViewHandler"/>
      <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
    </handlers>
  </system.webServer>
</configuration>

Answer 1

更新-

因为您也使用 get 方法获得了 404。我猜你的路由是错误的。发布您的 WebApiConfig.cs 文件和您的 api Controller 所在的目录结构。

原始答案-

这是因为您传递的是 (this) 而不是 (self)，这是您将所有数据绑定(bind)到的位置。

改变-

data: ko.toJSON(this)

到-

data: ko.toJSON(self)