一个简单的webAPI调用
阅读原文时间:2023年07月10日阅读:3

1.新建一个ASP.NET Web应用程序。

2.选择空模板,WebAPI。

3.在Models文件夹添加Product类。

4.添加空控制器ProductController。

5.ProductController控制器添加下面代码。

6.添加一个Html页面



Product App

 <div>  
     <h2>All Products</h2>  
     <ul id="products" />  
 </div>  
 <div>  
     <h2>Search by ID</h2>  
     <input type="text" id="prodId" size="" />  
     <input type="button" value="Search" onclick="find();" />  
     <p id="product" />  
 </div>

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>  
 <script>  
     var uri = 'api/Products';

 $(document).ready(function () {  
   // Send an AJAX request  
   $.getJSON(uri)  
       .done(function (data) {  
         // On success, 'data' contains a list of products.  
         $.each(data, function (key, item) {  
           // Add a list item for the product.  
           $('<li>', { text: formatItem(item) }).appendTo($('#products'));  
         });  
       });  
 });

 function formatItem(item) {  
   return item.Name + ': $' + item.Price;  
 }

 function find() {  
   var id = $('#prodId').val();  
   $.getJSON(uri + '/' + id)  
       .done(function (data) {  
         $('#product').text(formatItem(data));  
       })  
       .fail(function (jqXHR, textStatus, err) {  
         $('#product').text('Error: ' + err);  
       });  
 }  
 </script>  


HTML

HTML

7.运行效果:

具体来自于微软官方:https://docs.microsoft.com/en-us/aspnet/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api