Bài đăng nổi bật


Tạo ứng dụng ProductManager
Bằng ASP.NET Web API 2 (C #)
Bạn mất khoảng 3 phút để đọc ( tính theo tốc độ đọc trung bình 😊

ASP.NET Web API là một khung để xây dựng API web trên .NET Framework. Trong hướng dẫn này, bạn sẽ sử dụng API Web ASP.NET để tạo API web trả về danh sách các sản phẩm. Phần front-user là website sử dụng jQuery để hiển thị kết quả.

Step1: Create a Web API Project

Bạn tạo 1 Project mới đặt tên là ProductManager
Trong hộp thoại New ASP.NET Project, bạn chọn Empty template. Phía dưới “Add folders and core references for”, bạn chọn WEB API
Lưu ý: 
Bạn cũng có thể tạo dự án Web API bằng template " Web API ". Template Web API sử dụng ASP.NET MVC để cung cấp các trang trợ giúp API. Tôi đang sử dụng mẫu Empty cho hướng dẫn này vì tôi muốn cho các bạn thấy rằng: API Web vẫn chạy tốt mà không cần sử dụng template MVC. Nói chung, bạn không cần biết ASP.NET MVC để sử dụng API Web.

Step2: Adding a Model 

Trong Model bạn tạo mới Class đặt tên là Product
Product là một model đơn giản mô tả cho một sản phẩm.
Nếu Solution Explorer chưa hiển thị, nhấp vào menu View và chọn Solution Explorer . Trong Solution Explorer, bấm chuột phải vào thư mục Model. Từ menu ngữ cảnh, chọn Add rồi chọn Class .
Đặt tên cho class là "Product". Thêm các thuộc tính sau vào class Product.

Step3: Adding a Controller 

Trong API Web, Controller là một đối tượng xử lý các yêu cầu HTTP. Chúng ta sẽ thêm Controller để thể trả về danh sách các sản phẩm hoặc một sản phẩm được chỉ định bởi ID.
Khi sử dụng ASP.NET MVC, bạn đã quen thuộc với các Controller. Controller API Web tương tự như Controller MVC, chỉ khác là nó phải kế thừa lớp ApiController thay vì lớp Controller .
Trong Solution Explorer , bấm chuột phải vào thư mục Controller. Chọn Add và sau đó chọn Controller.
Trong hộp thoại Add Scaffold , chọn API Web 2 Controller - Empty . Nhấp vào Add .
Trong hộp thoại Add Controller , đặt tên cho Controller là "ProductsController". Nhấp vào Add .
Scaffolding tạo ra một tệp có tên ProductsController.cs trong thư mục Controllers.
Lưu ý
Thực chất, bạn không cần đặt controller của mình vào một thư mục có tên Controller. Tên thư mục chỉ là một cách thuận tiện để giúp sắp xếp các file của bạn.
Để giữ cho ví dụ đơn giản, các sản phẩm được lưu trữ trong một mảng cố định bên trong lớp Controller. Tất nhiên, trong một ứng dụng thực, bạn sẽ truy vấn cơ sở dữ liệu hoặc sử dụng một số nguồn dữ liệu ngoài khác.
ProductController có hai phương thức trả về sản phẩm:
Method GetAllProducts() trả về toàn bộ danh sách các sản phẩm như một IEnumerable <Product> loại.
Method GetProduct() trả về thông tin của 1 sản phẩm dựa vào id của sản phẩm.
Và như vậy, bạn có một WEB API hoạt động. Mỗi phương thức trên controller tương ứng với một hoặc nhiều URI:
Để biết thêm thông tin về cách API Web định tuyến các yêu cầu HTTP đến các phương thức của bộ điều khiển, hãy xem Định tuyến trong API Web ASP.NET .

Step4: Test API Server 

Bạn build ứng dụng web, rồi F5 để test thử API. 
Bạn nhãy nhập thêm uri api/products vào để xem kết quả. 
Bạn nhãy nhập thêm uri api/products/1 vào để xem kết quả. 
Vậy là bạn đã hoàn thành phía server. Trong phần tiếp theo chúng ta sẽ làm việc với client.

Step5: Calling the Web API with Javascript and jQuery

Trong phần này, chúng ta sẽ thêm một trang HTML sử dụng AJAX để gọi API web. Chúng ta sẽ sử dụng jQuery để thực hiện gọi AJAX. 
Trong Solution Explorer, bấm chuột phải vào Project và chọn Add , sau đó chọn New Item… 
Trong hộp thoại Add New Item , chọn nút Web trong Visual C # , sau đó chọn mục HTML Page . Đặt tên cho trang "index.html".
Code trang index như hình sau đây.

Vậy là bạn đã hoàn thành phía client để triệu gọi ứng dụng từ server. Việc cuối cùng là chúng ta kiểm chứng lại kết quả hiển thị của client trên trình duyệt 

Step6: Test Client

Bạn nhấn F5 để chạy thử ứng dụng. Nếu hiển thị như hình là bạn đã thành công 😉 
Hiển thị toàn bộ sản phẩm.
Tìm kiếm sản phẩm.

Step6: Publish WebAPI to Azure 

Sau khi hoàn thành WEB API System, bạn có thể publish để mọi người dễ dàng truy cập. 
Bạn click chuột phải vào Project, chọn Publish… 
Trong hộp thoại Pick a publish target, bạn chọn Create New rồi nhấn chọn Publish
Hộp thoại Create App Service sẽ xuất hiện và bạn điền đầy đủ thông tin (tên phải khác tên trong hình 😉 vì có rồi thì ko tạo được nữa) 

Lần đầu publish có thể hơi lâu, bạn cứ thoải mái chờ đợi 
Sau khi qua bước Deploying 1 thì bạn tới Deploying 2 như màn hình Console sau đây
 
Thêm vài giây chờ đợi, trong lúc đợi t hì bạn quan sát các dòng lệnh đang thực thi trong console cho thêm phần thú vị.

Sau khi deploy xong thì cửa sổ trình duyệt sẽ mở ra và mở luôn web của bạn như hình 
Bạn có thể test lại phần Search by ID 
Và quan trọng là bạn cũng có thể test được API nữa
Và đây nữa, thêm products/1 cho phần chi tiết từng sản phẩm 

Post a Comment

أحدث أقدم