一步一步从asp.net core mvc中访问asp.net core WebApi

"从asp.net core mvc中访问asp.net core WebApi"看到这个标题是不是觉得很绕口啊，但的确就是要讲一讲这样的访问。前面我们介绍了微信小程序访问asp.net core webapi(感兴趣的童鞋可以看看前面的博文有关WEBAPI的搭建)，这里我们重点不关心如何搭建asp.net core webapi，因为前面有好几篇博文都已经讲到它了。这里我们重点要说的是如何使用.net core mvc来访问webapi。
注明：我这里使用的是vs2022 17.11.5版，使用了newtonsofot.json做解析，使用了SqlSugar数据库orm框架。

文章目录

一、准备webapi
- 1、准备模型
- 2、准备控制器（api端）
二、.net web MVC端的设计
- 1、controller控制器的设计
- 2、viewer视图页的设计
三、program的配置
- （一）、关于httpclient
- - 1.`System.Net.Http.HttpClient`服务的作用
  - 2. 在访问Web API过程中的作用
- （二）、program.cs配置httpclient
四、展示信息的视图页
- 1、将控制器数据传递给视图的原理
- 2、传递给视图的两种方法
- - a、粗暴显示
  - b、使用Viewbag和viewdata
  - b、使用模型

请关注文章原出处： https://haigear.blog.csdn.net/article/details/143609860

一、准备webapi

1、准备模型

webapi的模型我们这里准备好了，模型类的代码中我们简单的设置了四个属性，如下代码：

  [SugarTable("Book")]
  public class Book
  {
      [SugarColumn(IsPrimaryKey = true, IsIdentity = true)]
      public int Id { get; set; }
      public string ?Context { get; set; }
      public string ?Desc { get; set; }
      public bool Status { get; set; }
  }

如果你想像我一样偷懒，让ID号为自增长类型，而且是主键的话，记得加上这句话

 [SugarColumn(IsPrimaryKey = true, IsIdentity = true)]

如果拆成两句话来说：[SugarColumn(IsIdentity = true)] 表示设置为自增，[SugarColumn(IsPrimaryKey = true)] 表示设置为主键。不要忘记设置了，否则在你提交的表单中如果id为空，数据库就不会自己为你补上，那么你的主键的唯一性就会导致报错，因为你的id号肯定会在第二条记录加入的时候就开始重复。

2、准备控制器（api端）

api端的控制器主要是负责接受mvc端发送的get、put、delete、update四种请求的，少一个咱们的请求都会找不到对应负责的“部门”来服务，所以咱们都把他们实现一次，代码如下：

using Microsoft.AspNetCore.Mvc;
using WEBAPI.Models;

namespace WEBAPI.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class BookController : ControllerBase
    {
        private readonly QbusterContext _context;
        public BookController(QbusterContext context)
        {
            _context = context;
        }
        // 获取所有书本
        [HttpGet]
        public IActionResult GetBooks()
        {
            var books = _context.Db.Queryable<Book>().ToList();
            return Ok(books);
        }

        // 添加书本
        [HttpPost]
        public IActionResult AddBook(Book book)
        {       
            _context.Db.Insertable(book).ExecuteCommand();
            return Ok(book.Id);
        }

        // 更新书本
        [HttpPut]
        public IActionResult UpdateBook(Book book)
        {
            _context.Db.Updateable(book).ExecuteCommand();
            return Ok();
        }

        [HttpGet("{id}")]
        public IActionResult GetBookById(int id)
        {
            // 在这里实现获取特定Book的逻辑
            var book = _context.Db.Queryable<Book>().Where(b => b.Id == id).First();
            if (book == null)
            {
                return NotFound();
            }
            return Ok(book);
        }

        // 删除书本
        [HttpDelete("{id}")]
        public IActionResult DeleteBook(int id)
        {
            _context.Db.Deleteable<Book>(id).ExecuteCommand();
            return Ok();
        }
    }
}

请关注文章原出处：https://haigear.blog.csdn.net/article/details/143609860

二、.net web MVC端的设计

这里应该是我们的重点章节了，我们在设计之前应该很清楚一点，那就是我们的MVC其实可以是没有Model部分的，为什么呢？因为我们的数据来自API端，当然，你也可以设计一个完全和API端一模一样的模型。其实，我们完全可以直接将API的model直接引入即可（假定你是可以拿到api的dll，或者api和MVC就是在一台机器开发的话）。

1、controller控制器的设计

我们来看最基础最基本的控制器，这个控制器仅仅实现的就是在index方法中利用httpclient发送一个get请求的指令的功能：

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using QBuster_API.Models;

namespace WebAppToAPI.Controllers
{
    public class BookController : Controller
    {
        private readonly HttpClient _httpClient;

        public BookController(HttpClient httpClient)
        {
            _httpClient = httpClient;
        }

        public async Task<IActionResult> Index()
        {
            var response = await _httpClient.GetAsync("http://localhost:5049/api/Book");
            if (response.IsSuccessStatusCode)
            {
                var content = await response.Content.ReadAsStringAsync();
                // 处理返回的数据
                return View();
            }
            else
            {
                // 处理错误情况
                return BadRequest();
            }
        }
    }
}

如果我们单独在浏览器中访问api的地址：http://localhost:5049/api/Book我们会得到下面的返回结果，这些也正是我们要最后要呈现在视图中的内容。
在这里插入图片描述
如果我们的控制器没有问题，将来控制器的content中就可以通过断点看到上面的内容，也就是这句话中：

var content = await response.Content.ReadAsStringAsync();

这句话完成了读取工作。

2、viewer视图页的设计

上面我们的控制器应该算作是完成了它的使命，拿到了从api请求过来的数据了。接下来就要看视图的了。视图的工作就是把上面的内容显示在页面上。这里我们只为展示原理，所以，我们一开始并不需要在视图文件中写过多少内容进去。先看看它是否能够运行，首先我们建立一个新的视图页面，名称和控制器中的index方法名一致，也叫做index.cshtml：

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{

}

<p>这访问api的测试页面</p>

特别简单，我们的目的就是让它能够无错误的显示即可。运行试试：
在这里插入图片描述
哦豁，不那么简单吧。其实也简单，问题出在没有在program中配置好httpclient而已。
请关注文章原出处：https://haigear.blog.csdn.net/article/details/143609860

三、program的配置

前面两个章节只是完成了基本的“基础”准备，剩下的就是我们如何通过配置来使其可以正常访问。
要想访问api，我们这里就必须在program.cs中注册httpclient服务，否则无法解析 System.Net.Http.HttpClient 类型的服务。

（一）、关于httpclient

这里索性就把httpclient介绍一下，避免我们有小白路过因不了解它而迷路（开玩笑）。

1.`System.Net.Http.HttpClient`服务的作用

发送HTTP请求：
- HttpClient是用于发送HTTP请求的主要工具。它可以发送各种类型的HTTP请求，如GET、POST、PUT、DELETE等。例如，在一个简单的场景中，如果要从一个新闻网站获取新闻数据，你可以使用HttpClient发送一个GET请求到新闻网站的API端点。
- 它提供了一种简单且灵活的方式来构建和发送请求。可以通过设置请求头（Headers）来指定诸如内容类型（Content - Type）、授权信息（如Authorization）等。例如，在访问需要身份验证的API时，可以在请求头中添加身份验证令牌，如下所示：
```
var client = new HttpClient();
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", "your_token");
```
处理HTTP响应：
- 当发送请求后，HttpClient会接收并处理HTTP响应。它可以获取响应状态码（如200 OK、404 Not Found、500 Internal Server Error等），这对于判断请求是否成功非常重要。例如，如果响应状态码是200，表示请求成功，你可以继续处理响应内容。
- 可以读取响应内容，响应内容可以是多种格式，如JSON、XML、纯文本等。如果响应是JSON格式的数据，你可以使用System.Text.Json（在.NET中）等库将其反序列化，例如：
```
var response = await client.GetAsync("https://api.example.com/data");
if (response.IsSuccessStatusCode)
{
    var content = await response.Content.ReadAsStringAsync();
    var data = System.Text.Json.JsonSerializer.Deserialize<YourDataType>(content);
}
```

2. 在访问Web API过程中的作用

建立连接和通信：
- 它是客户端（如ASP.NET Core MVC应用）和Web API之间建立通信的桥梁。当应用需要从Web API获取数据（如获取用户信息、产品列表等）或者向Web API发送数据（如提交订单、更新用户资料等）时，HttpClient负责发起请求并等待响应。
实现请求的定制化：
- 可以根据Web API的要求定制请求。例如，有些Web API可能要求在请求头中包含特定的版本号或者自定义的元数据。HttpClient可以轻松地设置这些请求头来满足API的要求。
- 对于POST和PUT请求，可以设置请求体（RequestBody）的内容。如果要向Web API发送一个新的用户注册信息，HttpClient可以将包含用户姓名、密码等信息的对象序列化为JSON格式（或其他格式）并作为请求体发送，如下所示：
```
var user = new User
{
    Name = "John Doe",
    Password = "password123"
};
var json = System.Text.Json.JsonSerializer.Serialize(user);
var content = new StringContent(json, Encoding.UTF8, "application/json");
var response = await client.PostAsync("https://api.example.com/users", content);
```
错误处理和重试机制：
- 当请求出现错误时，如网络故障或者API返回错误状态码，HttpClient可以作为基础来构建错误处理机制。可以根据响应状态码来采取不同的措施，如显示友好的错误信息给用户或者进行重试。
- 例如，可以在收到401 Unauthorized状态码时，提示用户重新登录，或者在收到500 Internal Server Error状态码时，等待一段时间后进行重试。

（二）、program.cs配置httpclient

我们还清楚的记得，上面我们在写好控制器后并不能成功的访问我们的api端。为什么呢？就是这里没有配置好httpclient。下面是配置的代码：

//前面省去五万字
builder.Services.AddControllersWithViews();
builder.Services.AddHttpClient("MyHttpClient", client =>
{
    client.BaseAddress = new Uri("http://localhost:80000/api");
});
var app = builder.Build();
//后面省去五万字

配置好后，我们就可以来访问了。看看效果：
在这里插入图片描述
是的，就是要的这个效果，尽管它比较简单。所以，我们接下来就可以考虑将从api上获取的数据完整的显示在页面上了。认认真真的设计一个视图。
请关注文章原出处：https://haigear.blog.csdn.net/article/details/143609860

四、展示信息的视图页

1、将控制器数据传递给视图的原理

在ASP.NET Core MVC 中，从控制器传递数据到视图有多种方法。在上述代码中，你可以将content数据存储在一个视图模型（ViewModel）或者ViewBag/ViewData中，然后在视图中访问它。为了小白能够流畅阅读后面的内容，这里首先介绍一下他们两个吧。

ViewBag和ViewData在ASP.NET Core MVC中的位置和本质
- ViewBag和ViewData是ASP.NET Core MVC框架提供的用于在控制器和视图之间传递数据的机制。作用就是为MVC框架内部的对象来管理数据传递。
- ViewData的底层实现
  - ViewData是一个ViewDataDictionary类型的对象，它本质上是一个字典，用于存储键值对。在ASP.NET Core MVC的内部机制中，它是在控制器和视图之间传递数据的基础结构之一。
  - 这个字典存储的数据可以是各种类型，如字符串、整数、对象等。当控制器将数据存储在ViewData中时，实际上是将数据作为键值对添加到ViewDataDictionary中。例如，在控制器中这样操作：
```
public IActionResult Index()
{
    ViewData["Message"] = "Hello, World!";
    return View();
}
```
  - 这里ViewData存储了一个键为Message，值为Hello, World!的键值对。
- ViewBag的底层实现和与ViewData的关系
  - ViewBag是一个动态类型的属性，它在底层是基于ViewData实现的。当你访问ViewBag的属性时，实际上是在访问ViewDataDictionary中的元素。
  - ASP.NET Core MVC利用C#的动态语言特性，让ViewBag看起来像是一个具有动态属性的对象。例如，在控制器中：
```
public IActionResult Index()
{
    ViewBag.Message = "Hello, World!";
    return View();
}
```
  - 这与使用ViewData的效果是类似的，在底层，ViewBag.Message的赋值操作实际上是在ViewDataDictionary中添加一个键为Message的值。不过，由于ViewBag是动态类型，没有编译时检查，所以在使用过程中需要更加小心，避免运行时的类型错误。
