Tag Archives: Ajax

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.

.Net Data Design Stratagies

While designing an application to design a data layer or connecting to database there are multiple options:
1. ADO.Net: This the old way of connecting to the data base, creating a connection and binding the data to dataset or datatable and updating or reading the data from database.
2. Entity Framework: Entity Framework is inbuit of .net framework now and it’s a abstract way of connecting to the database and better way for the developers who are not entirely familiar with the database programming. Database is not entirely object oriented like the way the objects are in .net like inheritance so orm tools like Entity Framework maps the relational objects to object oriented entities for the developers to directly interact with the data as objects. Similarly, Entity Framework can map the objects or entities creates in .net and map to relational objects like Code first methodology.

3. WCF Services: .Net Framework version 3.0 introduced WCF as to combine and update several communication technologies like enterprise services, Active Server Methods (ASMX) webservices, Web Service Extensions (WSE), Microsoft Message Queuing (MSMQ) and .Net remoting. WCF web services is the most powerful, flexible, and secure way to provide Application Logic layer services to a Presentation Layer, whether the presentation Layer is part of the same application or different one.

4. WCF Data Services: It was formerly known as ADO.Net Data Services. It allows you to quickly build an OData or REST service. OData or REST are HTTP based open standards for exposing data across the web, where they can be consumed by clients built on a wide variety of platforms, including .Net, Microsoft Silverlight, JQuery, PHP and Javascript.

You can get into a dilemma to choose the correct methodology or framework for data design, below are the few scenarios where we can categorize each with:

Choose Entity Framework when you
–implementing the Data Layer
–connect to the database without network protocol restriction
–require rapid application development
–require strongly typed objects.
Choose WCF Data Services when you are
–implementing the Data Layer
–Connect to the database server by using HTTP
–require access from javascript
–require application level control over access to the data.
Choose WCF web services when you are
–implementing the Application Logic layer
–require specific network protocols, such as WS-Security, SOAP or REST
–require multiple binding types for different clients
–require access from Javascript
Choose ASMX web services when you are
–implementing either Application Logic or Data Layer for a remote application
–need to add web services to an existing ASP.Net application
–will host the application only on IIS
–require only basic HTTP communication.