HttpClient調用ASP.NET Web API的圖文詳解

本篇文章主要介紹了通過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>  <p style="background-color: #008000; padding: 10px; margin: 5px; width: 45%;">    <p style="font-weight: bold; margin-bottom: 5px;">Get Product List</p>    <p style="padding-bottom:5px;"><input id="btnGetProductList" name="btnGetProductList" type="button" value="Get Product List" /></p>    <p id="products"></p>  </p>  </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的按鈕。

  <p style="background-color: #9ACD32; padding: 10px; margin: 5px; width: 45%; ">    <p style="font-weight:bold;margin-bottom:5px;">Get Single Product</p>    <p>Product ID: <input id="txtSearchProductID" name="txtSearchProductID" type="text" /> <input id="btnGetProduct" name="btnGetProduct" type="button" value="Get Prdouct" /></p>    <p id="product"></p>  </p>

為按鈕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按鈕。

  <p style="background-color: #CA5100; padding: 10px; margin: 5px; width: 45%;">    <p style="font-weight:bold;margin-bottom:5px;">Create Product</p>    <p>      <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>    </p>    <p>      <p id="createMessage" style="color:blue;"></p>      <input id="btnCreateProduct" name="btnCreateProduct" type="button" value="Create Product" />    </p>  </p>

為按鈕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按鈕。

  <p style="background-color: #007ACC; padding: 10px; margin: 5px; width: 45%;">    <p style="font-weight:bold;margin-bottom:5px;">Update Product</p>    <p>      <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>    </p>    <p>      <p id="updateMessage" style="color:white;"></p>      <input id="btnUpdateProduct" name="btnUpdateProduct" type="button" value="Update Product" />    </p>  </p>

為按鈕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按鈕。

  <p style="background-color: #B572BA; padding: 10px; margin: 5px; width: 45%; ">    <p style="font-weight:bold;margin-bottom:5px;">Delete Product</p>    <p>Product ID: <input id="txtDeleteProductID" name="txtDeleteProductID" type="text" /> <input id="btnDeleteProduct" name="btnDeleteProduct" type="button" value="Delete Prdouct" /></p>    <p id="deleteMessage" style="color:blue;"></p>  </p>

為按鈕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列表中也沒有了這條資料。