Thứ tư, ngày 22 tháng 11 năm 2017

Xây dựng ứng dụng ASP.NET Web API đầu tiên

Ngày đăng: 17/9/2013, 8:31:19PM | Lượt xem: 9,613
Hot!

Giao thức HTTP không chỉ để phục vụ việc trả về các trang web, nó còn là một nền tảng cực tốt dành cho việc xây dựng các dịch vụ (services). Phần lớn các nền tảng đều hỗ trợ thư viện HTTP, do đó các dịch vụ HTTP sẽ hỗ trợ nhiều loại hình đầu cuối khác nhau, bao gồm cả trình duyệt, thiết bị di động và kể cả máy tính cá nhân.

ASP.NET Web API là một nền tảng giúp xây dựng các dịch vụ HTTP trên nền tảng .NET. ASP.NET Web API được tích hợp bên trong của ASP.NET MVC 4 (hiện đã được phát hành phiên bản Beta). Trong ví dụ này bạn sẽ tạo dịch vụ HTTP đầu tiên sử dụng ASP.NET API. Dịch vụ này chỉ mang tính chất minh họa, nhưng nó cũng sẽ giúp bạn làm quên với ASP.NET API và hiểu được phần nào mục đích cũng như khả năng của nó.

Tạo dự án Web API

Muốn xây dựng dự án có hỗ trợ ASP.NET Web API, bạn đừng quên cài đặt .NET Framework 4.5 lên máy tính của bạn, vài cài đặt ASP.NET MVC 4 (hiện đang ở bản beta).

Bạn tạo một dự án ASP.NET MVC 4 Web Application mới trên Visual Studio với tên là “HelloWebAPI”.

 

Trong hộp thoại New ASP.NET MVC 4 Project, chọn Web API và nhấn OK.

Thêm vào một Model

Một model là một đối tượng thể hiện dữ liệu có trong ứng dụng của bạn. ASP.NET Web API có thể kết xuất model thành JSON, XML hoặc các định dạng khác, và sau đó ghi dữ liệu đã kết xuất vào nội dung của thông điệp HTTP respone. Và trình khác sẽ đọc và chuyển lại thành đối tượng. Phần lớn các trình khác sẽ hiểu được XML và JSON. Hơn nữa, trình khách có quyền quy định định dạng nó muốn nhận về bằng cách quy định trường Accept trong thông điệp HTTP Request.

Để minh họa điều này, chúng ta cần tạo ra một model đơn giản. Chúng ta tạo một model có tên là Product nằm trong thư mục Models của dự án.

namespace HelloWebAPI.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

Thêm một ApiController

Controller là đối tượng xử lý các HTTP request được gởi lên bởi trình khách. Khi dự án được tạo ra thì đã có sẵn hai controller cho bạn đó là HomeController và ValuesController.

HomeController là một controller truyền thống của ASP.NET MVC, nó có nhiệm vụ trả về các trang HTML khi có yêu cầu, và tất nhiên nó không có mối liên hệ trực tiếp với API Controller. Sự khác biết chính mà bạn thấy đó là các action trên Web API Controller không trả về các views, mà chúng chỉ trả về dữ liệu đơn thuần.

Hãy đổi tên ValuesController thành tên ProductsController.  Khi bạn đổi tên Visual Studio sẽ đi tìm những vị trí có tham chiếu đến ValuesController và cập nhật lại để ứng dụng có thể dạy được.

Tiếp theo bạn xóa hết các phương thức trong ProductController và thêm các dòng code sau vào định nghĩa lớp

public IEnumerable<Product> GetAllProducts()
{
    return new List<Product> 
    {
        new Product() { Id = 1, Name = "Gizmo 1", Price = 1.99M },
        new Product() { Id = 2, Name = "Gizmo 2", Price = 2.99M },
        new Product() { Id = 3, Name = "Gizmo 3", Price = 3.99M }
    };
}

public Product GetProductById(int id)
{
    if (id < 1 || id > 3)
    {
        throw new HttpResponseException(System.Net.HttpStatusCode.NotFound);
    }
    return new Product() { Id = id, Name = "Gizmo " + id.ToString(), Price = id + 0.99M };
}

Phương thức GetAllProducts lấy về danh sách của các sản phẩm theo kiểu IEnumerable<Product>. Phương thức GetProductById lấy về sản phẩm theo tham số truyền lên là id của sản phẩm. Khi gọi phương thức GetProductById, nếu Id không tồn tại, thì phương thức sẽ trả về lỗi 404.

Như vậy chúng ta đã có một dịch vụ Http Service đơn giản với ASP.Web API.

Triệu gọi HTTP service bằng JavaScript và jQuery

