RSSAsp.net

ASP.NET Ajax : Cách Gọi WCF Web Services

WCF (Windows Communication Framework) cung cấp dữ liệu một cách linh hoạt đến các ứng dụng Ajax. Hướng dẫn này cung cấp step-by-step xem cách WCF có thể được sử dụng với ASP.NET Ajax Library lấy dữ liệu từ services và gắn nó vào hệ thống điều khiển bằng cách sử dụng các DataView component và template. Từng bước được thực hiện bao gồm:

  • Tạo một WCF Services
  • Loading Scripts Bắt buộc
  • Gọi một WCF Services sử dụng DataView
Bước 1: Tạo một WCF Service
 
Để tạo một Ajax-enabled WCF Service, kích chuột phải vào một dự án ứng dụng web hay Website trong Visual Studio và chọn Add New Item. Chọn AJAX-enabled WCF Service mẫu như trong hình 1.
 

 
Hình 1. Thêm một Ajax-enabled WCF Service vào một Visual Studio ứng dụng web hay project Website.
 
Sau khi Ajax-enabled WCF Service được tạo ra một hoạt động có thể được thêm tùy chỉnh trả về dữ liệu đến các Ajax application. Các code sau đây cho thấy cách một danh sách các Customer objects có thể được trả lại từ một hoạt động service:

[ServiceContract(Namespace = "http://www.mycompany.com/MyAjaxService")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class MyAjaxService
{
        [OperationContract]
        public List<Customer> GetCustomers(int numberToFetch)
        {
                using (NorthwindDataContext context = new NorthwindDataContext())
               {
                      return context.Customers.Take(numberToFetch).ToList();
               }
         }
}

Bước 2: Loading Scripts Bắt buộc

The ASP.NET AJAX Thư viện cung cấp một thành phần DataView có thể được sử dụng để lấy dữ liệu từ một dịch vụ WCF và gắn nó vào một bản mẫu. Để tải tập lệnh được yêu cầu của các thành phần DataView bộ nạp Script có thể được sử dụng:

<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.js" type="text/javascript"></script>
<script type="text/javascript">
       Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function() 
       {
            //Scripts loaded
       });
</script>

Bước 3: Kêu gọi một WCF Service sử dụng DataView

Các thành phần DataView có thể được dùng để gọi một dịch vụ web với một số tiền tối thiểu của mã. Để tạo một DataView Sys.create.dataView dụ sử dụng và vượt qua các bản mẫu để ràng buộc vào cũng như các tham số xác định các dịch vụ WCF để gọi. URI dịch vụ và hoạt động để gọi có thể được xác định bằng cách sử dụng dataProvider và các thông số fetchOperation như được hiển thị tiếp theo:
 
Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function() {
 
      Sys.create.dataView("#CustomerView",
     {
             dataProvider: "/Services/MyAjaxService.svc",
             fetchOperation: "GetCustomers",
             autoFetch: true,
             fetchParameters: {numberToFetch: '10'},
             itemRendered: CustomerRendered
      });
 
     function CustomerRendered(dataView, ctx) {
           Sys.bind(Sys.get("li", ctx), "innerHTML", ctx.dataItem, "ContactName");
     }
});
 
Mã này kêu gọi các hoạt động GetCustomers ngày MyAjaxService.svc và vượt qua giá trị là 10 cho tham số numberToFetch. Bằng cách đặt các dịch vụ bất động sản autoFetch đúng sẽ được gọi là tự động khi tải trang. Sau khi trở về dữ liệu từ các dịch vụ WCF chức năng CustomerRendered sẽ được gọi là mỗi dòng dữ liệu là bị ràng buộc vào một khuôn mẫu được đặt tên CustomerView. CustomerRendered liên kết với các tài sản contactname của mỗi dòng dữ liệu đến một phần tử <li>. Các CustomerView mẫu được hiển thị tiếp theo:

<div id="CustomerView" class="sys-template">
       <ul>
              <li />
        </ul>
</div>

Các DataView component và các thông số của nó có liên quan cũng có thể được định nghĩa trực tiếp trên một mẫu như sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
           <title></title>
           <script type="text/javascript" src="http://ajax.microsoft.com/ajax/beta/0911/Start.js"></script>
           <script type="text/javascript">
               Sys.require([Sys.components.dataView, Sys.scripts.WebServices]);
           </script>
        </head>
        <body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView">
            <div id="CustomerView" class="sys-template" sys:attach="dataview" dataview:autofetch="true"
                 dataview:dataprovider="/Services/MyAjaxService.svc"
                 dataview:fetchParameters="{{ {numberToFetch: 10} }}"
                 dataview:fetchoperation="GetCustomers">
                <ul>
                     <li>{{ContactName}}</li>
                </ul>
           </div>
      </body>
</html>

Mã này bắt đầu bằng cách xác định một "dataview" các yếu tố với giá trị là "javascript: Sys.UI.DataView". Một ví dụ của các thành phần DataView được tạo ra như là tải trang bằng cách gắn các không gian tên vừa được định nghĩa dataview cho mẫu bằng cách sử dụngsys:attach="dataview". Tham số được sử dụng bởi các thành phần DataView được định nghĩa trực tiếp trên mẫu của <div> tố và tiền tố với "dataview" tiền tố không gian tên.


Chúc bạn thành công.
DangTrung.

 
Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu