一步一步从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框架。

请关注文章原出处： 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中，然后在视图中访问它。为了小白能够流畅阅读后面的内容，这里首先介绍一下他们两个吧。

1. 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