ASP.NET 3.5 Sample Application of LINQ, WFC, JSON, and AJAX

• Download source code - 14.6 KB

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]
    //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 JSON

The 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 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
    {
        // Add [WebGet] attribute to use HTTP GET
        [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;
        }

        // Add more operations here and mark them with [OperationContract]
    }
}

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.