ASP.NET --WebAPI学习

创建一个项目
ASP.NET --WebAPI学习

创建 Product 类

在该类中添加属性，

public int Id { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public decimal Price { get; set; }

如下图：
ASP.NET --WebAPI学习
完整代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ProductsApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
    }
}

添加 ProductsController 控制器
ASP.NET --WebAPI学习

在该控制器中添加

    //数组对象
    Product[] products = new Product[]
    {
        new Product{Id= 1, Name= "Tomato Soup", Category= "Groceries",Price=1},
        new Product{Id=2, Name="Yo-yo", Category="Toys",Price=3.75M},
        new Product{Id= 3,Name="Hammer", Category="Hardware", Price= 16.99M}
    };

    //获取所有产品
    public IEnumerable<Product> GetAllProducts()
    {
        return products;
    }

    //获取指定产品
    public IHttpActionResult GetProduct(int id)
    {
        var product = products.FirstOrDefault((p) => p.Id == id);
        if (product == null) 
        {
            return NotFound();
        }
        return Ok(product);
    }

ASP.NET --WebAPI学习

完整代码：

using ProductsApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace ProductsApp.Controllers
{
    public class ProductsController : ApiController
    {
        //数组对象
        Product[] products = new Product[]
        {
            new Product{Id= 1, Name= "Tomato Soup", Category= "Groceries",Price=1},
            new Product{Id=2, Name="Yo-yo", Category="Toys",Price=3.75M},
            new Product{Id= 3,Name="Hammer", Category="Hardware", Price= 16.99M}
        };

        //获取所有产品
        public IEnumerable<Product> GetAllProducts()
        {
            return products;
        }

        //获取指定产品
        public IHttpActionResult GetProduct(int id)
        {
            var product = products.FirstOrDefault((p) => p.Id == id);
            if (product == null) 
            {
                return NotFound();
            }
            return Ok(product);
        }
 
    }
}

添加 HTML 页
ASP.NET --WebAPI学习

在 index.html 中添加

ASP.NET --WebAPI学习

完整代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Product App</title>
</head>
<body>
    <div>
        <h2>All Products  </h2>
        <ul id="products"/>
    </div>

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

</body>
<script src="jquery.js"></script>
<script>
    //格式化 json对象 方法
    function formatItem(item) {
        return item.Name + '  :$' + item.Price;
    }

    var uri = 'api/products';   //公用的uri

    //获取所有产品
    $(document).ready(function () {
        $.getJSON(uri)
        .done(function (data) {
            $.each(data, function (key, item) {
                $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
        });
    });

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

 
</html>

代码解释：

1 查出所有产品信息：

var uri = 'api/products';   //公用的uri

//获取所有产品
$(document).ready(function () {
       $.getJSON(uri)
       .done(function (data) {
           $.each(data, function (key, item) {
               $('<li>', { text: formatItem(item) }).appendTo($('#products'));
           });
       });
   });

路由规则： ASP.NET --WebAPI学习
浏览器发起请求：

后台处理请求，做出响应：

浏览器接收响应：

2 查出指定id的产品信息：

 var uri = 'api/products';   //公用的uri

 //根据id查找产品
 function find() {
       var id = $('#prodId').val();
       $.getJSON(uri + '/' + id)
       .done(function (data) {
           $('#product').text(formatItem(data));
       })
       .fail(function (jqXHR, textStatus, err) {
           console.log(jqXHR)
           console.log(textStatus)
           console.log(err)
           $('#product').text('Error:' + err);
       });
   }

浏览器发起请求：
ASP.NET --WebAPI学习
后台处理请求，作出响应：

浏览器接收响应信息：

当输入不存在的id时：

.fail(function (jqXHR, textStatus, err) {
                  console.log(jqXHR)
                  console.log(textStatus)
                  console.log(err)
                  $('#product').text('Error:' + err);
              });

可以通过 fail 回调函数在浏览器控制台打印出，jqXHR, textStatus, err对象：

ASP.NET --WebAPI学习
至于

 //格式化 json对象 方法
 function formatItem(item) {
        return item.Name + '  :$' + item.Price;
    }

作用是：返回json对象的 Name和Price属性
可以通过以下代码的 console.log(formatItem(data)); 来证明

var uri = 'api/products';   //公用的uri

 //根据id查找产品
 function find() {
       var id = $('#prodId').val();
       $.getJSON(uri + '/' + id)
       .done(function (data) {
           console.log(formatItem(data));
           $('#product').text(formatItem(data));
       })
       .fail(function (jqXHR, textStatus, err) {
           console.log(jqXHR)
           console.log(textStatus)
           console.log(err)
           $('#product').text('Error:' + err);
       });
   }

ASP.NET --WebAPI学习

代码解释：

相关推荐