本篇体验在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=9394801public 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转换成参数类型intpublic 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);//返回新创建资源的urlstring 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