ASP.NET Web API实践系列02,在MVC4下的一个实例, 包含EF Code First,依赖注入, Bootstrap等

本篇体验在MVC4下，实现一个对Book信息的管理，包括增删查等，用到了EF Code First, 使用Unity进行依赖注入，前端使用Bootstrap美化。先上最终效果：

→创建一个MVC4项目，选择Web API模版。

→在Models文件夹创建一个Book.cs类。

namespace MyMvcAndWebApi.Models

{

    public class Book

    {

        public int Id { get; set; }

        public string Name { get; set; }

        public decimal Price { get; set; }

    }

}

→在Models文件夹创建BookInitializer类，用来初始化数据库表数据。

using System.Data.Entity;


namespace MyMvcAndWebApi.Models

{

    public class BookInitializer : DropCreateDatabaseIfModelChanges<BookStore>

    {

        protected override void Seed(BookStore context)

        {

            context.Books.Add(new Book() {Name = "我有一头小毛驴", Price = 200M});

            context.Books.Add(new Book() { Name = "今天天气真好", Price = 300M });

            context.Books.Add(new Book() { Name = "秋天是落叶的季节", Price = 500M });

        }

    }

}

→在Models文件夹中，创建BookStore类，派生于DbContext。

using System.Data.Entity;


namespace MyMvcAndWebApi.Models

{

    public class BookStore : DbContext

    {

        public BookStore() : base("conn")

        {

            Database.SetInitializer(new BookInitializer());

        }

       public  DbSet<Book> Books { get; set; }

    }

}

→在Web.config中配置连接字符串。

  <connectionStrings>

    ......

   <add name="conn" connectionString="Data Source=.;User=yourusername;Password=yourpassword;Initial Catalog=BookStore;Integrated Security=True" providerName="System.Data.SqlClient" />

  </connectionStrings>

→Repository首先需要一个接口，在Models文件夹中创建IBookRepository接口。

using System.Collections.Generic;


namespace MyMvcAndWebApi.Models

{

    public interface IBookRepository

    {

        IEnumerable<Book> GetAll();

        Book Get(int id);

        Book Add(Book book);

        void Remove(int id);

        bool Update(Book book);

    }

}

→实现IBookRepository接口，用到BookStore这个上下文。

using System.Collections.Generic;

using System.Data;


namespace MyMvcAndWebApi.Models

{

    public class BookRepository : IBookRepository

    {

        private BookStore db = new BookStore();


        public BookRepository(){}


        public IEnumerable<Book> GetAll()

        {

            return db.Books;

        }


        public Book Add(Book book)

        {

            db.Books.Add(book);

            db.SaveChanges();

            return book;

        }


        public void Remove(int id)

        {

            Book book = db.Books.Find(id);

            db.Books.Remove(book);

            db.SaveChanges();

        }


        public bool Update(Book book)

        {

            db.Entry(book).State = EntityState.Modified;

            db.SaveChanges();

            return true;

        }



        public Book Get(int id)

        {

            return db.Books.Find(id);

        }

    }

}

→有了接口和实现，接下来会用到依赖注入。选择使用Unity，在NuGet中下载。

→首先需要一个依赖注入容器。在项目下创建Helper文件夹，在其中创建IoCContainer类。

using System;

using System.Collections.Generic;

using System.Web.Http.Dependencies;

using Microsoft.Practices.Unity;


namespace MyMvcAndWebApi.Helper

{

    class ScopeContainer : IDependencyScope

    {

        protected IUnityContainer container;


        public ScopeContainer(IUnityContainer container)

        {

            if (container == null)

            {

                throw new ArgumentNullException("container");

            }

            this.container = container;

        }


        public object GetService(Type serviceType)

        {

            if (container.IsRegistered(serviceType))

            {

                return container.Resolve(serviceType);

            }

            else

            {

                return null;

            }

        }


        public IEnumerable<object> GetServices(Type serviceType)

