Inserting and Fetching Data Using WCF REST Service and Jquery in ASP.NET MVC 2

Description: In this article I will describe how to insert and fetch data by WCF REST Service using the Jquery Post and Get methods.

Content:

Step 1:

Here in this application I will insert a Username and his corresponding phone number into a list using the Jquery Post method and retrieve the phone number by giving the Username using the Get Method.

First Open VS 2010. After that File -> New -> Project -> Select ASP.Net MVC2 Web Application Template. Give it the name "JQueryWcf" like in Figure 1:



Figure 1

Step 2:

After that check "No don't create a unit test project".

Step 3:

Create a new WCF REST service.

Right Click Solution -> Add -> New Item -> Select "AJAX-enabled WCF Service" -> Give it the name "User".



Figure 2

Step 4:

Now in the service write the setuser method under the Web Invoke Method.

[OperationContract]
[WebInvoke(
BodyStyle = WebMessageBodyStyle.WrappedRequest,
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json)]
public void SetUser(string usertype, string phNo)
{
lstUsers.Add(new User() { Name = usertype, PhNo = phNo });
}

Here in this method we are adding the user type and phone number in to the List name lstUsers.

Now we have to define the lstUsers also.

public static List<User> lstUsers = new List<User>()
{
new User() { Name="shir", PhNo="9945529260"},
new User() { Name="dash", PhNo="9852639852"},
new User() { Name="santosh", PhNo="25689999"},
};

See in this list I hardcoded some data. So while running the application by giving this user Name you can see the Phone Number.

The whole WCF part code is:

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 jquerywcf
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class USer
{
// 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]
public void DoWork()
{
// Add your operation implementation here
return;
}
public static List<User> lstUsers = new List<User>()
{
new User() { Name="shir", PhNo="9945529260"},
new User() { Name="dash", PhNo="9852639852"},
new User() { Name="santosh", PhNo="25689999"},
};

// We have two service methods - SetUser and GetUser, which sets and gets
// user from fake repository.

[OperationContract]
[WebInvoke(
BodyStyle = WebMessageBodyStyle.WrappedRequest,
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json)]
public void SetUser(string usertype, string phNo)
{
lstUsers.Add(new User() { Name = usertype, PhNo = phNo });
}

[OperationContract]
[WebGet(
ResponseFormat = WebMessageFormat.Json)]
public User GetUser(string name)
{
User op = lstUsers.Where(p => p.Name == name).FirstOrDefault();
return op;
}

// Add more operations here and mark them with [OperationContract]
}
[DataContract]
public class User
{
[DataMember]
public string Name { get; set; }

[DataMember]
public string PhNo { get; set; }
}

}

Step 4:

Now we have to create the JavaScript function for saving and retrieving the data.

For that right-click the Scripts folder, then select Add -> New Item -> Select JScript File -> Give it the name "UserServiceCalls.js".



Fig 3:

Step 5:

Paste the code shown below under the JavaScript file.

$(document).ready(function () {
$(".btnSubmit").click(function () {
$.ajax({
cache: false,
async: true,
type: "POST",
dataType: "json",
url: "../User.svc/SetUser",
data: '{ "usertype": "' + $("#txtuserName").val() + '", "email" : "' + $("#txtuserEmail").val() + '" }',
contentType: "application/json;charset=utf-8",
success: function (r) { alert("Successfully Registered!!!"); },
error: function (e) { alert(e.statusText); }
});
});
$(".btnRetrieve").click(function () {
$.ajax({
cache: false,
async: true,
type: "GET",
dataType: "json",
url: "../User.svc/GetUser",
data: { name: $("#find").val() },
contentType: "application/json;charset=utf-8",
success: function (r) { if (r != null) $("#DisplayResult").html(r.Email); },
error: function (e) { alert(e.statusText); }
});
});
});

Step 6:

Now go to the "site.master" under the "Shared" folder. After that paste the 3 codes shown below under the header part for referring to the js script file under the source part.

<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/UserServiceCalls.js" type="text/javascript"></script>

Step 7:

Now go to the "Index.aspx" under the Home Folder. After that paste the code shown below:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2><%: ViewData["Message"] %></h2>
<p>

</p>
<strong>Enter Registration Details</strong>

<p>

Enter User Name -

<input
type="text"
id="txtuserName" /><br />

Enter Phone NUmber -

<input
type="text"
id="txtuserEmail" /><br />

</p>
<a
href="#"
class="btnSubmit">
Post
</a>

<br /><br />

<strong>Enter User Name to Retrieve</strong>

<p>

Enter User Name:- -

<input
type="text"
id="find" />
</p>
<a
href="#"
class="btnRetrieve">
Get
</a>

<div
id="DisplayResult">
</div>

</asp:Content>

Step 8:

Now run the application. It will look like the figure shown below:



Conclusion: So in this article we have seen how to insert and fetch data using WCF REST and a js file using the get and post method.