Introduction
The purpose of this article is to provide a working sample of a new .NET technologies. This sample contains a working example of calling a WCF service from AJAX and using the results in JavaScript via JSON. It will also provide you with an example of how to call a Stored Procedure in LINQ. This sample uses the Northwind database that you can download from Microsoft. In order to run the sample, you must change the connection string "NorthwindConnectionString
" in the web.config to point to your copy of Northwind. The SearchCustomers
Stored Procedure code is provided in a text file in the solution.
Background
Often, developers are too busy actually working on applications to take the time to learn all of the new tools provided by Microsoft. I have seen some examples of LINQ, WCF, and JSON, but I wanted to put a simple example of each in one place.
An entity class to use with JSON
The class below is an entity that will be accessible in JavaScript. In order to access the properties via JSON, you need to add the appropriate attributes.
using System;
using System.Runtime.Serialization;
namespace WCF_AJAX.Data
{
[Serializable]
[DataContract]
public class CustomerItem
{
[DataMember]
public string CustomerID {get; set;}
[DataMember]
public string ContactName { get; set; }
public CustomerItem()
{
}
}
}
Accessing the entity object via JSON
The markup file below gives an example of using the list of CustomerItem
s that is returned from the WCF Service. In order to use the JavaScript below, you need to have a ScriptManager
and a reference to the ApplicationService
(the WCF).
<asp:scriptmanager id="ScriptManager1" runat="server">
<services>
<asp:servicereference path="~/Services/ApplicationService.svc">
</asp:servicereference>
</services>
</asp:scriptmanager>"
The JavaScript:
function Search() {
var textInput =$get("txtSearch");
ApplicationService.searchCustomers(textInput.value, OnSearchComplete, OnError);
$get("ddlCustomers").focus();
}
function OnSearchComplete(result) {
var selectOfCustomers = $get("ddlCustomers");
var customerItems = result;
var pos = 0;
for (var customerNo in customerItems) {
var oOption = document.createElement("OPTION");
oOption.text = customerItems[customerNo].ContactName;
oOption.value = customerItems[customerNo].CustomerID
selectOfCustomers.add(oOption, pos);
pos += 1;
}
}
function OnError(result) {
alert(result.get_message());
}
Creating the WCF Service using LINQ to get your data
The class below is the WCF service called from the client. The AspNetCompatibilityRequirements
attributes are required.
using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Collections.Generic;
namespace WCF_AJAX.Services
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode =
AspNetCompatibilityRequirementsMode.Allowed)]
public class ApplicationService
{
[OperationContract]
public List<data.customeritem>searchCustomers(string searchText)
{
var listOfCustomerItems = new List<data.customeritem>();
var dataContext = new Data.NorthwindDataContext();
foreach (var result in dataContext.SearchCustomers(searchText))
{
var item = new Data.CustomerItem();
item.CustomerID = result.CustomerID;
item.ContactName = result.ContactName;
listOfCustomerItems.Add(item);
}
return listOfCustomerItems;
}
}
}
The NorthwindDataContext
class was created by the designer. There is no coding required to create the class. In order to use a Stored Procedure, you have to chose "Add New Item" from the solution and pick LINQ to SQL Classes. VS 2008 will add a DBML file to the project. Then, open the DBML file in design mode and drag the Stored Procedure from the Server Explorer tab's Data Connections.