Detaillierte grafische Erklärung des HttpClient-Aufrufs der ASP.NET-Web-API

In diesem Artikel wird hauptsächlich das Beispiel des Aufrufs der ASP.NET-Web-API über HttpClient vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf

In den beiden vorherigen Artikeln haben wir die Grundkenntnisse und Prinzipien der ASP.NET-Web-API vorgestellt und ihre grundlegenden (CRUD-)Operationen anhand einfacher Beispiele erlernt. Wir führen Datenoperationen auf der Web-API über JQuery und Ajax durch. In diesem Artikel stellen wir vor, wie Sie mit HttpClient Datenoperationen auf der Web-API ausführen.

Hier werden wir weiterhin das Betriebsbeispiel des Produkts verwenden, um seine grundlegende Anwendung zu demonstrieren.

Erstellen Sie eine ASP.NET-Web-API-Anwendung

Wählen Sie „Erstellen einer ASP.NET-Webanwendung in VS“ und wählen Sie „Web-API“ im nächsten Fenster der Assistentenvorlage aus.

Modell erstellen

Hier erstellen wir eine einfache Produktmodellklasse im Ordner „Modelle“, um Daten zu übergeben.

Klicken Sie mit der rechten Maustaste auf den Ordner „Modelle“ und wählen Sie „Hinzufügen“ –> Ein API-Controller mit dem Namen „ProductsController“.

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

Klicken Sie mit der rechten Maustaste auf den Ordner „Controller“, wählen Sie „Hinzufügen“ –> Geben Sie im Assistenten in einem Schritt den Namen des API-Controllers als „ProductsController“ ein.

Da wir die Web-API über HttpClient aufrufen müssen, müssen wir hier auch einen MVC-Controller erstellen.

Klicken Sie auf ähnliche Weise mit der rechten Maustaste auf den Ordner „Controller“, wählen Sie „Hinzufügen -> Controller“ und wählen Sie im Popup-Assistenten „MVC 5 Controller – Leeren“ aus Geben Sie im Assistenten in einem Schritt den Namen des MVC 5-Controllers als „ProductController“ ein.

Web-API-Methode (CRUD) erstellen

Hier verwenden wir noch simulierte Daten, um eine einfache CRUD-Web-API-Methode zu erstellen. Dies wurde in den vorherigen Kapiteln ausführlich erläutert, daher werde ich hier nicht näher darauf eingehen. Gehen Sie direkt zum Code.

MVC-Controller über JQuery und Ajax aufrufen, Web-API über HttpClient im MVC-Controller aufrufen

Die (CRUD)-Methode in der Web-API wird erstellt, als Nächstes verbinden Schauen wir uns die Datenoperationen jeder Methode separat an.

1. Holen Sie sich die Produktliste

Öffnen Sie die von uns erstellte MVC 5 Controller-Datei ProductController. Verwenden Sie HttpClient, um die Listenmethode in unserer Web-API aufzurufen. Zuerst müssen wir System.Net.Http einführen

Als nächstes definieren wir eine öffentliche statische Variable für unsere Web-API-Adresse.

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

Hier müssen wir die Produktlistendaten über einen Ajax-Aufruf abrufen, indem wir auf die Schaltfläche klicken. Daher verwenden wir hier JsonResult, um die Daten zurückzugeben.

Als nächstes erstellen wir die Ansicht.

Erstellen Sie eine Ansicht im Ordner „Ansichten->Produkt“ mit dem Namen „Index“. Öffnen Sie die Indexansicht und ändern Sie den Seitencode wie folgt:

Als nächstes müssen wir die Produktliste laden, wenn auf die Schaltfläche „Produktliste abrufen“ geklickt wird. Der Code wird wie folgt implementiert:

Okay, lassen Sie uns den Code ausführen.

using System.Net.Http;

Bevor Sie auf die Schaltfläche „Produktliste abrufen“ klicken, lautet Folgendes:

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

Nachdem Sie auf die Schaltfläche „Produktliste abrufen“ geklickt haben Klicken Sie auf die Schaltfläche und das Folgende lautet:

@{
  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>

    $('#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=&#39;3&#39; cellspacing=&#39;3&#39;></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);
      }

      $(&#39;#products&#39;).html(productTable);
    }

Die Produktdatenliste wurde erfolgreich geladen.

2. Erhalten Sie einzelne Produktdaten

Was wir hier tun, ist, die Produkt-ID in das Suchfeld einzugeben und dann auf die Schaltfläche „Produkt abrufen“ zu klicken, um dies herauszufinden diese Produktinformationen.

Zunächst schließen wir die Methode ab, HttpClient im ProductController zu verwenden, um die Web-API aufzurufen und einzelne Produktdaten abzurufen.

Als nächstes gehen Sie zur Seite „Indexansicht“ und fügen ein Textfeld für die Suche nach der Produkt-ID und eine Schaltfläche „Produkt abrufen“ hinzu.

Ajax-Methode zur Schaltfläche „Produkt abrufen“ hinzufügen

Führen Sie das Programm aus und laden Sie die Produktliste.

Bevor Sie auf die Schaltfläche „Produkt abrufen“ klicken:

Hier suchen wir nach Daten mit der Produkt-ID 1

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

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

Wir sehen, dass die Daten mit Produkt-ID 1 erfolgreich abgerufen wurden.

    $('#btnGetProduct').click(function () {
      if ($('#txtSearchProductID').val().trim() != "") {
        $.ajax({
          url: '/Product/GetSingleProduct?id=' + $('#txtSearchProductID').val(),
          type: 'GET',
          dataType: 'json'
        }).success(function (result) {
          if (result != null) {
            $(&#39;#product&#39;).html("Product ID: " + result.ProductID + "<br/>" + "Product Name: " + result.ProductName + "<br/>" + "Count: " + result.Count + "<br/>" + "Price: " + result.Price + " <br/>" + "Description: " + result.Description);
          } else {
            $(&#39;#product&#39;).html(&#39;&#39;);
          }
        }).error(function (data) {
          alert(data);
        });
      }
    });

3. Fügen Sie ein neues Produkt hinzu

Hier erstellen wir 4 Textfelder, um Produktname, Anzahl, Preis, Beschreibungsinformationen und eine Schaltfläche „Produkt erstellen“ einzugeben.

首先，我们先完成在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列表中也没有了这条数据。

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erklärung des HttpClient-Aufrufs der ASP.NET-Web-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!