After a fair bit of reading about live binding et al, I decided to have a play with it myself. However, I found it wasn’t that obvious how to get it going so I thought I’d better record what I had to do.
1. Download the latest version of AJAX kit in order to get hold of System.Web.Ajax.dll
2. Create a ASP Web Application Project, if you want to use my sample then call the project WebAjaxSvcTest
3. Reference Ajax dll from (1)
4. Add a new item to the project –> Add Ajax-enabled WCF Service (I left it at Service1). This should create a default method called DoWork
5. In the properties of the project change the Web setting to use local IIS Server
6. From IIS try and browser the service you created (i.e. right click on the webservce.svc file and browse). If it’s ok then skip to 8
7. WCF may not be installed on your server,you’ll need to run the configuration utility, for me that is; D:\Windows\Microsoft.NET\Framework\v3.0\Windows Communication Foundation\ServiceModelReg.exe –r
8. Change your default aspx page to look something like;
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebAjaxSvcTest._Default" %>
<%@ Register Assembly="System.Web.Ajax" Namespace="System.Web.UI" TagPrefix="asp" %>
<!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 runat="server">
<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], function() {
//Scripts loaded
});
</script>
</head>
<body xmlns:sys="javascript:Sys">
<form id="form1" runat="server">
<div>
<script type="text/javascript">
Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function() {
Sys.create.dataView("#CustomerView",
{
dataProvider: "/WebAjaxSvcTest/Service1.svc",
fetchOperation: "DoWork",
autoFetch: true,
itemRendered: CustomerRendered
});
function CustomerRendered(dataView, ctx) {
Sys.bind(Sys.get("li", ctx), "innerHTML", ctx.dataItem, "ContactName");
}
});
</script>
<div id="CustomerView" class="sys-template">
<ul>
<li />
</ul>
</div>
</div>
</form>
</body>
</html>
9. Take care to change the dataprovider to be the path to your service, in my example my project (and therefore site) it called WebAjaxSvcTest and I called my Service Service1 😉
10. Hopefully you should have a demo that now runs the DoWork method and does absolutely nothing. Hopefully we now have the basic plumbing to do something interesting.
IT Bytes 