通过HttpClient调用ASP 网网页应用编程接口示例

时间：2021-09-05 来源：互联网编辑：宝哥软件园浏览：次

在前面两篇文章中我们介绍了ASP .网络应用编程接口的基本知识和原理，并且通过简单的实例了解了它的基本(CRUD)操作。我们是通过JQuery和埃阿斯对网络应用编程接口进行数据操作。这一篇我们来介绍一下使用HttpClient的方式来对网络应用编程接口进行数据操作。

这里我们还是继续使用对产品的操作实例来演示一下它的基本应用。

创建ASP .网络应用编程接口应用程序

在对中选择创建一个ASP .网络应用应用程序，在向导的下一个窗口中选择网络应用编程接口模板。

创建模型

这里我们在模型文件夹下创建一个简单的乘积模型类，用来传递数据。

在模型文件夹上点击右键，选择添加-类别

公共类产品{ public int ProductID { get设置；}公共字符串ProductName { get设置；}公共十进制价格{获取设置；}公共int Count { get设置；}公共字符串描述{ get设置；} }创建控制辊

接着在控制器文件夹下创建一个应用编程接口控制器，命名为产品控制器。

在控制器文件夹上点击右键，选择添加-控制器，在弹出向导中选择网络应用编程接口2控制器-空

在向导下一步中输入应用编程接口控制器名称为产品控制器。

因为我们需要通过HttpClient的方式来调用Web API，所以这里我们还需要创建一个手动音量调节控制器。

同样在控制器文件夹上点击右键，选择添加-控制器，在弹出向导中选择MVC 5控制器-空

在向导下一步中输入MVC 5控制器名称为“ProductController”。

创建网络应用编程接口方法(CRUD)

这里我们依然使用模拟的数据创建简单的网络应用编程接口方法。前面的章节有详细讲解到，这里就不细说了。直接上代码。

