- 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.
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:
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:
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:
[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:
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:
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.
<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.
Comments[ 0 ]
Đăng nhận xét