开始一个简单的ASP.NET Web API 2 (C#)
创建一个Web API 项目
在本教程中,你将使用ASP.NET Web API 来创建一个web API 并返回产品列表。 网页前端使用jQuery 显示结果。
选择ASP.NET Web Application,新建名ProductsApp
在弹出框里选择空的模板,并把Web API勾选上,点击OK。
注意
你也可以创建一个“Web API"模板,这个模板将提供ASP.NET MVC帮助页面等框架。但我使用空模板作为教程,因为我想展示Web API没有MVC时的运作,一般来说不需要用MVC来使用API。
添加一个Model
一个模型是一个对象,表示应用程序中的数据。ASP.Web API模型可以自动序列化JSON、XML或其他格式,然后序列化数据写入HTTP响应消息的主体。只要客户端可以读取序列化格式,它可以对对象进行反序列化。大多数客户可以解析XML或JSON。此外,客户端可以表明它希望的格式通过设置HTTP请求中的Accept标头信息。
让我们首先创建一个简单的模型,代表了一个产品。
如果没有可见的解决方案资源管理器,单击“视图”菜单,选择“解决方案资源管理器”。在解决方案资源管理器中,右键单击模型文件夹。从上下文菜单中,选择Add然后选择类。
类名取"Product"
C#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; } } }
添加一个控制器Controller
在Web API,控制器是一个对象处理HTTP请求。我们将添加一个控制器,可以返回产品列表或指定的单个产品ID。
请注意
如果你有使用ASP.MVC,您已经熟悉控制器。Web API控制器类似MVC控制器,但是继承ApiController类而不是控制器类。
在解决方案资源管理器中,右键单击控制器文件夹。选择Add然后选择控制器。
In the Add Scaffold dialog, select Web API Controller - Empty. Click Add.
控制器名字 "ProductsController". 点击 Add.
ProductsController.cs 在Controllers文件夹内
C#
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); } } }
复制例子代码到controller类中。
定义了2个方法返回产品
GetAllProducts
方法返回类型IEnumerable<Product>GetProduct
方法查找单个产品通过ID
就是这样!你有一个工作的web API。控制器上的每个方法对应于一个或多个uri:
Controller Method | URI |
---|---|
GetAllProducts | /api/products |
GetProduct | /api/products/id |
例如
GetProduct方法, id 在 URI 是一个占位符,假设id是5:
api/products/5.
调用Web API 通过 Javascript and jQuery
在本节中,我们将添加一个HTML页面,使用AJAX调用web API。我们将使用jQuery AJAX调用和结果更新页面。
在解决方案资源管理器中,右键单击项目并选择添加,然后选择新的项目。
选择HTML Page item. Name the page "index.html".
html
<!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>
得到一个产品列表
发送HTTP GET请求 "/api/products".
html$(document).ready(function () { // Send an AJAX request $.getJSON(apiUrl) .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')); }); }); });
通过ID得到产品
发送HTTP GET 请求"/api/products/id"
JavaScriptfunction find() { var id = $('#prodId').val(); $.getJSON(apiUrl + '/' + id) .done(function (data) { $('#product').text(formatItem(data)); }) .fail(function (jqXHR, textStatus, err) { $('#product').text('Error: ' + err); }); }
运行应用
按下F5 开始 调试应用,页面如下
1
输入ID
如果你输入一个无效的ID,将返回错误
使用F12 来查看HTTP Request and Response
当你使用一个HTTP服务,它可以是非常有用的HTTP请求,请求消息。你可以通过使用Internet Explorer 9的F12开发工具。从Internet Explorer 9,按F12打开工具。单击网络选项卡和媒体开始捕捉。现在回到web页面,按F5重新加载web页面。Internet Explorer将捕获浏览器和web服务器之间的HTTP流量。摘要视图显示一个页面的所有网络流量:
定位相对URI的条目“api /产品/”。选择这个条目并单击详细视图。在细节视图,有选项卡以查看请求和响应头和身体。例如,如果您单击请求头选项卡,您可以看到客户端请求“application / json”Accept标头。
如果你单击响应主体选项卡,您可以看到产品列表是如何序列化为JSON。其他浏览器也有类似的功能。另一个有用的工具是小提琴手,web调试代理。您可以使用Fiddler查看HTTP流量,并构成HTTP请求,这让你完全控制请求中的HTTP头。
- 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用
- [ASP.net(C#)]最简单的一个存储过程
- 从ASP.NET Web API 2 (C#)开始说起
- 一个简单的AJAX实现,基于C#的ASP.Net,包括服务器端的程序代码
- 一个简单的C#多线程间同步的例子 from 小菜鸟之家~ASP.NET 入门中
- asp.net(C#)一个简单的数据访问类
- ASP.NET Web API(C#)实现简单增删改查
- [转]推荐一个简单、轻量、功能非常强大的C#/ASP.NET定时任务执行管理器组件–FluentScheduler
- 一个简单的AJAX实现,基于C#的ASP.Net,包括服务器端的程序代码
- 推荐一个简单、轻量、功能非常强大的C#/ASP.NET定时任务执行管理器组件–FluentScheduler
- 【C#】对异步请求处理程序IHttpAsyncHandler的理解和分享一个易用性封装 【手记】走近科学之为什么明明实现了IEnumerable<T>的类型却不能调用LINQ扩展方法 【手记】手机网页弹出层后屏蔽底层的滑动响应 【手记】ASP.NET提示“未能创建类型”处理 【Web】一个非常简单的移动web消息框 【手记】解决EXCEL跑SQL遇“查询无法运行或数据库表无法打开...”
- 推荐一个简单、轻量、功能非常强大的C#/ASP.NET定时任务执行管理器组件–FluentScheduler定时器
- 推荐一个简单、轻量、功能非常强大的C#/ASP.NET定时任务执行管理器组件–FluentScheduler
- Asp.Net大型项目实践(8)-从最简单开始一个ExtJs做的登录页(附源码,在线demo)
- 通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用
- 一个简单的用ASP.NET/C#开发的组件化Web应用程序(附源代码)
- 收了100元辛苦费,写了一个最简单的C#ASP.NET的3层架构例子代码,源码是通过代码生成器生成的【写程序的效率神奇的高】
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
- Asp.net 在网页编写C#代码示例-- 一个简单的web MsSql 命令执行环境
- 使用C# Builder建一个简单的ASP.NET应用程序