公共类产品控制器： API控制器{//Mock产品列表公共静态列表产品列表=initproductmocktadelist()；私有静态列表产品initproductmocktatalist(){ 0返回新列表产品(){新产品{ProductID=1，ProductName='产品' a '，价格=1000000,计数=5,描述='描述一个' }，新产品{ProductID=2，ProductName='产品' b '，价格=200000,计数=2,描述='描述B'}，新产品{ProductID=3，产品名称='产品' c '，价格=500000,计数=8,描述='描述C'}，} public IEnumerableProduct Get(){ return ProductList；}公共产品获取(int id){ 0返回产品列表。其中(p=p.ProductID==id).first ordefault()；}公开作废帖子([来自正文]产品产品){ var last Product=ProductList .按中心排序(p=p . ProductID).first ordefault()；int newProductID=lastProduct .产品id 1；产品ProductID=NewProductIdProductList .添加（产品);}公共void Put([来自正文]产品产品){ var current Product=ProductList .其中(p=p.ProductID==product .ProductID ).first ordefault()；if (currentProduct！=null){ foreach(ProductList中的定义变量项){ if (item .产品标识等于（当前产品ProductID)) { item .ProductName=产品ProductName .项目。价格=产品。价格；项目。计数=产品。计数；项目。描述=产品。描述；} } } }公共void Delete(int id){ Product Product=Product list .其中(p=p.ProductID==id).first ordefault()；产品列表.移除（产品);} }通过JQuery和埃阿斯调用手动音量调节控制器，在手动音量调节控制器中通过HttpClient调用网络应用编程接口

网络应用编程接口中的(CRUD)方法创建完成，接下来我们就分别来看看对各个方法的数据操作。

1.获取产品列表

打开我们创建好的MVC 5控制器文件产品控制器。使用HttpClient的方式来调用我们网络应用编程接口中的列表方法。

首先需要引入系统. Net。超文本传送协议（Hyper Text Transport Protocol的缩写）

使用系统. Net。超文本传送协议（Hyper Text Transport Protocol的缩写）接下来为我们的网络应用编程接口地址定义一个公共静态变量。

public static readonly Uri _ BaseAddress=new Uri(' http://localhost :21853/')；////GET:/产品/公共行动结果索引(){ return View()；} public JsonResult GetProductList(){ ListProductList=null；上呼吸道感染地址=新的Uri(_baseAddress，'/API/products ')；使用(var Http客户端=新Http客户端()){ var response=Http客户端.GetAsync(地址)。结果；如果(响应issuessstatuscode)ProductList=响应内容。readasasynclistproduction().结果；}返回Json(productList，JsonRequestBehavior .允许get)；}这里我们需要通过点击按钮，通过埃阿斯调用来获取产品列表数据，所以这里我们使用JsonResult返回数据。

接下来，我们就来创建视图。

文件夹视图-产品下创建一个查看，名为索引。打开索引视图，修改页面代码如下：

@ { Layout=null}！DOCTYPE html html head meta name=' viewport ' content=' width=device-width '/title index/title script src=' http : ~/Scripts/jquery-1。10 .2 .量滴js ' type=' text/JavaScript '/script/head dy div style=' background-color : # 008000；padding: 10pxmargin: 5px宽度： 45%;div style=' font-weight : bold；边距-底部： 5px'获取产品列表/div div style=' padding-bottom :5 px；'输入id=' btnGetProductList '名称=' btngetpproductlist '类型='按钮'值='获取产品列表'/div div id='产品'/div/div/body/html接着，我们要做的是，当点击获取产品列表按钮是加载产品列表，代码实现如下：

$(' # btngetpproductlist ').单击(函数(){ $).Ajax({ URL : '/Product/GetProductList '，type: 'GET '，dataType: 'json' }).成功（函数（结果){ DisplayProductList(结果)};}).错误（函数（数据){ alert(数据));});});//显示产品列表函数DisplayProductList(结果){ var ProductTable=$(' table单元格填充=' 3 '单元格间距=' 3 '/table ')；var productTableTitle=$(“trthProduct ID/thththproduct Name/ththththprice/ththththcount/thththdescription/th/tr”)；producttabletitle。appendo(ProductTable)；for(var I=0；我结果。长度；I){ var ProductTableContent=$(' trtd '结果[i].产品id/' tdtd '结果[i].产品名称/' tdtd '结果[i].价格'/tdtd '结果[i].计数'/tdtd '结果[i].描述/TD/tr ')；ProductTableContent。appendo(ProductTable)；} $(“# products”).html(ProductTable)；}好了，运行代码。

点击获取产品列表按钮之前如下：

点击获取产品列表按钮之后如下：

产品数据列表加载成功。

2.获取单条产品数据

这里我们的做法是在搜索框里输入产品标识，然后点击获取产品按钮，查找出这条产品信息。

首先，我们先完成在产品控制器中使用HttpClient调用网络应用编程接口中获取单条产品数据的方法。

public JSonResult GetSingleProducT(int id){ Uri地址=new Uri(_baseAddress，'/API/products/' id)；产品产品=空；使用(var Http客户端=新Http客户端()){ var response=Http客户端.GetAsync(地址)。结果；如果(响应IsSuccessStatusCode)产品=响应内容。ReadAsAsyncProduct().结果；}返回Json(产品，JsonRequestBehavior .允许get)；}接着，来到索引视图页面中添加一个搜索产品标识的文本框以及一个获取产品的按钮。

div style='底色： # 9ACD 32padding: 10pxmargin: 5px宽度： 45%;div style=' font-weight : bold；边距-底部：5 pxGet Single Product/div Product id :输入id=' txtSearchProductID '名称=' txtSearchProductID '类型=' text '/输入id=' btnget Product '名称=' btnget Product '类型=' button '值=' Get Prdouct '/div id=' Product '/div/div为按钮获取产品按钮添加埃阿斯方法

