Getting Started with igDataSource and WCF

[Infragistics] Aaron Marisi / Thursday, July 28, 2011

The igDataSource is a client-side JavaScript data source that can bind to a variety of formats of data including XML, JSON, Atom, JavaScript arrays, and even HTML tables. You can see the different formats used in the NetAdvantage for jQuery samples browser.

While the igDataSource is ‘server agnostic’, meaning that it takes no dependency on any specific server-side software architecture. With that being said, developers using the .NET framework often want to leverage WCF to provide data in their RIA applications. This article dissects one of the WCF samples from the samples browser and walks you through setting up your own WCF service to deliver XML data to the igDataSource in an ASP.NET application.

First, take a look at the running sample:

https://es.infragistics.com/products/ignite-ui

In the sample, the user can select a company name from the dropdown to have the application display details about the company’s stock performance. Behind the scenes, the selection in the dropdown triggers an AJAX call to a WCF endpoint on the web server. In the production sample, the web server calls a real stock service to get the latest information about the stock which it then returns to the client. For the purposes of clearly showing how this works and how you can supply your own data, this article is going to return an XML string from the web server.

The below steps will walk you through setting up the sample with Visual Studio 2010:
Note: The completed sample can be found for download at the end of the article

1. Open Visual Studio and create a new ASP.NET Empty Web Application called ‘igDataSourceWCFService’:

Note: this is a plain old ASP.NET Web Application – this is not ASP.NET MVC. As stated previously, NetAdvantage for jQuery is server agnostic and while NetAdvantage for jQuery ships with built-in support for ASP.NET MVC, this server framework is not required to use the rich client-side functionality.

2. You will need the NetAdvantage for jQuery combined and minified script file, ig.ui.min.js, which comes with the product. In addition, you will need the jQuery, jQuery UI, and jQuery templating scripts to run the sample. This help article discusses referencing the required scripts and where the combined and minified scripts can be found.

Note: You can download the full or trial product here. The jQuery templates script can be obtained here.

3. You should setup a scripts directory in your project and copy the JavaScript files into this folder.

4. Next you can setup the sample page. You are going to add a new html page to the application and call it ‘default.htm’. Once that is done your project will look like this:

5. Open the default.htm file and include script tags for the script files:

<head>
    <title>igDataSource Bound to WCF Service</title>
    <script src="scripts/jquery.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.tmpl.min.js" type="text/javascript"></script>
    <script src="scripts/ig.ui.min.js" type="text/javascript"></script>
</head>

6. Go to the production sample and copy all of the code from the production sample’s ‘MainContent’ content block into the body of your default.htm file.

Note: While the sample link above points to an ASP.NET MVC application, the sample is composed of a client-side igDataSource (no dependence on a specific server framework) and it calls to a WCF Service. The code of the WCF service is not exposed as it is part of the core samples browser framework. This article shows how to create a similar server-side architecture in an isolated sample for testing and experimenting purposes. The client-side code is reusable in this sample because it is not dependent on the server as long as the URL returns the required data.

7. The next step is to setup your web service. Add an assembly reference to the System.ServiceModel.Web assembly. Also, add a new WCF Service to the project called ‘StockQuoteService.svc’. This will give you the .svc file in addition to the interface for setting up the service contract, IStockQuoteService.

8. Open the IStockQuoteService.cs file and you are going to define a method called ‘GetStockQuoteGET’. This method needs to be decorated with the WebGet attribute in order to allow it to be called from the client web page.

	
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Xml;

[OperationContract]
[WebGet]
XmlElement GetStockQuoteGET(string symbol);

9. You now need to implement this method on the StockQuoteService to return data. Here is the code to be added to the StockQuoteService.svc.cs file:

Note: only one company’s data is shown here but sample data for all of the companies is in the downloadable sample found at the end of this article

using System.Xml;

public XmlElement GetStockQuoteGET(string symbol)
{
	XmlDocument stockQuoteXmlDoc = new XmlDocument();
	string stockXmlData = string.Empty;

	switch (symbol)
	{
		case "MSFT": stockXmlData =
			"<StockQuotes>" +
			"<Stock>" +
				"<Symbol>MSFT</Symbol>" +
				"<Last>28.08</Last>" +
				"<Date>7/26/2011</Date>" +
				"<Time>4:00pm</Time>" +
				"<Change>0.00</Change>" +
				"<Open>N/A</Open>" +
				"<High>N/A</High>" +
				"<Low>N/A</Low>" +
				"<Volume>500</Volume>" +
				"<MktCap>236.8B</MktCap>" +
				"<PreviousClose>28.08</PreviousClose>" +
				"<PercentageChange>0.00%</PercentageChange>" +
				"<AnnRange>23.32 - 29.46</AnnRange>" +
				"<Earns>2.517</Earns>" +
				"<P-E>11.16</P-E>" +
				"<Name>Microsoft Corporation</Name>" +
			"</Stock>" +
			"</StockQuotes>";
			break;

		default:stockXmlData =
			"<StockQuotes>" +
			"<Stock>" +
				"<Symbol>!!!</Symbol>" +
				"<Name>No Information Found</Name>" +
			"</Stock>" +
			"</StockQuotes>";
			break;
	}

	tockQuoteXmlDoc.LoadXml(stockXmlData);

	return stockQuoteXmlDoc.DocumentElement;
}

10. Next, the web.config needs items setup to enable the web service to be accessed over http:

<system.serviceModel>
	<behaviors>
		<serviceBehaviors>
			<behavior name="StockQuoteServiceBehavior">
				<serviceMetadata httpGetEnabled="true"/>
				<serviceDebug includeExceptionDetailInFaults="true"/>
			</behavior>
		</serviceBehaviors>
		<endpointBehaviors>
			<behavior name="StockQuoteServiceBehavior">
				<webHttp/>
			</behavior>
		</endpointBehaviors>
	</behaviors>
	<services >
		<service name="igDataSourceWCFService.StockQuoteService" 
			behaviorConfiguration="StockQuoteServiceBehavior">
			<endpoint address="" binding="webHttpBinding" 
				contract="igDataSourceWCFService.IStockQuoteService"
				behaviorConfiguration="StockQuoteServiceBehavior"/>
		</service>
	</services>
</system.serviceModel>

11. Finally, we need to change the two URLs in our html file to point to the new service we created. Change this:

url = "/SamplesBrowser/Services/StockQuoteService.svc"

to this:

url = "/StockQuoteService.svc"

12. Run the application and the stock information for Microsoft will be displayed. At first, this will be the only company that has data defined for it. To see data for all of the companies as well as the sample in its completed form, download it.

Note: The NetAdvantage script files are not included with this download. Please use the files installed with your copy of NetAdvantage for jQuery or download your copy here.