- 它们在MVC框架中的作用位置
  - 在控制器中，数据被添加到ViewData或ViewBag中，然后在视图渲染过程中，MVC视图引擎（如Razor视图引擎）会读取这些数据。当视图（.cshtml文件）被渲染时，它可以访问存储在ViewData或ViewBag中的数据，从而实现控制器到视图的数据传递。例如，在Razor视图中：
```
@ViewData["Message"]
或者
@ViewBag.Message
```
  - 这样就可以获取控制器传递过来的数据并在视图中显示出来。它们是MVC框架中用于在不同层次（控制器和视图）之间灵活传递数据的工具，是框架设计的一部分，没有存储在特定的文件中，而是在请求处理和视图渲染的过程中发挥作用。

2、传递给视图的两种方法

a、粗暴显示

视图页中，我们就直接粗暴的拿来用，强制将各种字段类型转化为string来显示。只要将控制器中的content直接作为view的参数返回给视图即可，代码如下：

var content = await response.Content.ReadAsStringAsync();
return View(content);

既然是粗暴的行为，那结果自然是惨不忍睹，就会出现报错，但能够看到数据显示：
在这里插入图片描述
看来我们还是得文明一点，做个有文化的文明人啊。

b、使用Viewbag和viewdata

使用他们就显得文明一些，毕竟他们是asp.net core内置的传递工具，官方的人啊，我们来看代码：
在控制器中，将content首先装入viewbag中

public async Task<IActionResult> Index()
{
    var response = await _httpClient.GetAsync("https://example.com/api/data");
    if (response.IsSuccessStatusCode)
    {
        var content = await response.Content.ReadAsStringAsync();
        ViewBag.Content = content;
        return View();
    }
    else
    {
        // 处理错误情况
        return BadRequest();
    }
}

然后在视图页中显示，页面代码如下：

<div>
    @ViewBag.Content
</div>

在这里插入图片描述

果然文明了些，但是还差一点“优雅”，这里我们来给视图的代码给修改一下：

@using QBuster_API.Models;
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        @if (!string.IsNullOrEmpty(ViewBag.Content))
        {
            var data = Newtonsoft.Json.JsonConvert.DeserializeObject<List<Book>>(ViewBag.Content);
            <table class="table table-striped">
                <thead>
                    <tr>
                        <!-- 根据你的数据结构替换以下表头 -->
                        <th>内容</th>
                        <th>描述</th>
                        <th>状态</th>
                        <!-- 添加更多表头 -->
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in data)
                    {
                        <tr>
                            <!-- 根据你的数据结构替换以下表格内容 -->
                            <td>@item.Context</td>
                            <td>>@item.Desc</td>
                            <td>>@item.Status</td>
                            <!-- 添加更多表格内容 -->
                        </tr>
                    }
                </tbody>
            </table>
        }
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

</html>

在这里插入图片描述
算了，上面的这种Viewbag的方式也就这样了。来看看使用模型的方式吧。

b、使用模型

使用模型是最好的选择，但最不方便，需要你建立一个视图，当然，我们首先还是在控制器中修改一下代码，主要是将content装入视图中：

public async Task<IActionResult> Index()
{
    var response = await _httpClient.GetAsync("https://localhost/api/data");
    if (response.IsSuccessStatusCode)
    {
        var content = await response.Content.ReadAsStringAsync();
        var viewModel = new BookViewModel
        {
            Content = content
        };
        return View(viewModel);
    }
    else
    {
        // 处理错误情况
        return BadRequest();
    }
}

为了省事，我们把模型类（最简单的模型类）偷偷的丢在了控制器后面（和控制器同一个文件）

 public class MyViewModel
 {
     private string _content;
     public string Content
     {
         get { return _content; }
         set
         {
             if (value == null)
             {
                 throw new ArgumentNullException("Content不能为null");
             }
             _content = value;
         }
     }

然后就是我们的视图页面了。首先看个粗暴一些的，这和前面的Viewbag的效果一样，视图也的代码：

@using WebAppToAPI.Controllers;
@model MyViewModel;
<div>
    @Model.Content
</div>

注意，这里要引入controller文件夹，不然MyViewModel
运行效果：
在这里插入图片描述

要美化一下，列成表格，方法和Viewbag的做法一样，这里就不赘述了。

好了，感兴趣的同学可以继续关注我的博客。文章可能随时更新，请关注文章原出处：https://haigear.blog.csdn.net/article/details/143609860