$(' # btngetpproduct ').单击(函数(){ if($(' # TxTsearchProductid ')).val().trim()！='') { $.Ajax({ URL : '/Product/GetSingleProduct？id=' $('#txtSearchProductID ').val()，type: 'GET '，dataType: 'json' }).成功（函数（结果){ if(结果！=null) { $('#product ').html('产品ID: '结果ProducT id“br/”产品名称： '结果产品名称“br/”计数：结果。计算" br/"价格：结果。价格br/' '描述： '结果。描述);} else { $('#product ').html(" ")；} }).错误（函数（数据){ alert(数据));});} });运行程序，加载产品列表。

点击获取产品按钮前：

这里我们查找产品标识为一的数据

我们看到产品标识为一的数据成功获取。

3.新增一条产品

这里我们创建四个文本框，用来输入产品名称、数量、价格、描述的信息以及一个创建产品按钮。

首先，我们先完成在产品控制器中使用HttpClient调用网络应用编程接口中新增一条产品数据的方法。

公共JsonResult创建产品(Product Product){ bool创建成功=true上呼吸道感染地址=新的Uri(_baseAddress，'/API/products ')；使用(var Http客户端=新Http客户端()){ var response=Http客户端.PostAsJsonAsync(地址，产品)。结果；if(！回应issuessstatuscode)create success=false；}返回JSON(createssuccess，JsonRequestBehavior .允许get)；}接着，来到索引视图页面中添加四个文本框用来输入产品名称、数量、价格、描述的信息以及一个创建产品按钮。

div style='底色： # CA5100padding: 10pxmargin: 5px宽度： 45%;div style=' font-weight : bold；边距-底部：5 px'创建产品/部门表trtd产品名称：/TDT输入id=' txtCreateProductName '名称=' txtCreateProductName '类型=' text '/TD/tr trtdcount :/TDT输入id=' txtCreateCount '名称=' txtCreateCount '类型=' text '/TD/tr trtd价格：/TDT输入id=' txtCreatePrice '名称=' txtCreatePrice '类型=' text '/TD/tr trtd描述3333/div输入id='btnCreateProduct '名称='btnCreateProduct '类型='按钮'值='创建产品'/div/div为按钮创建产品按钮t添加埃阿斯方法

$('#btnCreateProduct ').单击(函数(){ if($(' # TxtCreateProductName ')).val().trim()！='' $('#txtCreateCount ').val().trim()！='' $('#txtCreatePrice ').val().trim()！='' $('#txtCreateDescription ').val().trim()！=' '){ var product={ Productid : 0，ProductName : $(' # TxtCreateProductName ').val()，Count: $('#txtCreateCount ').val()，Price: $('#txtCreatePrice ').val()，描述： $(' # TxtCreatedescription ').val()}；$.Ajax({ URL : '/Product/CreateProduct '，type: 'GET '，data: product，dataType: 'json' }).成功（函数（结果){ if(结果！=null结果){ $('#createMessage ').html(“”产品创建成功');$(' # btngetpproductlist ').触发器(“点击”)；} }).错误（函数（数据){ alert(数据));}) } });运行程序，加载产品列表。

点击创建产品按钮之前：

输入新增数据，点击创建产品按钮之后：

我们看到新增数据成功并显示到了产品列表中。

4.修改产品信息

这里我们创建5个文本框，用来输入产品标识、产品名称、数量、价格、描述的信息以及一个更新产品按钮。

首先，我们先完成在产品控制器中使用HttpClient调用网络应用编程接口中修改一条产品数据的方法。

public JsonResult UpdateProduct(产品产品){ bool updateSuccess=true上呼吸道感染地址=新的Uri(_baseAddress，'/API/products ')；使用(var Http客户端=新Http客户端()){ var response=Http客户端.PutAsyncProduct(地址，产品，新的JsonMediaTypeFormatter()).结果；if(！回应issuessstatuscode)updateSuccess=false；}返回Json(updateSuccess，JsonRequestBehavior .允许get)；}接着，来到索引视图页面中添加5个文本框用来输入产品标识、产品名称、数量、价格、描述的信息以及一个更新产品按钮。

div style='底色： # 007 ACCpadding: 10pxmargin: 5px宽度： 45%;div style=' font-weight : bold；边距-底部：5 px'更新产品/部门表trtdProduct id :/TDT输入id=' txtUpdateProductID ' name=' txtUpdateProductID ' type=' text '/TD/tr trtd产品名称：/TDT输入id=' txtUpdateProductName ' name=' txtUpdateProductName ' type=' text '/TD/tr trtdcount :/TDT输入id=' txtUpdateCount ' name=' txtUpdateCount ' type=' text '/TD/tr trtd定价/div输入id='btnUpdateProduct '名称='btnUpdateProduct '类型='按钮'值='更新产品'/div/div为按钮更新产品按钮添加埃阿斯方法

$('#btnUpdateProduct ').单击(函数(){ if($(' # TxTupdateProductid ')).val().trim()！='' $('#txtUpdateProductName ').val().trim()！='' $('#txtUpdateCount ').val().trim()！='' $('#txtUpdatePrice ').val().trim()！=null $('#txtUpdateDescription ').val().trim()！=' '){ var product={ Productid : $(' # TxTupdateProductid ').val()，ProductName : $(' # TxTupdateProductName ').val()，Count: $('#txtUpdateCount ').val()，Price: $('#txtUpdatePrice ').val()，描述： $(' # TxTupdatedescription ').val()}；$.Ajax({ URL : '/Product/updateProduct '，type: 'GET '，data: product，dataType: 'json' }).成功（函数（结果){ if(结果！=null结果){ $('#updateMessage ').html(“”产品更新成功');$(' # btngetpproductlist ').触发器(“点击”)；} }).错误（函数（数据){ alert(数据));}) } });运行代码，加载产品列表。

点击更新创建按钮之前：

这里我们修改第一条数据，输入修改信息，点击更新产品按钮之后：

我们看到产品标识为一的信息成功修改并显示到了产品列表中。

5.删除产品

这里我们创建一个文本框，用来输入产品标识的信息以及一个删除产品按钮。

首先，我们先完成在产品控制器中使用HttpClient调用网络应用编程接口中删除一条产品数据的方法。

public JsonResult delete product(int id){ bool delete success=true；上呼吸道感染地址=新的Uri(_baseAddress，'/API/products/' id)；使用(var Http客户端=新Http客户端()){ var response=Http客户端.删除异步（地址)。结果；if(！回应issccessstatuscode)删除成功=false}返回Json(deleteSuccess，JsonRequestBehavior .允许get)；}接着，来到索引视图页面中添加一个文本框用来输入产品标识的信息以及一个删除产品按钮。

div style='底色： # B572 BApadding: 10pxmargin: 5px宽度： 45%;div style=' font-weight : bold；边距-底部：5 px删除产品/div产品id :输入id=' txtdeleeprodutid '名称=' txtdeleeprodutid '类型=' text '/输入id=' btndedeleteproduct '名称=' btndedeleteproduct '类型=' button '值=' Delete Prdouct '/div id=' Delete message '样式=' color :蓝色；/div /div为按钮删除产品按钮添加埃阿斯方法

$(' # btndeletproduct ').单击(函数(){ if($(' # TxtDeleteProducTid ')).val().trim()！='') { $.Ajax({ URL : '/Product/delete Product？id=' $('#txtDeleteProductID ').val()，type: 'GET '，dataType: 'json' }).成功（函数（结果){ if(结果！=null结果){ $('#deleteMessage ').html(“”产品删除成功');$(' # btngetpproductlist ').触发器(“点击”)；} }).错误（函数（数据){ alert(数据));}) } });运行代码，加载产品列表。

点击删除产品按钮之前。