communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > développement back-end > Tutoriel C#.Net > Explication graphique détaillée de HttpClient appelant l'API Web ASP.NET

Explication graphique détaillée de HttpClient appelant l'API Web ASP.NET

Y2J
Libérer： 2017-05-03 13:53:50
original
2109 Les gens l'ont consulté

Cet article présente principalement l'exemple d'appel de l'API Web ASP.NET via HttpClient. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

Dans les deux articles précédents, nous avons présenté les connaissances et les principes de base de l'API Web ASP.NET et appris ses opérations de base (CRUD) à travers des exemples simples. Nous effectuons des opérations de données sur l'API Web via JQuery et Ajax. Dans cet article, nous expliquerons comment utiliser HttpClient pour effectuer des opérations de données sur l'API Web.

Ici, nous continuerons à utiliser l'exemple de fonctionnement de Product pour démontrer son application de base.

Créez une application API Web ASP.NET

Choisissez de créer une application Web ASP.NET dans VS et sélectionnez API Web dans la fenêtre suivante du modèle d'assistant.

Créer un modèle

Ici, nous créons une classe de modèle de produit simple dans le dossier Modèles pour transmettre des données.

Cliquez avec le bouton droit sur le dossier Modèles et sélectionnez Ajouter -> Classe

  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; }
  }
Copier après la connexion

Créer un cotroller

Puis créez-le dans le dossier Contrôleurs. Un contrôleur API, nommé « ProductsController ».

Cliquez avec le bouton droit sur le dossier Contrôleurs, sélectionnez Ajouter -> Contrôleur, sélectionnez Contrôleur Web API 2 - Vide dans l'assistant contextuel

Sous l'assistant Entrez le nom du contrôleur API comme "ProductsController" en une seule étape.

Parce que nous devons appeler l'API Web via HttpClient, nous devons également créer un contrôleur MVC ici.

De même, faites un clic droit sur le dossier Contrôleurs, sélectionnez Ajouter -> Contrôleur, sélectionnez Contrôleur MVC 5 - Vide dans l'assistant contextuel

sous l'assistant Entrez le nom du contrôleur MVC 5 en tant que "ProductController" en une seule étape.

Créer une méthode API Web (CRUD)

Ici, nous utilisons toujours des données simulées pour créer une méthode API Web CRUD simple. Cela a été expliqué en détail dans les chapitres précédents, je n’entrerai donc pas dans les détails ici. Accédez directement au code. 

  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);
    }
  }
Copier après la connexion

Appelez le contrôleur MVC via JQuery et Ajax, appelez l'API Web via HttpClient dans le contrôleur MVC

La méthode (CRUD) dans l'API Web est créée, connectez-vous Suivant , examinons les opérations sur les données de chaque méthode séparément.

1. Obtenez la liste des produits

Ouvrez le fichier du contrôleur MVC 5 ProductController que nous avons créé. Utilisez HttpClient pour appeler la méthode list dans notre API Web.

Nous devons d'abord introduire System.Net.Http

using System.Net.Http;
Copier après la connexion

Ensuite, nous définissons une variable statique publique pour notre adresse API Web. 

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);
    }
Copier après la connexion

Ici, nous devons obtenir les données de la liste de produits via un appel Ajax en cliquant sur le bouton, nous utilisons donc ici JsonResult pour renvoyer les données.

Ensuite, créons la vue.

Créez une vue sous le dossier Views->Product, nommée "Index". Ouvrez la vue Index et modifiez le code de la page comme suit : 

@{
  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>
Copier après la connexion

Ensuite, ce que nous devons faire est de charger la liste de produits lorsque vous cliquez sur le bouton Obtenir la liste de produits. Le code est implémenté comme suit : 

    $(&#39;#btnGetProductList&#39;).click(function () {
      $.ajax({
        url: &#39;/Product/GetProductList&#39;,
        type: &#39;GET&#39;,
        dataType: &#39;json&#39;
      }).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);
    }
Copier après la connexion

D'accord, exécutons le code.

Avant de cliquer sur le bouton Obtenir la liste des produits, ce qui suit est le suivant :

Après avoir cliqué sur le bouton Obtenir la liste des produits bouton, ce qui suit est le suivant :

La liste des données du produit est chargée avec succès.

2. Obtenez une seule donnée produit

Ce que nous faisons ici est de saisir l'ID du produit dans la zone de recherche, puis de cliquer sur le bouton Obtenir le produit pour le savoir. ces informations sur le produit.

Tout d'abord, nous complétons d'abord la méthode d'utilisation de HttpClient dans ProductController pour appeler l'API Web afin d'obtenir une seule donnée produit. 

    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);
    }
Copier après la connexion

Ensuite, accédez à la page Index View et ajoutez une zone de texte pour rechercher l'ID du produit et un bouton Obtenir le produit. 

  <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>
Copier après la connexion

