Ver 1.0 – 2016, FIT, HCMUP .NET Technology Lab : MVC5 – LAB 07: WEB API

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 1

Lab07: Web API Lưu ý: Để thực hành, các bạn phải cài Visual Studio 2013 trở lên mới hỗ trợ MVC5.

SPA – Single Page Appication là gì? Web API là gì?

Bài này một số phần tham khảo từ: Getting Started with ASP.NET Web API 2 (C#)

http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api

1 Tự tạo Web API – Getting Started with ASP.NET Web API 2 (C#)

1.1 Tạo project API dạng Empty

Ver 1.0 – 2016, FIT, HCMUP .NET Technology Lab : MVC5 – LAB 07: WEB API

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 2

1.2 Tạo mới Model Book

namespace MVC5_Lab07_API_SPA.Models { public class Book { public int ID { get; set; } public string BookName { get; set; } public double Price { get; set; } public string Author { get; set; } } }

1.3 Thêm mới Controller dạng API – Empty

Ver 1.0 – 2016, FIT, HCMUP .NET Technology Lab : MVC5 – LAB 07: WEB API

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 3

1.4 Tạo 2 hàm GetAllBook và GetBook như sau:

namespace MVC5_Lab07_API_SPA.Controllers { public class BookController : ApiController { Book[] ebook = new Book[] { new Book {ID = 1, BookName = "MVC5", Price = 225000, Author = "HIENLTH" }, new Book {ID = 2, BookName = "Angular JS", Price = 170000, Author = "HIENLTH" }, new Book {ID = 3, BookName = "Software Engineering", Price= 222000, Author = "BaoTN" } }; public IEnumerable<Book> getAllBook() { return ebook; } public IHttpActionResult getBook(int id) { var sach = ebook.SingleOrDefault(p => p.ID == id); if (sach == null) return NotFound(); else return Ok(sach); } } }

1.5 Test API vừa tạo

Cách thức sử dụng API như sau:

Controller Method URI

getAllBook /api/Book

getBook /api/Book/id

Test thử:

Ver 1.0 – 2016, FIT, HCMUP .NET Technology Lab : MVC5 – LAB 07: WEB API

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 4

Ở đây ta không thấy Action Method của Controller đâu cả do file mặc định

WebApiConfig.cs như sau:

Ver 1.0 – 2016, FIT, HCMUP .NET Technology Lab : MVC5 – LAB 07: WEB API

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 5

Để hiển thị thêm Method ta chỉnh sửa tập tin trên thành:

public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API configuration and services // Web API routes config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi",

routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); } }

Lúc đó demo gọi API là:

<host>/api/Book/getBook/2

<host>/api/Book/getAllBook

1.6 Xây dựng trang SPA dạng thuần HTML gọi API

Source trang như sau:

Code HTML:

Ver 1.0 – 2016, FIT, HCMUP .NET Technology Lab : MVC5 – LAB 07: WEB API

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 6

Code cho javascript/jquery:

<script> function formatItem(item) { return item.BookName + ' (' + item.Author + ') : ' + item.Price; } $(document).ready(function () { //hiển thị tất cả dữ liệu ra thẻ ul $.getJSON('api/Book/getAllBook') .done(function (data) { $.each(data, function (key, item) { $('<li>', { text: formatItem(item) }).appendTo($('#dssach')); }); }); //Xử ký nút Tìm $("#btnTim").click(function (e) { var id = $("#txtTim").val(); $.getJSON('api/Book/getBook/' + id) .done(function (data) { $("#dKQ").text(formatItem(data)); }) .fail(function (err) { $("#dKQ").text("Lỗi : " + err); }); }); }); </script>

Demo ứng dụng:

Ver 1.0 – 2016, FIT, HCMUP .NET Technology Lab : MVC5 – LAB 07: WEB API

Ths. Lương Trần Hy Hiến, KHOA CNTT – TRƯỜNG ĐH SƯ PHẠM TP. HCM 7

2 Xây dựng SachAPIController

2.1 Tạo Entity Framework Data Model

2.2 Tạo API Controller

2.3 Demo gọi API