C#学习系列之如何使用webform调用人脸识别接口

背景

在人工智能技术迅猛发展的今天，纵观整个行业的发展，人脸识别几乎是每个公司的必争之地，如果现在行业里获得快速赋能，那就来使用腾讯云的人脸识别接口赋能你的业务。在系列学习文章里，我分别介绍了如何一步一步通过控制台调用人脸识别接口，如何通过winform调用人脸识别接口，在接下来得这篇文章里，我介绍如何使用webform调用人脸识别接口，希望你能快速掌握，给你的企业赋能。webform设计的内容也比较多，我们就一步步开始吧。

C# web form应该如何去学

学习web form推荐使用如下的教程：

• 菜鸟教程 https://www.runoob.com/aspnet/aspnet-intro.html
• ASP.NET的官网文档 https://dotnet.microsoft.com/learn/aspnet/hello-world-tutorial/intro

什么是web form？

几个最基本的概念

ASP（Active Server Pages 动态服务器页面）是一种生成动态交互性网页的强有力工具。

ASP.NET 支持三种不同的开发模式：Web Pages（Web 页面）、MVC（Model View Controller 模型-视图-控制器）、Web Forms（Web 窗体）。

Web Pages（Web 页面）：最简单的 ASP.NET 模式，与 PHP 和经典 ASP 相似，内置了数据库、视频、图形、社交媒体等模板和帮助器。

MVC 将 Web 应用程序分成 3 个不同的组成部分：

• 模型负责数据
• 视图负责显示
• 控制器负责输入

Web Forms（Web 窗体）： 传统的 ASP.NET 事件驱动开发模式：带有服务器控件、服务器事件和服务器代码的网页。

ASP 文件是什么？

• ASP 文件与 HTML 文件类似
• ASP 文件可包含文本、HTML、XML 和脚本
• ASP 文件中的脚本可在服务器上执行
• ASP 文件的文件扩展名是 ".asp"

web form学习中的重要笔记

MVC的结构

为什么要放出这个部分的笔记呢？因为这一部分对于我们的业务侧排障非常有帮助，我们的接口就是通过Client向服务端发送request请求，然后服务端返回调用的结果。这对于阅读SDK源码是很有帮助的。

使用web form调用人脸识别接口

具体的操作步骤

在我的学习系列文章里，已经有了使用winform调用人脸识别接口的应用，接下来，在这篇文章介绍如何使用web form调用人脸识别接口的。其实也是分为两部分，一部分是UI的设计，然后是后端逻辑的设计，逻辑设计部分只需要做把数据喂给接口，接口获取数据，接口调用云端算法，获取返回结果。

新建一个空的项目

1. 直接在同一个解决方案里新建一个项目，右键单击 解决方案，选择添加，选择新建项目，选择ASP.NET WEB 应用程序，然后选择下一步。

2. 命名项目名称为Web Demo，然后点击创建

选择一个空的项目类型

项目初始化界面

3. 在项目创建好之后，我们发现webform的项目不像winform项目那样直接就有一个设计的界面，而是需要我们自己手动添加一个后缀名为.aspx的文件，添加方法 如下

第一步，右键项目名称，

第二步，选择添加，

第三步，选择新建项，

第四步，找到web窗体，

第五步，设置名称为WebForm1.aspx，

第六步，单击添加。

4. 得到如下初始界面的代码，左边是webform静态页面的代码，工程目录里多了一个文件

初始界面

下面这部分代码保持默认的，我们不要乱去修改，在红色方框部分找出可视化界面即可。

5. 选择上图中红色方框中的拆分，这样又可以看到代码，又可以有可视化的界面。

6. 在界面的左侧点击工具箱，会调出工具箱，从工具箱里选择Button和TextBox

UI界面设计

在做web form这一部分，网页设计需要简单快速学习HTML,CSS,JAVASCRIPT，不知道的再回去查阅相关资料。web form 要实现我们的需求，只需要用到文本框，按钮。

设计好的界面如下

在设计界面上单击鼠标右键，选择在浏览器中查看(google chrome)(B),在浏览器中就能看到运行的界面效果。

功能代码实现

给按钮添加功能

双击按钮进入代码实现部分，把我们从腾讯云控制台拷贝过来的代码放在这里，但是还需要做修改，可以先测试拷贝过来设置好参数的代码，但是会遇到一个界面卡主的问题，在下面给出解决办法。

我们发现还有很多红线，按照我们前面的方法使用Nuget安装依赖包就可以了。

这时候，红色波浪线都消除完了。

消除波浪线之后

点击运行

webform运行结果

界面卡主问题的解决

关键的部分是解决同步调用一步的问题，由于完整的代码我还有写修改，暂时还没像上篇文章那样直接贴出来。

我们的接口的通用调用代码

DetectFaceResponse resp = client.DetectFace(req).
                    ConfigureAwait(false).GetAwaiter().GetResult();
                Console.WriteLine(AbstractModel.ToJsonString(resp));

同步异步调用的解决

新版本SDK中同时提供了异步接口和同步接口，同步接口统一在异步接口之后添加了Sync后缀

req = DetectFaceRequest.FromJsonString<DetectFaceRequest>(strParams);
                DetectFaceResponse resp = client.DetectFaceSync(req);
                //ConfigureAwait(false).GetAwaiter().GetResult();
                Console.WriteLine(AbstractModel.ToJsonString(resp));

这部分的代码，我们注释掉了 ConfigureAwait(false).GetAwaiter().GetResult()，然后在接口名称之后添加Sync，然后就可以解决页面卡主的问题，在这个地方我也是花了挺多的时间去寻找解决办法。

在GitHub的源码上有说明

其实，和在前面实现win form的时候是类似的，对于输入的base64值部分，我们输入base64值到文本框，然后设置按钮的调用，获取base64值，作为参数，就是参数部分的设置也是要注意的，多一个空格少一个空格都会出错，这一步要注意，因为同步异步的问题，界面会卡主，所以就是要解决同步调用异步的问题，只要返回结果，把结果放到文本框就可以了。

同步异步调用的参考文章：https://cloud.tencent.com/developer/article/1395819

总结

在这篇文章里，介绍web的学习，使用webform调用人脸识别人脸检测接口，如何解决调用页面卡主的问题。这是一系列的文章，我还会逐一的完善，后面我还会把我所学到的分享给大家。通过这一系列的文章，相信你也可以更好的理解控制台，winform，webform如何调用人脸识别接口，如何解决同步调用异步调用的问题。别开心太早，这才是开启你业务的第一步。C#学习内容之多，还可能会走弯路，到时候我会把我的经验毫无保留的分享给各位，希望你们不要再去走弯路，而能直接使用。在逐步学习过程中，发现了其中的不足之处，还会检查更新完善。