Ajoutez la méthode Ajax au bouton Obtenir le produit 

    $(&#39;#btnGetProduct&#39;).click(function () {
      if ($(&#39;#txtSearchProductID&#39;).val().trim() != "") {
        $.ajax({
          url: &#39;/Product/GetSingleProduct?id=&#39; + $(&#39;#txtSearchProductID&#39;).val(),
          type: &#39;GET&#39;,
          dataType: &#39;json&#39;
        }).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);
        });
      }
    });
Copier après la connexion

Exécutez le programme et chargez la liste des produits.

Avant de cliquer sur le bouton Obtenir le produit :

Ici, nous recherchons les données avec l'ID de produit 1

Nous voyons que les données avec l'ID de produit 1 sont obtenues avec succès.

3. Ajouter un nouveau produit

Ici, nous créons 4 zones de texte pour saisir le nom du produit, le nombre, le prix, les informations de description et un bouton Créer un produit.

首先，我们先完成在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);
    }
Copier après la connexion

接着，来到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>
Copier après la connexion

为按钮Create Produc按钮t添加Ajax方法

    $(&#39;#btnCreateProduct&#39;).click(function () {
      if ($(&#39;#txtCreateProductName&#39;).val().trim() != "" && $(&#39;#txtCreateCount&#39;).val().trim() != "" &&
        $(&#39;#txtCreatePrice&#39;).val().trim() != "" && $(&#39;#txtCreateDescription&#39;).val().trim() != "") {
        var product = {
          ProductID: 0, ProductName: $(&#39;#txtCreateProductName&#39;).val(),
          Count: $(&#39;#txtCreateCount&#39;).val(), Price: $(&#39;#txtCreatePrice&#39;).val(),
          Description: $(&#39;#txtCreateDescription&#39;).val()
        };

        $.ajax({
          url: &#39;/Product/CreateProduct&#39;,
          type: &#39;GET&#39;,
          data: product,
          dataType: &#39;json&#39;
        }).success(function (result) {
          if (result != null && result) {
            $(&#39;#createMessage&#39;).html(&#39;Product create success.&#39;);
            $("#btnGetProductList").trigger(&#39;click&#39;);
          }
        }).error(function (data) {
          alert(data);
        })
      }
    });
Copier après la connexion

运行程序，加载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);
    }
Copier après la connexion

接着，来到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>
Copier après la connexion

为按钮Update Product按钮添加Ajax方法

   $(&#39;#btnUpdateProduct&#39;).click(function () {
      if ($(&#39;#txtUpdateProductID&#39;).val().trim() != "" && $(&#39;#txtUpdateProductName&#39;).val().trim() != "" &&
        $(&#39;#txtUpdateCount&#39;).val().trim() != "" && $(&#39;#txtUpdatePrice&#39;).val().trim() != null && $(&#39;#txtUpdateDescription&#39;).val().trim() != "") {
        var product = {
          ProductID: $(&#39;#txtUpdateProductID&#39;).val(), ProductName: $(&#39;#txtUpdateProductName&#39;).val(),
          Count: $(&#39;#txtUpdateCount&#39;).val(), Price: $(&#39;#txtUpdatePrice&#39;).val(),
          Description: $(&#39;#txtUpdateDescription&#39;).val()
        };

        $.ajax({
          url: &#39;/Product/UpdateProduct&#39;,
          type: &#39;GET&#39;,
          data: product,
          dataType: &#39;json&#39;
        }).success(function (result) {
          if (result != null && result) {
            $(&#39;#updateMessage&#39;).html(&#39;Product update success.&#39;);
            $(&#39;#btnGetProductList&#39;).trigger(&#39;click&#39;);
          }
        }).error(function (data) {
          alert(data);
        })
      }
    });
Copier après la connexion

运行代码，加载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);
    }
Copier après la connexion

接着，来到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>
Copier après la connexion

为按钮Delete Product按钮添加Ajax方法 

   $(&#39;#btnDeleteProduct&#39;).click(function () {
      if ($(&#39;#txtDeleteProductID&#39;).val().trim() != "") {
        $.ajax({
          url: &#39;/Product/DeleteProduct?id=&#39; + $(&#39;#txtDeleteProductID&#39;).val(),
          type: &#39;GET&#39;,
          dataType: &#39;json&#39;
        }).success(function (result) {
          if (result != null && result) {
            $(&#39;#deleteMessage&#39;).html(&#39;Product delete success.&#39;);
            $(&#39;#btnGetProductList&#39;).trigger(&#39;click&#39;);
          }
        }).error(function (data) {
          alert(data);
        })
      }
    });
Copier après la connexion

运行代码，加载Product列表。

点击Delete Product按钮之前。

这里我们输入Product ID为1的数据，点击Delete Product按钮之后：

我们看到Product ID为1的数据成功删除，并且Product列表中也没有了这条数据。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
asp.net httpclient web api
source：php.cn
Article précédent：Exemple de code SaveFileDialog du contrôle Winform sur la façon d'enregistrer des fichiers Article suivant：Explication détaillée du code du filtre Asp.Net MVC
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2060
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2214
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1869
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1753
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1779
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal