Asp .net WebApi 实践系列（一）webapi服务端+bootstrap+jq响应式异步请求Demo
这一系列文章，是我在大牛的博客里学到的，代码和那位大牛的几乎相似，跟随大牛的脚步，持续学习中。
这个webapi简单Demo的步骤有一下几步：
1.建立一个webapi项目
2.新建Book类
3.IBookRepository和BookRepository类
4.添加BooksController
5.修改Index.cshtml前端文件
简单WEBAPI项目
Book类
public class Book { public int Id { get; set; } public string Name { get; set; } public decimal Price { get; set; } }
IBookRepository类
public interface IBookRepository { IEnumerable<Book> GetAll(); Book Get(int id); Book Add(Book book); void Remove(int id); bool Update(Book book); }
BookRepository类
public class BookRepository:IBookRepository { private MvcAndApiContext db = new MvcAndApiContext(); 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); } }
还有CodeFirst那一套
public class MvcAndApiContext : DbContext { // You can add custom code to this file. Changes will not be overwritten. // // If you want Entity Framework to drop and regenerate your database // automatically whenever you change your model schema, please use data migrations. // For more information refer to the documentation: // http://msdn.microsoft.com/en-us/data/jj591621.aspx public MvcAndApiContext() : base("name=MvcAndApiContext") { } public System.Data.Entity.DbSet<MvcAndApi.Models.Book> Books { get; set; } }
public class BookInitializer:DropCreateDatabaseIfModelChanges<MvcAndApiContext> { protected override void Seed(MvcAndApiContext 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 }); } }
<add name="MvcAndApiContext" connectionString="Data Source=(localdb)\MSSQLLocalDB; Initial Catalog=MvcAndApiContext-20170412085607; Integrated Security=True; MultipleActiveResultSets=True; AttachDbFilename=|DataDirectory|MvcAndApiContext-20170412085607.mdf" providerName="System.Data.SqlClient" />
关键是BooksController的代码和我们之前的MVC几乎一样就是继承的基类不同（响应管道不同，这里我只知道皮毛，后续会详细研究）
using System; using System.Collections.Generic; using System.Data; using System.Data.Entity; using System.Data.Entity.Infrastructure; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using System.Web.Http.Description; using MvcAndApi.Models; namespace MvcAndApi.Controllers { public class BooksController : ApiController { //_repository运行时变量，在首次引用IBookRepository方法时动态分配内存 public IBookRepository _repository = new BookRepository(); //根据惯例，如果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); } } }
然后就是前台代码（运动jq的ui和tmpl）
@section scripts { <script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"> </script> <script src="@Url.Content("~/Scripts/jquery-ui-1.12.1.min.js")" type="text/javascript"> </script> <script src="@Url.Content("~/Scripts/jquery.loadTemplate-1.4.4.min.js")"></script> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <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="images/ajax-loader.gif" /> <ul id="books" class="books"></ul> </div> </div> </div> <br class="clear" /> <div class="footer clearfix"> </div> </form> </body>
结果显示
后续继续学习webapi
