平平淡淡开开心心  
微信小程序全栈交流群 全球旅游旅行交流群
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，如下图：

添加model

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

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

?
1
2
3
4
5
6
7
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 = 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代码，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="5" />
    <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 }
            );
        }
    }
复制代码

 

完

 

 

 

posted on   程序媛鼓励师  阅读(298)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
 
Copyright © 2025 程序媛鼓励师
Powered by .NET 9.0 on Kubernetes
博客园
点击右上角即可分享
微信分享提示
SQL AI 助手