經過HttpClient 調用ASP.NET Web API

 

在前面兩篇文章中咱們介紹了ASP.NET Web API的基本知識和原理,而且經過簡單的實例瞭解了它的基本(CRUD)操做。咱們是經過JQueryAjaxWeb API進行數據操做。這一篇咱們來介紹一下使用HttpClient的方式來對Web API進行數據操做。javascript

這裏咱們仍是繼續使用對Product的操做實例來演示一下它的基本應用。html

 

建立ASP.NET Web API應用程序 java

VS中選擇建立一個ASP.NET Web Application應用程序,在嚮導的下一個窗口中選擇Web API模板。jquery

 

建立Modelajax

這裏咱們在Models文件夾下建立一個簡單的Product model類,用來傳遞數據。json

Models文件夾上點擊右鍵,選擇Add -> Classapi

    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; }
    }

 

建立Cotrollerapp

接着在Controllers文件夾下建立一個API Controller, 命名爲"ProductsController"。url

Controllers文件夾上點擊右鍵,選擇Add -> Controller ,在彈出嚮導中選擇Web API 2 Controller - Emptyspa

在嚮導下一步中輸入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 IDtextbox以及一個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:&nbsp;<input id="txtSearchProductID" name="txtSearchProductID" type="text" />&nbsp;<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 ID1的數據成功獲取。

 

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 ID1的信息成功修改並顯示到了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:&nbsp;<input id="txtDeleteProductID" name="txtDeleteProductID" type="text" />&nbsp;<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 ID1的數據成功刪除,而且Product列表中也沒有了這條數據。

 

 

好了,本篇就先到此,但願對你有所幫助,謝謝!

相關文章
相關標籤/搜索