        {

            if (container.IsRegistered(serviceType))

            {

                return container.ResolveAll(serviceType);

            }

            else

            {

                return new List<object>();

            }

        }


        public void Dispose()

        {

            container.Dispose();

        }

    }


    class IoCContainer : ScopeContainer, IDependencyResolver

    {

        public IoCContainer(IUnityContainer container)

            : base(container)

        {

        }


        public IDependencyScope BeginScope()

        {

            var child = container.CreateChildContainer();

            return new ScopeContainer(child);

        }

    }

}

→在Global.asax中注册Unity。

sing System.Web.Http;

using System.Web.Mvc;

using System.Web.Optimization;

using System.Web.Routing;

using Microsoft.Practices.Unity;

using MyMvcAndWebApi.Controllers;

using MyMvcAndWebApi.Helper;

using MyMvcAndWebApi.Models;


namespace MyMvcAndWebApi

{

    // 注意: 有关启用 IIS6 或 IIS7 经典模式的说明，

    // 请访问 http://go.microsoft.com/?LinkId=9394801


    public class WebApiApplication : System.Web.HttpApplication

    {

        //注册控制器，接口和实现

        void ConfigureApi(HttpConfiguration config)

        {

            var unity = new UnityContainer();

            unity.RegisterType<BooksController>();

            unity.RegisterType<IBookRepository, BookRepository>(new HierarchicalLifetimeManager());

            config.DependencyResolver = new IoCContainer(unity);


        }


        protected void Application_Start()

        {

            AreaRegistration.RegisterAllAreas();


            //注册依赖注入

            ConfigureApi(GlobalConfiguration.Configuration);


            WebApiConfig.Register(GlobalConfiguration.Configuration);

            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

            RouteConfig.RegisterRoutes(RouteTable.Routes);

            BundleConfig.RegisterBundles(BundleTable.Bundles);

        }

    }

}

→创建一个空的Api控制器，编写如下：

using System;

using System.Collections.Generic;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using MyMvcAndWebApi.Models;


namespace MyMvcAndWebApi.Controllers

{

    public class BooksController : ApiController

    {

        //_repository运行时变量，在首次引用IBookRepository方法时动态分配内存

        private static IBookRepository _repository;


        public BooksController(IBookRepository repository)

        {

            if (repository == null)

            {

                throw new ArgumentNullException("repository");

            }

            _repository = repository;

        }


        //根据惯例，如果action名称以Get开头，那就接收Get请求

        public IEnumerable<Book> GetAllBooks()

        {

            return _repository.GetAll();

        }


        //ASP.NET Web API会自动帮我们把URL中的字符串id转换成参数类型int

        public Book GetBook(int id)

        {

            Book book = _repository.Get(id);

            if (book == null)

            {

                //HttpResponseException封装返回的异常

                //HttpResponseMessage封装返回的信息

                throw new  HttpResponseException(new HttpResponseMessage(HttpStatusCode.NotFound));

            }

            return book;

        }


        //添加

        //action名以post开头，按照惯例，接收post请求

        //客户端发送来序列化的Book对象，在服务端对Book对象反序列化

        public HttpResponseMessage PostBook(Book book)

        {

            book = _repository.Add(book);


            // Web API默认返回的状态码为200，可是，根据HTTP/1.1协议，在添加完，我们希望返回201状态码

            var response = Request.CreateResponse(HttpStatusCode.Created, book);


            //返回新创建资源的url

            string uri = Url.Route(null, new {id = book.Id});


            response.Headers.Location = new Uri(Request.RequestUri, uri);

            return response;

        }


        //修改

        //参数id从url中获取，book从request中反序列化

        //根据惯例，Put开头的action，接收put请求

        public void PutBook(int id, Book book)

