[转载]返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API

作者：webabcd

介绍 mvc 之 mvc 4.0 新特性之 Web API

开发一个 CRUD 的 Demo，服务端用 Web API，并使其支持 jsonp 协议，客户端用 jQuery

示例 1、自定义一个 JsonMediaTypeFormatter，以支持 jsonp 协议 MyJsonFormatter.cs

/** 自定义一个 JsonMediaTypeFormatter，以支持 jsonp 协议*/using System;using System.Collections.Generic;using System.IO;using System.Linq;using ;using .Http;using .Http.Formatting;using .Http.Headers;using System.Threading.Tasks;using System.Web;namespace MVC40.Controllers{public class MyJsonFormatter : JsonMediaTypeFormatter{// jsonp 回调的函数名称private string JsonpCallbackFunction;public MyJsonFormatter(){}public override bool CanWriteType(Type type){return true;}// 每个请求都先来这里public override MediaTypeFormatter GetPerRequestFormatterInstance(Type type, .Http.HttpRequestMessage request, MediaTypeHeaderValue mediaType){var formatter = new MyJsonFormatter(){JsonpCallbackFunction = GetJsonCallbackFunction(request)};// 增加一个转换器，以便枚举值与枚举名间的转换formatter.SerializerSettings.Converters.Add(new Newtonsoft.Json.Converters.StringEnumConverter());// 增加一个转换器，以方便时间格式的序列化和饭序列化var dateTimeConverter = new Newtonsoft.Json.Converters.IsoDateTimeConverter();dateTimeConverter.DateTimeFormat = "yyyy-MM-dd HH:mm:ss";formatter.SerializerSettings.Converters.Add(dateTimeConverter);// 排版返回的 json 数据，使其具有缩进格式，以方便裸眼查看formatter.SerializerSettings.Formatting = Newtonsoft.Json.Formatting.Indented;return formatter;}// 序列化的实现public override Task WriteToStreamAsync(Type type, object value, Stream stream, HttpContent content, TransportContext transportContext){if (string.IsNullOrEmpty(JsonpCallbackFunction))return base.WriteToStreamAsync(type, value, stream, content, transportContext);StreamWriter writer = null;try{writer = new StreamWriter(stream);writer.Write(JsonpCallbackFunction + "(");writer.Flush();}catch (Exception ex){try{if (writer != null)writer.Dispose();}catch { }var tcs = new TaskCompletionSource<object>();tcs.SetException(ex);return tcs.Task;}return base.WriteToStreamAsync(type, value, stream, content, transportContext).ContinueWith(innerTask =>{if (innerTask.Status == TaskStatus.RanToCompletion){writer.Write(")");writer.Flush();}}, TaskContinuationOptions.ExecuteSynchronously).ContinueWith(innerTask =>{writer.Dispose();return innerTask;}, TaskContinuationOptions.ExecuteSynchronously).Unwrap();}// 从请求 url 中获取其参数 callback 的值private string GetJsonCallbackFunction(HttpRequestMessage request){if (request.Method != HttpMethod.Get)return null;var query = HttpUtility.ParseQueryString(request.RequestUri.Query);var queryVal = query["callback"];if (string.IsNullOrEmpty(queryVal))return null;return queryVal;}}}

2、在 Global 中做的一些配置 Global.asax.cs

using MVC40.Controllers;using Newtonsoft.Json;using Newtonsoft.Json.Converters;using System;using System.Collections.Generic;using System.Linq;using .Http.Formatting;using .Http.Headers;using System.Web;using System.Web.Http;using System.Web.Mvc;using System.Web.Optimization;using System.Web.Routing;namespace MVC40{public class WebApiApplication : System.Web.HttpApplication{protected void Application_Start(){AreaRegistration.RegisterAllAreas();WebApiConfig.Register(GlobalConfiguration.Configuration);FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);RouteConfig.RegisterRoutes(RouteTable.Routes);BundleConfig.RegisterBundles(BundleTable.Bundles);// 添加一个转换器 IsoDateTimeConverter，其用于日期数据的序列化和反序列化var dateTimeConverter = new IsoDateTimeConverter();dateTimeConverter.DateTimeFormat = "yyyy-MM-dd HH:mm:ss";JsonSerializerSettings serializerSettings = new JsonSerializerSettings();serializerSettings.Converters.Add(dateTimeConverter);// 清除全部 Formatter（默认有 4 个，分别是：JsonMediaTypeFormatter, XmlMediaTypeFormatter, FormUrlEncodedMediaTypeFormatter, JQueryMvcFormUrlEncodedFormatter）// GlobalConfiguration.Configuration.Formatters.Clear();// 如果请求 header 中有 accept: text/html 则返回这个新建的 JsonMediaTypeFormatter 数据var jsonFormatter = new JsonMediaTypeFormatter();jsonFormatter.SerializerSettings = serializerSettings;// jsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html")); jsonFormatter.MediaTypeMappings.Add(new RequestHeaderMapping("accept", "text/html", StringComparison.InvariantCultureIgnoreCase, true, new MediaTypeHeaderValue("text/html")));GlobalConfiguration.Configuration.Formatters.Insert(0, jsonFormatter);// 请求 url 中如果带有参数 xml=true，则返回 xml 数据GlobalConfiguration.Configuration.Formatters.XmlFormatter.MediaTypeMappings.Add(new QueryStringMapping("xml", "true", "application/xml"));// 请求 url 中如果带有参数 jsonp=true，则返回支持 jsonp 协议的数据（具体实现参见 MyJsonFormatter.cs）MyJsonFormatter formatter = new MyJsonFormatter();formatter.MediaTypeMappings.Add(new QueryStringMapping("jsonp", "true", "application/javascript"));GlobalConfiguration.Configuration.Formatters.Add(formatter);}}}

关于项目模版生成的代码的简短说明

<p>项目模板更新了，原来堆在 Global.asax.cs 中的配置都分出去了<br />在 App_Start 文件夹里自动生成的 BundleConfig.cs 用于对多个 css 或 js 做打包和压缩<br />在 App_Start 文件夹里自动生成的 FilterConfig.cs 用于配置全局的 Action Filter<br />在 App_Start 文件夹里自动生成的 RouteConfig.cs 用于配置路由<br />在 App_Start 文件夹里自动生成的 WebApiConfig.cs 用于为 web api 配置路由</p>

web api 的路由配置 WebApiConfig.cs

/** web api 的路由配置*/using System;using System.Collections.Generic;using System.Linq;using System.Web.Http;namespace MVC40{public static class WebApiConfig{public static void Register(HttpConfiguration config){// 此配置为默认生成的配置 config.Routes.MapHttpRoute(name: "DefaultApi",routeTemplate: "api/{controller}/{id}",defaults: new { id = RouteParameter.Optional });// 由于默认为 web api 生成的路由配置，无 action 配置，所以只能通过 http 方法来匹配 action// 如果需要带 action 的路由则使用以下配置即可/*routes.MapHttpRoute(name: "ActionApi",routeTemplate: "api/{controller}/{action}/{id}",defaults: new { id = RouteParameter.Optional });*/}}}

3、提供 Web API 服务的 Controller（数据层用 Entity Framework 5.0 来实现） ProductsController.cs

/** Web API* * c - POST - 创建* r - GET - 读取* u - PUT - 更新* d - DELETE - 删除* * 注：win8 的 iis 默认不会安装 ，需要在“程序和功能”中手动添加*/using MVC40.Models;using System;using System.Collections.Generic;using System.Data;using System.Linq;using ;using .Http;using System.Threading.Tasks;using System.Web.Http;namespace MVC40.Controllers{/** Web API 的 Controller 要从 ApiController 继承* * 默认：http get 找 controller 的 get(), http post 找 controller 的 post(), http put 找 controller 的 put(), http delete 找 controller 的 delete()*/public class ProductsController : ApiController{// 获取全部 Product 数据：get http://localhost:17612/api/productspublic IEnumerable<Product> Get(){NorthwindEntities db = new NorthwindEntities();var products = from p in db.Productsorderby p.ProductID descendingselect p;return products.ToList();}// 根据 ProductId 获取指定的 Product 数据：get http://localhost:17612/api/products/3public Product Get(int id){NorthwindEntities db = new NorthwindEntities();var product = db.Products.SingleOrDefault(p => p.ProductID == id);return product;}// 新建 Product：post 一个 product 到 http://localhost:17612/api/productspublic void Post(Product product){NorthwindEntities db = new NorthwindEntities();db.Products.Add(product);db.SaveChanges();}// 更新 Product：put 一个 product 到 http://localhost:17612/api/productspublic void Put(Product product){NorthwindEntities db = new NorthwindEntities();db.Products.Attach(product);var entry = db.Entry(product);entry.State = EntityState.Modified;db.SaveChanges();}// 根据 ProductId 删除指定的 Product 数据：delete http://localhost:17612/api/products/3public void Delete(int id){NorthwindEntities db = new NorthwindEntities();var product = db.Products.SingleOrDefault(p => p.ProductID == id);db.Products.Remove(product);db.SaveChanges();}}}

4、调用 Web API 的客户端（用 jQuery 实现） CRUDDemo.cshtml

@{Layout = null;}<!DOCTYPE html><html><head><title>演示如何通过 jQuery 调用 web api 做 crud 操作</title><script src="../Scripts/jquery-1.7.1.js" type="text/javascript"></script></head><body><table id="tblProducts" border="1"><tr><th>Product Id</th><th>Product Name</th><th>Unit Price</th><th>Actions</th></tr><tr><td><input type="text" id="txtProductId" size="5" disabled /></td><td><input type="text" id="txtProductName" /></td><td><input type="text" id="txtUnitPrice" /></td><td><input type="button" name="btnInsert" value="Insert" /></td></tr></table><script type="text/javascript">$(document).ready(function () {loadProductsAsync();});// 异步获取全部 Product 数据function loadProductsAsync() {$.getJSON("/api/products?jsonp=true&callback=?", loadProductsCompleted).error(function () { alert('error') });}// 显示获取到的 Product 数据function loadProductsCompleted(data) {$("#tblProducts").find("tr:gt(1)").remove();$.each(data, function (key, val) {var tableRow = '<tr>' +'<td>' + val.ProductID + '</td>' +'<td><input type="text" value="' + val.ProductName + '"/></td>' +'<td><input type="text" value="' + val.UnitPrice + '"/></td>' +'<td><input type="button" name="btnUpdate" value="Update" /> <input type="button" name="btnDelete" value="Delete" /></td>' +'</tr>';$('#tblProducts').append(tableRow);});$("input[name='btnInsert']").click(onInsert);$("input[name='btnUpdate']").click(onUpdate);$("input[name='btnDelete']").click(onDelete);}// 新增 Product 数据function onInsert(evt) {var productName = $("#txtProductName").val();var unitPrice = $("#txtUnitPrice").val();// 构建需要 post 的数据，即需要添加的数据var data = '{"ProductName":"' + productName + '","UnitPrice":' + unitPrice + '}';$.ajax({type: 'POST',url: '/api/products/',data: data,contentType: "application/json; charset=utf-8",dataType: 'json',success: function (results) {$("#txtProductName").val('');$("#txtUnitPrice").val('');alert('Product Added');loadProductsAsync();}})}// 更新 Product 数据function onUpdate(evt) {var productId = $(this).parent().parent().children().get(0).innerHTML;var cell = $(this).parent().parent().children().get(1);var productName = $(cell).find('input').val();cell = $(this).parent().parent().children().get(2);var unitPrice = $(cell).find('input').val();// 构建需要 put 的数据，即需要更新的数据var data = '{"ProductID":"' + productId + '","ProductName":"' + productName + '","UnitPrice":' + unitPrice + '}';$.ajax({type: 'PUT',url: '/api/products/',data: data,contentType: "application/json; charset=utf-8",dataType: 'json',success: function (results) {alert('Product Updated');}})}// 删除指定的 Product 数据function onDelete(evt) {var productId = $(this).parent().parent().children().get(0).innerHTML;$.ajax({type: 'DELETE',url: '/api/products/' + productId,contentType: "application/json; charset=utf-8",dataType: 'json',success: function (results) {alert('Product Deleted');loadProductsAsync();}})}</script></body></html>