Tag Archives: Microsoft .Net

Binding Client Controls using Ajax

Binding client controls after getting data from Ajax enabled WCF web service. Ajax provides many useful objects to bind data to client controls like DataView, DataContext, ADONetServiceProxy and ADONetDataContext. If you are using ASPX page:
If you are creating an ASP.NET web page, add a ScriptManager with a ScriptReference
to MicrosoftAjaxTemplates.js.

<asp:ScriptManager ID="ScriptManager1" runat="server">
       <Scripts>
              <asp:ScriptReference Name="MicrosoftAjaxTemplates.js" />
      </Scripts>
</asp:ScriptManager>

If you are creating an HTML page or an MVC view, reference the static JavaScript files
directly:

  <script type="text/javascript" src="MicrosoftAjax.js"></script>
   <script type="text/javascript" src="MicrosoftAjaxTemplates.js"></script> 

Bind data from the data fetched from the ajax datacontext like:

   <li>{{FieldName}}: {{FieldName2}} </li>

You need to add the javascript code to the of the ASPX page at the load time, you can use pageLoad function like:

  function pageLoad(){
           $create(Sys.UI.DataView,
                           { 
                              autoFetch: true,
                              dataProvider: 'Service Name.svc',
                              fetchOperation:'MethodName within the service'
                         },
                         {},
                         {}.
                          $get('data object id')             
           );
    }

You can do the Live Binding
for live binding you just need to replace

{{ <Property>}} with <span>{binding <Property>}</span>
      
<ul id="ulidName" style="display:none">
     <li><span>{binding fieldName}</span>: <span>{binding fieldName2}</span></li>
</ul>

Live Binding won’t actually update the controls automatically when there is a change on the server but it’ll update the changes on the client datasource. To update data, you can use DataView.fetchData method.

Two way Data Binding is also available to update the client controls. Two-way data binding provides live binding’s ability to automatically update client controls when the client data source is updated, and it also updates the client data source when the contents of a bound client control are changed.
to use it

      <span>{binding <Property>, mode=twoWay}</span>

You can use live binding with formatted data by specifying JavaScript functions for the convert and convertback properties.
Eg: {binding , convert=toJavascriptFunction, convertBack=fromJavascriptFunction}

Updating Server data from client controls
If you need to allow users to update the data using client controls, use one of the following
three classes with an instance of DataView:
— DataContext
— AdoNetServiceProxy
— AdoNetDataContext

Data Context
The ASP.Net AJAX Sys.Data.DataContext class connects to the WCF data service or Ajax enabled WCF web service and reads, updates, and inserts data from a javascript client. With DataContext, you can develop a CRUD application using nothing but client-side JavaScript code, providing responsiveness similar to a Microsoft Windows application within the browser environment.

Typically, you use a DataView client control to present the DataContext to the user. Set the DataView:DataProvider to the instance of DataContext, and use live-binding markup in the template to allow users to edit the data. When the user has indicated that she is done making changes (such as by clicking a Submit button), call the DataContext.saveChanges JavaScript function.

This example demonstrates using DataContext and DataView together to connect to an ASP.NET web service:

<script type="text/javascript">
var dataContext = new Sys.Data.DataContext();
dataContext.set_serviceUri("../Services/peopleService.svc");
dataContext.set_saveOperation("SavePerson");
dataContext.initialize();
</script>
<button onclick="dataContext.saveChanges()">Submit Changes</button>
<ul sys:attach="dataview" class="sys-template" dataview:autofetch="true"
dataview:dataprovider="{{ dataContext }}"
dataview:fetchoperation="GetPerson"
dataview:fetchparameters="{{ {orderBy: 'Name'} }}"
>
<li>
<input type="text" value="{binding Name}"/><br/>
<input type="text" value="{binding Address}"/>
</li>
</ul>

ADONETSERVICEPROXY
You can use the ASP.NET AJAX Sys.Data.AdoNetServiceProxy class to read, update, add, and delete records exposed by a WCF data service using REST. After you create an instance of AdoNetServiceProxy by specifying the location of the WCF data service, you can call the query and update, insert, remove, and invoke JavaScript functions to perform individual operations, or you can call the createActionSequence JavaScript function to run several operations together.

This example demonstrates using AdoNetServiceProxy and DataView together to connect to a WCF web service:

<head>
<script type="text/javascript" src="../MicrosoftAjax/MicrosoftAjax.js"></script>
<script type="text/javascript" src="../MicrosoftAjax/MicrosoftAjaxTemplates.js">
</script>
<script type="text/javascript" src="../MicrosoftAjax/MicrosoftAjaxAdoNet.js"></script>
<script type="text/javascript">
var peopleService = new Sys.Data.AdoNetServiceProxy('../Services/peopleDataService.svc');
</script>
</head>
<body xmlns:sys="javascript:Sys"
xmlns:dataview="javascript:Sys.UI.DataView"
sys:activate="*">
<ul class="list sys-template" sys:attach="dataview"
dataview:autofetch="true"
dataview:dataprovider="{{ peopleService }}"
dataview:fetchoperation="People"
dataview:fetchparameters="{{ {$orderby: 'Name'} }}"
>
<li>
<span class="name">{{ Name }}</span>
<span class="value">{{ Address }}</span>
</li>
</ul>
</body>

Ado Net DataContext
Although you should be familiar with AdoNetServiceProxy, ASP.NET AJAX provides a second class for accessing WCF data services: AdoNetDataContext. AdoNetDataContext is derived from DataContext, and it uses the AdoNetServiceProxy class for communicating with WCF data services. However, it adds support for identity management, associating entity sets from different fetch operations, hierarchical data, and optimistic concurrency. You can use AdoNetDataContext exactly like you use AdoNetServiceProxy.