时间戳

首页 > 解决方案 > 将删除请求从 Angular 5 项目发送到 .net Web api 时出现 404 未找到错误

.net - 将删除请求从 Angular 5 项目发送到 .net Web api 时出现 404 未找到错误

问题描述

从角度 5 向 .net web api 发送删除请求时，我收到“DELETE http://localhost:51352/api/Account/undefined 404（未找到）”。

这是我的 user.component.ts 角度

 delete(id){
  this.spinner.show();
  this._userService.deleteUser(id).subscribe(() => {
  this.spinner.hide();
  this.toastr.successToastr('User registration successful');
  this._messageService.clear('c');
  this.getUser();
}, err => this.spinner.hide()); }

这是 user.service.ts 文件中的 deleteUser 函数。

deleteUser(Id: string){
  return this.http.delete(this.remoteServerBaseUrl + '/api/Account/' + Id)
}

}

export class UserListDto {
  Id: string;
  UsernName : string;
  Email : string;
  FirstName : string;
  LastName : string;
}

export class UserEditDto {
  Id : string;
  UserName : string;
  Email : string;
  FirstName : string;
  LastName : string;
}

这是我的 users.component.html 文件。

<ng-template pTemplate="body" let-data>
          <tr>
            <td>
              <div class="btn-group" dropdown>
                <button dropdownToggle type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-cog"></i>&nbsp;Actions&nbsp;<i class="caret"></i>
                </button>
                <ul *dropdownMenu class="dropdown-menu" role="menu">
                    <li role="menuitem"><a class="dropdown-item" (click)="edit(user.id)"><i class="fa fa-edit"></i> Edit</a></li>
                    <!-- <li role="menuitem"><a class="dropdown-item" (click)="resetPassword(user)"><i class="fa fa-redo"></i> Reset Password</a></li> -->
                    <li role="menuitem"><a class="dropdown-item" (click)="delete(user.Id)"><i class="fa fa-trash"></i> Delete</a></li>
                </ul>
              </div>
            </td>
            <td *ngFor="let col of cols">{{col.type ? col.type.transform(data[col.field], col.arg1, col.arg2, col.arg3, col.arg4) : data[col.field]}}</td>
          </tr>
        </ng-template>

这是我在 .Net 中的 WebApiConfig.cs 文件。

 public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services
        config.EnableCors(new EnableCorsAttribute("http://localhost:51352", headers: "*", methods: "*"));

        // Web API routes
        config.MapHttpAttributeRoutes();

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

        // Apply camelCase notation
        var settings = config.Formatters.JsonFormatter.SerializerSettings;
        settings.ContractResolver = new CamelCasePropertyNamesContractResolver();
        settings.Formatting = Formatting.Indented;

        config.Filters.Add(new AuthorizeAttribute());
    }
}

您的帮助将不胜感激

我已经更新了 user.component.html 文件。

<ul *dropdownMenu class="dropdown-menu" role="menu">
                    <li role="menuitem"><a class="dropdown-item" (click)="edit(data.id)"><i class="fa fa-edit"></i> Edit</a></li>
                    <!-- <li role="menuitem"><a class="dropdown-item" (click)="resetPassword(user)"><i class="fa fa-redo"></i> Reset Password</a></li> -->
                    <li role="menuitem"><a class="dropdown-item" (click)="delete(data.id)"><i class="fa fa-trash"></i> Delete</a></li>
                </ul>

在邮递员上试过这个之后。Api 运行良好，所以我觉得它来自 Angular 应用程序，没有通过id下面邮递员的 .Image 。 图片来自邮递员

标签： .netangularapiangular5angular6

解决方案

将路由属性添加[Route("api/Account/{Id}")]到DeleteUser(string id)控制器中的方法，以便id可以从 api url 读取参数

您还需要将Id字符串作为字符串发送到 api

文件中的更新deleteUser函数user.service.ts如下

return this.http.delete(`${this.remoteServerBaseUrl}/api/Account/"${Id}"`')

推荐阅读