ASP.NET Web API 2 入门

时间：2023-03-09 03:06:18
ASP.NET Web API 2 入门

本文参考：http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api

　Http本身是个强大的平台，不仅仅应用于网页技术方面，还可以用于建立API，这些API把服务和数据包装起来。Http协议简单，灵活，随处可见。几乎任何平台都涉及到Http，很多客户端程序都会用到http服务，这些客户端包括，浏览器、移动应用，桌面应用。ASP.NET Web API是在.net平台上创建Web API的框架。

　　本文将教会您如何使用ASP.NET Web API技术来创建一个返回产品列表的web API.

创建Web API项目

启动VS,点击菜单：文件->新建->项目->Asp.net Web应用程序->选择空项目->下方勾住Web API，如下图：

ASP.NET Web API 2 入门

添加model

model代表我们应用程序中的一个数据对象，Web API框架会自动把它序列化为Json、xml等格式，在前端可以通过反序列化获取到数据。

右击models文件夹，新建一个类product即可！代码如下：

public class Product

    {

        public int Id { get; set; }

        public string Name { get; set; }

        public string Category { get; set; }

        public decimal Price { get; set; }

    }

添加控制器

右击Controlers文件夹，添加控制器，选择空的Web API 2模板。

using ProductsApp.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Web.Http;

namespace ProductsApp.Controllers

{

    public class ProductsController : ApiController

    {

        Product[] products = new Product[]

        {

            new Product { Id = , Name = "Tomato Soup", Category = "Groceries", Price =  },

            new Product { Id = , Name = "Yo-yo", Category = "Toys", Price = 3.75M },

            new Product { Id = , 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代码，jquery调用接口代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <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="" />

    <input type="button" value="Search" onclick="find();" />

    <p id="product" />

  </div>

  <script src="http://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>

</body>

</html>

附加内容

至此，已经完成了这个简单的Web API的创建。包括两个API(ProductsController 和 GetProduct)。可以修改路由规则如下：

public static class WebApiConfig

    {

        public static void Register(HttpConfiguration config)

        {

            // Web API 配置和服务

            // Web API 路由

            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(

                name: "DefaultApi",

                routeTemplate: "{controller}/{action}/{id}",

                defaults: new { id = RouteParameter.Optional }

            );

        }

    }

完

相关文章