通过HttpClient 调用ASP.NET Web API示例
在前面两篇文章中我们介绍了asp.net web api的基本知识和原理，并且通过简单的实例了解了它的基本(crud)操作。我们是通过jquery和ajax对web api进行数据操作。这一篇我们来介绍一下使用httpclient的方式来对web api进行数据操作。
这里我们还是继续使用对product的操作实例来演示一下它的基本应用。
创建asp.net web api应用程序
在vs中选择创建一个asp.net web application应用程序，在向导的下一个窗口中选择web api模板。
创建model
这里我们在models文件夹下创建一个简单的product model类，用来传递数据。
在models文件夹上点击右键，选择add -> class
public class product
{
public int productid { get; set; }
public string productname { get; set; }
public decimal price { get; set; }
public int count { get; set; }
public string description { get; set; }
}
创建cotroller
接着在controllers文件夹下创建一个api controller, 命名为"productscontroller"。
在controllers文件夹上点击右键，选择add -> controller ,在弹出向导中选择web api 2 controller - empty
在向导下一步中输入api controller name为"productscontroller"。
因为我们需要通过httpclient的方式来调用web api，所以这里我们还需要创建一个mvc controller。
同样在controllers文件夹上点击右键，选择add -> controller ,在弹出向导中选择mvc 5 controller - empty
在向导下一步中输入mvc 5 controller name为"productcontroller"。
创建web api方法(crud)
这里我们依然使用模拟的数据创建简单的crud web api方法。前面的章节有详细讲解到，这里就不细说了。直接上代码。
public class productscontroller : apicontroller
{
// mock product list
public static list<product> productlist = initproductmockdatalist();
private static list<product> initproductmockdatalist()
{
return new list<product>()
{
new product {productid=1,productname="product a",price=1000000,count=5,description="description a"},
new product {productid=2,productname="product b",price=200000,count=2,description="description b"},
new product {productid=3,productname="product c",price=500000,count=8,description="description c"},
new product {productid=4,productname="product d",price=80000,count=10,description="description d"},
new product {productid=5,productname="product e",price=300000,count=3,description="description e"}
};
}
public ienumerable<product> get()
{
return productlist;
}
public product get(int id)
{
return productlist.where(p => p.productid == id).firstordefault();
}
public void post([frombody]product product)
{
var lastproduct = productlist.orderbydescending(p => p.productid).firstordefault();
int newproductid = lastproduct.productid + 1;
product.productid = newproductid;
productlist.add(product);
}
public void put([frombody]product product)
{
var currentproduct = productlist.where(p => p.productid == product.productid).firstordefault();
if (currentproduct != null)
{
foreach (var item in productlist)
{
if (item.productid.equals(currentproduct.productid))
{
item.productname = product.productname;
item.price = product.price;
item.count = product.count;
item.description = product.description;
}
}
}
}
public void delete(int id)
{
product product = productlist.where(p => p.productid == id).firstordefault();
productlist.remove(product);
}
}
通过jquery和ajax调用mvc controller,在mvc controller中通过httpclient调用web api
web api中的（crud）方法创建完成，接下来我们就分别来看看对各个方法的数据操作。
1.获取product列表
打开我们创建好的mvc 5 controller文件productcontroller。使用httpclient的方式来调用我们web api中的列表方法。
首先需要引入system.net.http
using system.net.http;
接下来为我们的web api地址定义一个公共静态变量。
public static readonly uri _baseaddress = new uri("http://localhost:21853/");
//
// get: /product/
public actionresult index()
{
return view();
}
public jsonresult getproductlist()
{
list<product> productlist = null;
uri address = new uri(_baseaddress, "/api/products");
using (var httpclient = new httpclient())
{
var response = httpclient.getasync(address).result;
if (response.issuccessstatuscode)
productlist = response.content.readasasync<list<product>>().result;
}
return json(productlist, jsonrequestbehavior.allowget);
}
这里我们需要通过点击按钮，通过ajax调用来获取product列表数据，所以这里我们使用jsonresult返回数据。
接下来，我们就来创建view。
文件夹views->product下创建一个view,名为"index"。打开index view,修改页面代码如下：
@{
layout = null;
}
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>index</title>
<script src="~/scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
<div style="background-color: #008000; padding: 10px; margin: 5px; width: 45%;">
<div style="font-weight: bold; margin-bottom: 5px;">get product list</div>
<div style="padding-bottom:5px;"><input id="btngetproductlist" name="btngetproductlist" type="button" value="get product list" /></div>
<div id="products"></div>
</div>
</body>
</html>
接着，我们要做的是，当点击get product list按钮是加载product list，代码实现如下：
$('#btngetproductlist').click(function () {
$.ajax({
url: '/product/getproductlist',
type: 'get',
datatype: 'json'
}).success(function (result) {
displayproductlist(result);
}).error(function (data) {
alert(data);
});
});
// display product list
function displayproductlist(result) {
var producttable = $("<table cellpadding='3' cellspacing='3'></table>");
var producttabletitle = $("<tr><th>product id</th><th>product name</th><th>price</th><th>count</th><th>description</th></tr>");
producttabletitle.appendto(producttable);
for (var i = 0; i < result.length; i++) {
var producttablecontent = $("<tr><td>"
+ result[i].productid + "</td><td>"
+ result[i].productname + "</td><td>"
+ result[i].price + "</td><td>"
+ result[i].count + "</td><td>"
+ result[i].description + "</td></tr>");
producttablecontent.appendto(producttable);
}
$('#products').html(producttable);
}
好了，运行代码。
点击get product list按钮之前如下：
点击get product list按钮之后如下：
product数据列表加载成功。
2.获取单条product数据
这里我们的做法是在搜索框里输入product id，然后点击get product按钮，查找出这条product信息。
首先，我们先完成在productcontroller中使用httpclient调用web api中获取单条product数据的方法。
public jsonresult getsingleproduct(int id)
{
uri address = new uri(_baseaddress, "/api/products/" + id);
product product = null;
using (var httpclient = new httpclient())
{
var response = httpclient.getasync(address).result;
if (response.issuccessstatuscode)
product = response.content.readasasync<product>().result;
}
return json(product, jsonrequestbehavior.allowget);
}
接着，来到index view页面中添加一个搜索product id的textbox以及一个get product的按钮。
<div style="background-color: #9acd32; padding: 10px; margin: 5px; width: 45%; ">
<div style="font-weight:bold;margin-bottom:5px;">get single product</div>
<div>product id: <input id="txtsearchproductid" name="txtsearchproductid" type="text" /> <input id="btngetproduct" name="btngetproduct" type="button" value="get prdouct" /></div>
<div id="product"></div>
</div>
为按钮get product按钮添加ajax方法
$('#btngetproduct').click(function () {
if ($('#txtsearchproductid').val().trim() != "") {
$.ajax({
url: '/product/getsingleproduct?id=' + $('#txtsearchproductid').val(),
type: 'get',
datatype: 'json'
}).success(function (result) {
if (result != null) {
$('#product').html("product id: " + result.productid + "<br/>" + "product name: " + result.productname + "<br/>" + "count: " + result.count + "<br/>" + "price: " + result.price + " <br/>" + "description: " + result.description);
} else {
$('#product').html('');
}
}).error(function (data) {
alert(data);
});
}
});
运行程序，加载product列表。
点击get product按钮前：
这里我们查找product id为1的数据
我们看到product id为1的数据成功获取。
3.新增一条product
这里我们创建4个textbox，用来输入product name,count,price,description的信息以及一个create product按钮。
首先，我们先完成在productcontroller中使用httpclient调用web api中新增一条product数据的方法。
public jsonresult createproduct(product product)
{
bool createsuccess = true;
uri address = new uri(_baseaddress, "/api/products");
using(var httpclient=new httpclient())
{
var response = httpclient.postasjsonasync(address, product).result;
if (!response.issuccessstatuscode)
createsuccess = false;
}
return json(createsuccess, jsonrequestbehavior.allowget);
}
接着，来到index view页面中添加4个textbox用来输入product name,count,price,description的信息以及一个create product按钮。
<div style="background-color: #ca5100; padding: 10px; margin: 5px; width: 45%;">
<div style="font-weight:bold;margin-bottom:5px;">create product</div>
<div>
<table>
<tr><td> product name:</td><td><input id="txtcreateproductname" name="txtcreateproductname" type="text" /></td></tr>
<tr><td>count:</td><td><input id="txtcreatecount" name="txtcreatecount" type="text" /></td></tr>
<tr><td> price:</td><td><input id="txtcreateprice" name="txtcreateprice" type="text" /></td></tr>
<tr><td> description:</td><td><input id="txtcreatedescription" name="txtcreatedescription" type="text" /></td></tr>
</table>
</div>
<div>
<div id="createmessage" style="color:blue;"></div>
<input id="btncreateproduct" name="btncreateproduct" type="button" value="create product" />
</div>
</div>
为按钮create produc按钮t添加ajax方法
$('#btncreateproduct').click(function () {
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(),
description: $('#txtcreatedescription').val()
};
$.ajax({
url: '/product/createproduct',
type: 'get',
data: product,
datatype: 'json'
}).success(function (result) {
if (result != null && result) {
$('#createmessage').html('product create success.');
$("#btngetproductlist").trigger('click');
}
}).error(function (data) {
alert(data);
})
}
});
运行程序，加载product列表。
点击create product按钮之前：
输入新增数据，点击create product按钮之后：
我们看到新增数据成功并显示到了product列表中。
4.修改product信息
这里我们创建5个textbox，用来输入product id,product name,count,price,description的信息以及一个update product按钮。
首先，我们先完成在productcontroller中使用httpclient调用web api中修改一条product数据的方法。
public jsonresult updateproduct(product product)
{
bool updatesuccess = true;
uri address = new uri(_baseaddress, "/api/products");
using (var httpclient = new httpclient())
{
var response = httpclient.putasync<product>(address, product, new jsonmediatypeformatter()).result;
if (!response.issuccessstatuscode)
updatesuccess = false;
}
return json(updatesuccess, jsonrequestbehavior.allowget);
}
接着，来到index view页面中添加5个textbox用来输入product id,product name,count,price,description的信息以及一个update product按钮。
<div style="background-color: #007acc; padding: 10px; margin: 5px; width: 45%;">
<div style="font-weight:bold;margin-bottom:5px;">update product</div>
<div>
<table>
<tr><td>product id:</td><td><input id="txtupdateproductid" name="txtupdateproductid" type="text" /></td></tr>
<tr><td> product name:</td><td><input id="txtupdateproductname" name="txtupdateproductname" type="text" /></td></tr>
<tr><td>count:</td><td><input id="txtupdatecount" name="txtupdatecount" type="text" /></td></tr>
<tr><td> price:</td><td><input id="txtupdateprice" name="txtupdateprice" type="text" /></td></tr>
<tr><td> description:</td><td><input id="txtupdatedescription" name="txtupdatedescription" type="text" /></td></tr>
</table>
</div>
<div>
<div id="updatemessage" style="color:white;"></div>
<input id="btnupdateproduct" name="btnupdateproduct" type="button" value="update product" />
</div>
</div>
为按钮update product按钮添加ajax方法
$('#btnupdateproduct').click(function () {
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(),
description: $('#txtupdatedescription').val()
};
$.ajax({
url: '/product/updateproduct',
type: 'get',
data: product,
datatype: 'json'
}).success(function (result) {
if (result != null && result) {
$('#updatemessage').html('product update success.');
$('#btngetproductlist').trigger('click');
}
}).error(function (data) {
alert(data);
})
}
});
运行代码，加载product列表。
点击update create按钮之前：
这里我们修改第一条数据，输入修改信息，点击update product按钮之后：
我们看到product id为1的信息成功修改并显示到了product列表中。
5.删除product
这里我们创建1个textbox，用来输入product id的信息以及一个delete product按钮。
首先，我们先完成在productcontroller中使用httpclient调用web api中删除一条product数据的方法。
public jsonresult deleteproduct(int id)
{
bool deletesuccess = true;
uri address = new uri(_baseaddress, "/api/products/" + id);
using (var httpclient = new httpclient())
{
var response = httpclient.deleteasync(address).result;
if (!response.issuccessstatuscode)
deletesuccess = false;
}
return json(deletesuccess, jsonrequestbehavior.allowget);
}
接着，来到index view页面中添加1个textbox用来输入product id的信息以及一个delete product按钮。
<div style="background-color: #b572ba; padding: 10px; margin: 5px; width: 45%; ">
<div style="font-weight:bold;margin-bottom:5px;">delete product</div>
<div>product id: <input id="txtdeleteproductid" name="txtdeleteproductid" type="text" /> <input id="btndeleteproduct" name="btndeleteproduct" type="button" value="delete prdouct" /></div>
<div id="deletemessage" style="color:blue;"></div>
</div>
为按钮delete product按钮添加ajax方法
$('#btndeleteproduct').click(function () {
if ($('#txtdeleteproductid').val().trim() != "") {
$.ajax({
url: '/product/deleteproduct?id=' + $('#txtdeleteproductid').val(),
type: 'get',
datatype: 'json'
}).success(function (result) {
if (result != null && result) {
$('#deletemessage').html('product delete success.');
$('#btngetproductlist').trigger('click');
}
}).error(function (data) {
alert(data);
})
}
});
运行代码，加载product列表。
点击delete product按钮之前。
这里我们输入product id为1的数据，点击delete product按钮之后：
我们看到product id为1的数据成功删除，并且product列表中也没有了这条数据。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
推荐阅读
-
通过HttpClient 调用ASP.NET Web API示例
-
C# asp.net mvc 通过 HttpClient 访问 Web_API
-
通过扩展让ASP.NET Web API支持JSONP
-
Python通过调用有道翻译api实现翻译功能示例
-
asp.net基于JWT的web api身份验证及跨域调用实践
-
Asp.Net Core 调用第三方Open API查询物流数据的示例
-
通过扩展让ASP.NET Web API支持W3C的CORS规范
-
ASP.NET MVC Web API使用示例
-
HttpClient调用ASP.NET Web API的图文详解
-
JS通过调用微信API实现微信支付功能的方法示例