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

简介: 原文:返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API[索引页][源码下载] 返璞归真 asp.net mvc (10) - asp.net mvc 4.
原文: 返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API

[索引页]
[源码下载]


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



作者:webabcd


介绍
asp.net mvc 之 asp.net 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 System.Net;
using System.Net.Http;
using System.Net.Http.Formatting;
using System.Net.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, System.Net.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 System.Net.Http.Formatting;
using System.Net.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

/*
 * ASP.NET Web API
 * 
 * c - POST - 创建
 * r - GET - 读取
 * u - PUT - 更新
 * d - DELETE - 删除
 * 
 * 注:win8 的 iis 默认不会安装 asp.net,需要在“程序和功能”中手动添加
 */

using MVC40.Models;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Net;
using System.Net.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/products
        public IEnumerable<Product> Get()
        {
            NorthwindEntities db = new NorthwindEntities();

            var products = from p in db.Products
                           orderby p.ProductID descending
                           select p;

            return products.ToList();
        }

        // 根据 ProductId 获取指定的 Product 数据:get http://localhost:17612/api/products/3
        public 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/products
        public void Post(Product product)
        {
            NorthwindEntities db = new NorthwindEntities();

            db.Products.Add(product);

            db.SaveChanges();

        }

        // 更新 Product:put 一个 product 到 http://localhost:17612/api/products
        public 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/3
        public 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 调用 asp.net 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>



OK
[源码下载]

目录
相关文章
|
6天前
|
前端开发 Java 测试技术
Java一分钟之Spring MVC:构建Web应用
【5月更文挑战第15天】Spring MVC是Spring框架的Web应用模块,基于MVC模式实现业务、数据和UI解耦。常见问题包括:配置DispatcherServlet、Controller映射错误、视图解析未设置、Model数据传递遗漏、异常处理未配置、依赖注入缺失和忽视单元测试。解决这些问题可提升代码质量和应用性能。注意配置`web.xml`、`@RequestMapping`、`ViewResolver`、`Model`、`@ExceptionHandler`、`@Autowired`,并编写测试用例。
292 3
|
6天前
|
设计模式 存储 前端开发
MVC(模型-视图-控制器)是一种在Web应用程序开发中广泛使用的软件设计模式
【5月更文挑战第12天】MVC模式是Web应用开发中的常见设计模式,将逻辑、数据和界面分离,提升代码可维护性和重用性。模型处理数据逻辑,视图展示数据,控制器协调用户输入与模型视图交互。优点包括代码分离、易维护、可扩展和组件重用,促进高效灵活的开发。
10 2
|
6天前
|
弹性计算 JSON Shell
基于Web API的自动化信息收集和整理
【4月更文挑战第30天】
21 0
|
3天前
|
缓存 监控 API
利用Python构建高性能的Web API后端服务
随着微服务架构的普及和RESTful API的广泛应用,构建高性能、可扩展的Web API后端服务变得尤为重要。本文将探讨如何利用Python这一强大且灵活的语言,结合现代Web框架和工具,构建高效、可靠的Web API后端服务。我们将分析Python在Web开发中的优势,介绍常用的Web框架,并通过实际案例展示如何设计并实现高性能的API服务。
|
4天前
|
前端开发 JavaScript 开发者
深入理解MVC和MVVM:构建现代Web应用的利器
深入理解MVC和MVVM:构建现代Web应用的利器
|
6天前
|
前端开发 Java Spring
Java Web ——MVC基础框架讲解及代码演示(下)
Java Web ——MVC基础框架讲解及代码演示
13 1
|
6天前
|
设计模式 前端开发 网络协议
Java Web ——MVC基础框架讲解及代码演示(上)
Java Web ——MVC基础框架讲解及代码演示
8 0
|
6天前
|
设计模式 前端开发 Java
19:Web开发模式与MVC设计模式-Java Web
19:Web开发模式与MVC设计模式-Java Web
24 4
|
6天前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
48 0
|
6天前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
23 0

热门文章

最新文章