Ngay từ khi ra đời có thể nói ASP.NET MVC là một mô hình lập trình web chiến lược của Microsoft. Đối với những ai ưa thích và có niềm đam mê với “.NET”, phát triển website thông qua ASP.NET MVC là kĩ năng không thể thiếu. Bài viết này sẽ hướng dẫn lập trình web API Service (MVC5) mới nhất để giúp bạn hình dung rõ hơn.
Table of Contents
Website API là gì
Asp.net web API (Application Programming Interface) là một framework giúp việc xây dựng HTTP service một cách dễ dàng hơn. Chúng đủ sức làm phát triển cho nhiều clients khác nhau như trình duyệt, mobile app. Web API là một hệ thống góp phần phát triển các ứng dụng dựa trên Restfull service trong “.Net”. Bạn có thể hình dung rõ hơn qua hình dưới đây:
Hoặc bạn cũng có thể tìm hiểu rõ hơn tại đường link: http://www.asp.net/web-api
Máy tính các bạn cần cài đặt Visual Studio 2013 (hoặc là Visual Studio 2012) để mở mẫu Project cũng như phát triển ứng dụng web API.
Cấu trúc của một MVC
MVC thiết thế gồm ba phần cơ bản là Model,View và Controller. Trong đó:
- Model: đóng vai trò chứa và thể hiện các đặc tính, logic ứng dụng. Hoặc cũng có thể hiểu Model là sự thay mặt cho dữ liệu và logic cốt lõi. Nó chính là những lớp (class) mang thông tin về đối tượng ta cần thao tác, làm việc. Ví dụ: “Sách” chứa các thông tin trên nó như “Tên”, “Tác giả”, “Ngày phát hành”, “Giá”, “Nhà sản xuất”, …
- View: có nhiệm vụ thể hiện một hay nhiều Model một cách trực quan. Hay nó nhận thông tin từ một hay nhiều Model sau đó biểu diễn lên các trang web.
- Controller: nằm giữa tầng View và Model; có nhiệm vụ tìm kiếm, xử lý một hoặc nhiều Model, sau đó gửi Model đó qua View để View hiển thị.
Hướng dẫn lập trình web API Service (MVC5) mới nhất
Tạo project
Các bước để tạo một project mới được thực hiện như sau:
Bước 1: Mở File/ New Project
Bước 2: Tại danh sách mới hiện ra, chọn “ASP.NET Web Application (.NET Framework)” ở góc trái màn hình. Đặt tên và chọn nơi lưu Project, sau đó nhấn “OK”.
Bước 3: Tại màn hình “New ASP.NET Web Application”, chọn “MVC” và OK
Bước 4: Nhấn F5 để khởi động Visual Studio
Tạo Data Model
Trong phần tiếp theo hướng dẫn lập trình web API Service (MVC5) mới nhất, chúng tôi sẽ hướng dẫn bạn thao tác thực hiện là nhấn chuột phải tại mục Models/ New/ Class.
Tạo controller
Để tạo Controller, các bước thực hiện như sau:
Bước 1: Nhấp chuột phải tại mục Controller/ “Add”/ “Controller”
Bước 2: Tại cửa sổ “Add Scaffold”, chọn “Web API 2 Controller with actions, using Entity Framework”.
Sau đó màn hình sẽ hiển thị cửa sổ Add controller
Bước 3:
- Tại Model class, chọn Category class.
- Tích vào ô “Use async controller actions”.
- Trong mục “Controller Name”, controller auto được điền vào.
Tiếp đến nhấn (+) ở mục “Data context Class”, gõ tên Data context class trên cửa sổ “New Data Context” theo mong muốn.Chẳng hạn ở đây class có tên : WebAPIDemoContext. ProductsController được tạo tương tự trên.
Thao tác với Entity framework
Demo này sử dụng Code First Migrations để thực hiện init data và thao tác với Sql server.
Chọn “Tool”/ “Nuget Package Manager”/ “Package Manage Console”. Trong cửa sổ Package Manage Console gõ lệnh sau
| Enable-Migrations |
Một thư mục Migrations được xây dựng cùng file “Configuration”. Tiếp theo chúng ta sẽ init data bằng method Seed trong class. Đây là method xây dựng sẵn trong class DbContext của Entity Framework và chúng ta hoàn toàn đủ sức ghi đè tùy theo trường hợp sử dụng. Chúng được minh họa như sau:
| protectedoverridevoidSeed(WebAPIDemoContext context)
context.Categories.AddOrUpdate(x => x.Id,newCategory Id =1, Name =”Mobile” ,newCategory Id =2, Name =”Tablet” ,newCategory Id =3, Name =”Smart watch” ); context.Products.AddOrUpdate(x => x.Id,newProduct Id =1, Name =”Product 1″, CategoryId =1, Price =9.99M, ,newProduct Id =2, Name =”Product 2″, CategoryId =1, Price =12.95M, ,newProduct Id =3, Name =”Product 3″, CategoryId =2, Price =15, ,newProduct Id =4, Name =”Product 4″, CategoryId =3, Price =10,
);
|
Chúng ta đang có một số data check cho demo, sau đó ta cần tới một class để tạo table và insert những bản ghi trên vào sql server, để thực hiện điều đó ta gõ lệnh:
| Add-Migration Initial
Update-Database |
File migration được tạo ra như sau:
| namespace WebAPIDemo.Migrations
using System;using System.Data.Entity.Migrations;publicpartialclassInitial : DbMigrationpublicoverridevoidUp() CreateTable(“dbo.Categories”, c =>new Id = c.Int(nullable: false, identity: true), Name = c.String(nullable: false), ) .PrimaryKey(t => t.Id);CreateTable(“dbo.Products”, c =>new Id = c.Int(nullable: false, identity: true), Name = c.String(nullable: false), Price = c.Decimal(nullable: false, precision: 18, scale: 2), CategoryId = c.Int(nullable: false), ) .PrimaryKey(t => t.Id) .ForeignKey(“dbo.Categories”, t => t.CategoryId, cascadeDelete: true) .Index(t => t.CategoryId); publicoverridevoiddownload() DropForeignKey(“dbo.Products”, “CategoryId”, “dbo.Categories”);DropIndex(“dbo.Products”, new[] “CategoryId” );DropTable(“dbo.Products”);DropTable(“dbo.Categories”); |
Với đoạn code trên, Code First tự động liên kết, tạo database, table và insert data tới sql server trong lần khởi chạy đầu tiên, những lần sau đó nếu có thay đổi thì migration DB sẽ được update ngược lại. Sau đó chúng ta nhấn F5 để chạy web, kiểm tra database trong Server Explorer của Visual studio. Việc hoàn tất khởi tạo phải có giao diện như sau:
Thiết lập Client với Knockout js
Hướng dẫn lập trình web API Service (MVC5) mới nhất sẽ bao gồm các bước để thiết lập Client. Knockout js là một thư viện Javascript,trong đó sử dụng mô ảnh Model-View-ViewModel (MVVM). Mô hình hoạt động của nó được thể hiện như hình sau:
Các thao tác để thiết lập Client:
- Add “knockout js”. Trong Package manager console gõ lệnh sau:
| Install-Package knockoutjs |
- Tạo lượt xem Model:
| varViewModel=function () var self =this;
self.products = không.observableArray(); self.error = ko.observable();var productsUri =’/api/products/’;functionajaxHelper(uri, method, data) self.error(”); // Clear error messagereturn $.ajax( type: method, url: uri, dataType: ‘json’, contentType: ‘application/json’, data: data ? JSON.stringify(data) : null).thất bại(function (jqXHR, textStatus, errorThrown) self.error(errorThrown); ); functiongetAllProducts() ajaxHelper(productsUri, ‘GET’).done(function (data) self.products(data); ); // Fetch the initial data.getAllProducts(); self.detail = ko.observable(); self.getProductDetail=function (item) ajaxHelper(productsUri + item.Id, ‘GET’).done(function (data) self.detail(data); ); self.categories = không.observableArray(); self.newProduct= Category: không.observable(), Name: không.observable(), Price: ko.observable(), var categoriesUri =’/api/categories/’;functiongetCategories() ajaxHelper(categoriesUri, ‘GET’).done(function (data) self.categories(data); ); self.addProduct=function (formElement) var product = CategoryId: self.newProduct.Category().Id, Name: self.newProduct.Name(), Price: self.newProduct.Price(), ;ajaxHelper(productsUri, ‘POST’, product).done(function (item) self.products.push(item); ); getCategories(); ; ko.applyBindings(newViewModel()); |
- Binding trên view
| class=”panel panel-default”>
class=”panel-heading”> class=”panel-title”>Products class=”panel-body”>
|
Trên đây chúng tôi đã hướng dẫn lập trình web API Service (MVC5) mới nhất. Hy vọng rằng những kiến thức này sẽ phần nào hỗ trợ bạn trong quá trình thực hiện lập trình trên nền tảng C++. Chúc bạn thành công!
