JQuery POST Request to WCF service in ASP.NET MVC

One of my colleagues was fighting hard to display a list returned by a WCF service in an ASP.NET MVC3  Razor View.I tried few things and it worked out pretty good.Here is the outcome.

JQuery Code is placed in the about.cshtml file [ASP.NET MVC 3 Razor View File]


<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript">
<script type="text/javascript">
    $(document).ready(function () {


            async: true,
            type: "POST",
            data: "{}",// Weather: $("#result").val() },
            dataType: "json",
            contentType: "application/json",
            error: function (err) {
                alert("Error:" + err.toString());
            success: function (data) {
              $.each(data.d, function(key,value) {



<div id="result"></div>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;

namespace JQUERYAJAX.Services
 [ServiceContract(Namespace = "")]
 (RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
 public class AjaxEnabledWCF

public static List<User> lstUsers = new List<User>()
 new User() { Name="Rami", Email="Rami@Rami.com"},
 new User() { Name="Bill", Email="Bill@Bill.com"},
 new User() { Name="Mark", Email="Mark@Mark.com"},
 // To use HTTP GET, add [WebGet] attribute.
 // (Default ResponseFormat is WebMessageFormat.Json)
 // To create an operation that returns XML,
 // add [WebGet(ResponseFormat=WebMessageFormat.Xml)],
 // and include the following line in the operation body:
 // WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
 // [WebGet(
 // ResponseFormat = WebMessageFormat.Json)]
 public List<string> WeatherReport()
 // Add your operation implementation here
 var abc = from p in lstUsers
 select p.Name;
 return abc.ToList();

 public class User
 public string Name { get; set; }

 public string Email { get; set; }
 // Add more operations here and mark them with [OperationContract]

This is a simple one,my next step is to pass complex list
i.e.,User[name,Email] to the JQuery and display it on the View


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s