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