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]

About.cshtml

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

        $.ajax({

            async: true,
            type: "POST",
            url:"../../Services/AjaxEnabledWCF.svc/WeatherReport",
            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) {
              $("#result").append('<ul><li>'+value+'</li></ul>');

             });
            }

        });

   });
</script>
<div id="result"></div>

AjaxEnabledWCF.svc

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 = "")]
 [AspNetCompatibilityRequirements
 (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";
 [OperationContract]
 // [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();

 }
 [DataContract]
 public class User
 {
 [DataMember]
 public string Name { get; set; }

[DataMember]
 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

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s