.Net 6 c# APi 和 Angular 之间的通信问题

Posted 2023-03-31

【中文标题】.Net 6 c# APi 和 Angular 之间的通信问题

【英文标题】：Problem with comunication between .Net 6 c# APi and Angular

【发布时间】：2021-12-27 18:55:24

【问题描述】：

我在 .Net 6 中的 .Net web api 中有三个功能。

第一：

    [HttpPost("name/name")]
    public async Task<ActionResult<Book>> PostOrder(string name, Book book)
    
        try
        
            var id = _context.Order.Where(el => el.User == name).Select(el => el.OrderID).FirstOrDefault();

            if (id > 0)
            
                book.OrderID = id;
                _context.Book.Update(book);
                await _context.SaveChangesAsync();

                return book;
            
            else
            
                Order o = new()
                
                    User = name
                ;
                _context.Order.Add(o);
                await _context.SaveChangesAsync();

                id = _context.Order.Where(el => el.User == name).Select(el => el.OrderID).FirstOrDefault();

                book.OrderID = id;
                _context.Book.Update(book);
                await _context.SaveChangesAsync();

                return book;
              
        
        catch (Exception e)
        
            Console.WriteLine(e.Message);
            return NotFound();
        
    

第二和第三

    [HttpPut("id")]
    public async Task<IActionResult> PutUser(int id, User user)
    
        if (id != user.id)
        
            return BadRequest();
        

        _context.Entry(user).State = EntityState.Modified;

        try
        
            await _context.SaveChangesAsync();
        
        catch (DbUpdateConcurrencyException)
        
            if (!UserExists(id))
            
                return NotFound();
            
            else
            
                throw;
            
        

        return NoContent();
    

    // POST: api/Users
    [HttpPost]
    public async Task<ActionResult<User>> PostUser(User user)
    
        _context.User.Add(user);
        await _context.SaveChangesAsync();

        return CreatedAtAction("GetUser", new  id = user.id , user);
    

我习惯用 Angular 来交流： 第一：

addToOrder(user: string, book: Book): Observable<Book> 
 const url = `$this.orderUrl/name/$user`;
 return this.http.post<Book>(this.orderUrl, book, this.httpOptions).pipe(
   tap(_ => this.log(`added book to order for $user`)),
   catchError(this.handleError<Book>('addToOrder'))
 );

第二和第三：

updateUser(user: User): Observable<any> 
 const url = `$this.usersUrl/$user.id`;
 return this.http.put(url, user, this.httpOptions).pipe(
   tap(_ => this.log(`updated users id=$user.id`)),
   catchError(this.handleError<any>('updateUser'))
 );


addUser(user: User): Observable<User> 
  return this.http.post<User>(this.usersUrl, user, this.httpOptions).pipe(
  tap((newUser: User) => this.log(`added user w/ id=$newUser.id`)),
  catchError(this.handleError<User>('addUser'))
  );

首先没有工作。没有与.Net 通信，错误数据在哪里？我找不到任何东西。 Mayby 参数不正确。但我没有看到。任何其他功能正常工作，我已经响应并在调试中请求服务器，但在第一次请求时没有。仅在 POSTMAN 或 SWAGGER 中。

我有 Angular 的订单：

getOrder(user: string): Observable<Book[]> 
 const url = `$this.orderUrl/name/$user`;
 return this.http.get<Book[]>(url)
  .pipe(
   tap(_ => this.log(`fetched order for name=$user`)),
   catchError(this.handleError<Book[]>('getBooks', []))
 );

正在努力。

当我尝试使用 Postman 或 Swagger 时，我看到了响应。

P.S 当我在调试时复制地址时：

const url = `$this.orderUrl/name/$user`;

并尝试在邮递员中添加 JSON 中的书：

 "bookID": 4,
 "title": "string2",
 "author": "strin2g",
 "isbn": "stri2ng"
 

我已经回复了。

【问题讨论】：

您确定您的url 字符串正确吗？您的代码似乎不是正确的 URL 编码参数和路由值。你也不应该在 TypeScript 中使用 any。

当我从调试复制并粘贴到 Postman 并添加 Book 时就可以了。好的，我没有注意到这一点。我也这么认为，但我找不到解决方案。但其他 Url 正在工作。

我敢打赌，你不会在任何地方订阅调用 API 来触发。

没有。我有： addToOrder(book: Book): void this.orderService.addToOrder("a", book) .subscribe(book => this.books.filter(u => u !== book);; ) ;我看到错误 405：UserService: addToOrder failed: 405 localhost:7216/api/orders 的 Http 失败响应：405 OK

【参考方案1】：

默认情况下 POST 方法参数必须全部在请求正文中(FromBody)。

GET方法参数必须全部在请求查询中(FromUri).

要更改此行为，您需要添加参数绑定。

.net Parameter Binding docs

变化

[HttpPost("name/name")]
public async Task<ActionResult<Book>> PostOrder(
    [FromUri] string name, 
    [FromBody] Book book)

    // CODE

【讨论】：

Mayby 问题出在其中，但是当我更改为： public async Task> PostOrder([System.Web.Http.FromUri]string name, [System.Web.Http. FromBody]Book book）这没有工作。为什么要在邮递员那里工作？

您将地址设置为“mydomain/name/name”。打开浏览器，对页面执行请求并检查 URL (Check RoutePrefixAttribute on Controller).

网址必须与您在 Postman 上使用的网址相同。

【参考方案2】：

好的。我有一个答案。我有一个：

   const url = `$this.orderUrl/name/$user`;
return this.http.post<Book>(this.orderUrl, book, this.httpOptions)

但必须是：

   const url = `$this.orderUrl/name/$user`;
return this.http.post<Book>(url, book, this.httpOptions)

对不起。我没注意到。