Chúng ta sẽ mở file Index.cshtml trong thức mục Views/Home để điều chỉnh. Chúng ta thay toàn bộ nội dung của Index.cshtml với đoạn mã dưới đây

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ASP.NET Web API</title>
    <script src="../../Scripts/jquery-1.6.2.min.js" 
        type="text/javascript"></script>
<body>
    <div>
        <h1>All Products</h1>
        <ul id='products' />
    </div>
    <div>
        <label for="prodId">ID:</label>
        <input type="text" id="prodId" size="5"/>
        <input type="button" value="Search" onclick="find();" />
        <p id="product" />
    </div>
</body>
</html>

Để lấy được dữ liệu từ các HTTP services, chúng ta sẽ phải cài đặt các đoạn mã javascript để thực hiện việc triệu gọi dữ liệu về.

Lấy danh sách sản phẩm

Để lấy danh sách của sản phẩm, chúng ta cần gởi một HTTP GET request đến “api/products”. Bạn có thể sử dụng jQUery để  thực hiện việc đó như dưới đây:

<script type="text/javascript">
    $(document).ready(function () {
        // Send an AJAX request
        $.getJSON("api/products/",
        function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, val) {

                // Format the text to display.
                var str = val.Name + ': $' + val.Price;

                // Add a list item for the product.
                $('<li/>', { html: str })    
                .appendTo($('#products'));   
            });
        });
    });
</script>

Phương thức getJSON sẽ gởi các AJAX request đến dịch vụ HTTP và nhận được kết quả trả về là một mảng chứa các đối tượng JSON. THam số thứ hai của phương thức getJSON là một phương thức được gọi khi lời gọi đã được đáp trả xong.

Lấy thông tin sản phẩm dựa vào trường ID

Để lấy một sản phẩm dựa vào trường ID, ta cần gởi một request HTTP GET đến “api/products/id” với id chính là mã sản phẩm. Điền đoạn code sau vào mã javascript của Index.cshtml

function find() {
    var id = $('#prodId').val();
    $.getJSON("api/products/" + id,
        function (data) {
            var str = data.Name + ': $' + data.Price;
            $('#product').html(str);
        })
    .fail(
        function (jqXHR, textStatus, err) {
            $('#product').html('Error: ' + err); 
        });
}    

Một lần nữa chúng ta lại sử dụng phương thức getJSON của jQuery để gởi các AJAX request, nhưng lần này chúng ta sử dụng trường ID để cấu trúc nên đường dẫn (đích) để gởi request, và kết quả nhận về là dữ liệu JSON của một sản phẩm.

Chạy ứng dụng

Khi chạy ứng dụng, bạn sẽ thấy trang home sẽ có dạng như sau:

 

Khi bạn gõ ID vào hộp thoại, sau đó nhấn search bạn sẽ được kết quả:

Trong trường hợp ID bạn điền vào không tồn tại, bạn sẽ nhận về một lỗi HTTP 404

 

Hiểu sâu hơn về định tuyến

Đối với mỗi thông điệp HTTP, ASP.NET Web API sẽ xác định controller nào sẽ nhận request bằng cách tham khảo bảng định tuyến (routing table). Chúng ta sẽ không tìm hiểu mọi khía cạnh về định tuyến của ASP.NET Web API trong bài hướng dẫn này, nhưng chúng ta sẽ tìm hiểu sơ lược về nó.

Khi tạo một dự án Web API, dự án sẽ tạo ra một tuyến mặc định có dạng như sau:

/api/{controller}/{id}

Trong đó {controller} chính là tên của Controller,  phương thức HTTP (GET / POST/ PUT /DELETE) chính là tên của phương thức của controller và {id} sẽ là giá trị gởi lên của tham số có tên là id.

Ví dụ:

HTTP Method

URI

Action

GET

/api/products

GetAllProducts()

GET

/api/products/5

GetProduct(5)

POST

/api/products/

HTTP Status 405

GET

/api/users/

HTTP Status 404

Trên đây là ví dụ về một số request mà chúng ta có thể triệu gọi, trong đó request thứ ba sẽ trả về trạng thái HTTP Status 405, nghĩa là phương thức triệu gọi không được chấp nhận (do controller không có cài đặt phương thức POST).  Và request thứ tư sẽ trả về HTTP Status 404 (không tìm thấy tài nguyên).

Kết luận

Qua bài hướng dẫn trên đây, bạn đã phần nào nhận thấy hiệu quả và sự đơn giản của ASP.NET Web API khi cài đặt các HTTP services so với việc sử dụng ASP.NET MVC Controller, và thậm chí nó cũng đơn giản hơn hẳn với việc cài đặt các WCF Services. Và như chúng ta đã biết, HTTP services (RESTFUL) là những dịch vụ mang tính tương thích cao nhất, so với các kiểu dịch vụ khác.

Nguồn bài viết từ d.jou.vn

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.