        {

            book.Id = id;

            if (!_repository.Update(book))

            {

                throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.NotFound));

            }

        }


        //删除

        //根据管理，Delete开头接收delete请求

        public HttpResponseMessage DeleteBook(int id)

        {

            _repository.Remove(id);


            //返回200状态码表示删除成功

            //返回202状态码表示正在删除

            //返回204状态码表示没有内容

            return new HttpResponseMessage(HttpStatusCode.NoContent);

        }

    }

}

以上，所有action方法名称都符合了惯例。

→修改Home/Index.cshtml,我们在此使用jquery与服务端api控制器进行交互。

@section scripts {

    <script src="@Url.Content("~/Scripts/jquery-1.6.2.js")" type="text/javascript"> </script>

    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"> </script>

    <script src="@Url.Content("~/Scripts/jQuery.tmpl.js")" type="text/javascript"> </script>

    <script type="text/javascript">

        $(function () {


            //Get请求

            $.getJSON(

                "api/books",

                function (data) {

                    $.each(data,

                        function (index, value) {

                            $("#bookTemplate").tmpl(value).appendTo("#books");

                        }

                    );

                    $("#loader").hide("slow");

                    $("#addBook").show("slow");

                }

            );


            //添加

            $("#addBook").submit(function () {

                $.post(

                    "api/books",

                    $("#addBook").serialize(), //序列化Book对象

                    function (value) {

                        $("#bookTemplate").tmpl(value).appendTo("#books");

                        $("#name").val("");

                        $("#price").val("");

                    },

                    "json"

                );

                return false;

            });


            //删除

            $(".removeBook").live("click", function () {

                $.ajax({

                    type: "DELETE",

                    url: $(this).attr("href"),

                    context: this,

                    success: function () {

                        $(this).closest("li").remove();

                    }

                });

                return false;

            });

            $("input[type=\"submit\"], .removeBook, .viewImage").button();

        });


        //根据id搜索

        function find() {

            var id = $('#bookId').val();

            $.getJSON("api/books/" + id,

                function (data) {

                    var str = data.Name + ': $' + data.Price;

                    $('#book').html(str);

                })

                .fail(

                    function (jqXHR, textStatus, err) {

                        $('#book').html('Error: ' + err);

                    });

        }


    </script>

    <script id="bookTemplate" type="text/html">

        <li>

            <p>

                <strong> Book ID:</strong> ${ Id}

                <br />

                <strong> Book Name:</strong> ${ Name }

                <br />

                <strong> Price: $</strong> ${ Price }

            </p>

            <p>

                <a href="${ Self }" class="button small red removeBook">移除</a>

            </p>

        </li>

    </script>

}

<body>

    <form method="post" id="addBook">

    <div class="container_16">

        <h1 class="title-01">Book信息</h1>

    </div>

    <div class="container_16">

        <div class="grid_16 body-container">

            <div class="margin grid_6 alpha">

                <label for="Name">

                    Name</label><br />

                <input type="text" id="name" name="Name" class="text grid_4" />

                <br class="clear" />

                <label for="Price">

                    Price</label><br />

                <input type="text" id="price" name="Price" class="text grid_4" />

                <br class="clear" />

                <input type="submit" value="添加" class="button small green" />

                <br />

                <br />

                <br class="clear" />

                <strong id="book">@*   <label id="book">

                    </label>*@ </strong>

                <br />

                <br class="clear" />

                <br />

                <label for="bookId">

                    根据ID搜索

                </label>

                <br />

                <input type="text" id="bookId" size="20" class="text grid_4" /><br class="clear" />

                <input type="button" value="搜索" onclick="find();" class="button small gray" />

            </div>

            <div class="grid_8 omega">

                <img id="loader" src="data:images/ajax-loader.gif" />

                <ul id="books" class="books">

                </ul>

            </div>

        </div>

    </div>

    <br class="clear" />

    <div class="footer clearfix">

    </div>

    </form>

</body>

另外，有关Bootsrap的样式在BundleConfig类中定义。

参考资料：http://www.codeproject.com/Articles/344078/ASP-NET-WebAPI-Getting-Started-with-MVC-and-WebAP