|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Announcements
Chapters
Services
Feature Zones
|
Note: This is an unedited contribution. If this article is inappropriate,
needs attention or copies someone else's work without reference then please
Report This Article
IntroductionThe 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 MS.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. BackgroundOften developers are to busy actually working on applications to take the time to learn all of the new tools provided by MS. 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 JSONThe 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]
//Take note of the attributes Serializable, DataContract and DataMember
//These are what make the object easily usable to you via JSON
public class CustomerItem
{
[DataMember]
public string CustomerID {get; set;}
[DataMember]
public string ContactName { get; set; }
public CustomerItem()
{
}
}
}
Accessing the Entity object via JSONThe markup file below gives an example of using the list of CustomerItems that is returned from the WCF Service. In order to use the javascript below you need to have a script manager 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 dataThe class below is the WCF 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
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
public List
The NorthwindDataContext Class was created by the designer. There is no coding to create the class. In order to use a stored procedure you have to chose "Add New Item" to 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.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||