jQuery AJAX GET & POST Data Using MVC Web API

Jagdev Mishra
9y
59.5k
0
2

Article

The article basically describes the following GET and POST methods:

POST: Create
GET: Read

The Web API is also called RESTful services because we can call these services using an URL and these type of services are helpful for mobiles and they are platform-independent.

Let us start to create a WebAPI first. First we will create controller.cs.

Suppose we have added a HomeController.cs.

public class HomeController : ApiController
{
public string GetEmployeeInformation(string JSONString)
{
var seriptSerialization = new System.Web.Script.Serialization.JavaScriptSerializer();
Employee employee = seriptSerialization.Deserialize<Employee>(JSONString);
//if list then we can use like this
//List<Employee> employee = seriptSerialization.Deserialize<List<Employee>>(JSONString);
return employee.EmployeeName;
}
public string PostSubmitdata([FromBody]Employee emp)
{
return emp.EmployeeName;
}
}

And the Employee class:

public class Employee
{
public string EmployeeName { get; set; }
public EmployeeDetails empdetails { get; set; }
}
public class EmployeeDetails
{
public string email { get; set; }
public string firstName { get; set; }
public string lastName { get; set; }
}

Then we will look at the WebApiConfig.cs file in the App_Start folder.

So we can see the default route setting is given below, but in this route we cannot add an Action or method name.

public static void Register(HttpConfiguration config)
{
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}

So we will amend this default route to this setting, here we have also added an action name.

public static void Register(HttpConfiguration config)
{
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}

So we can write the GET and POST methods as shown below.

<!DOCTYPE>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
/**********************************Request****************************************/
var reqdata = {
EmployeeName: "JD Mishra",
empdetails: {
email: '[email protected]',
firstName: 'Jagdev',
lastName: 'Mishra'
}
}
var stringReqdata = JSON.stringify(reqdata);
/*************************************GET*****************************************/
function GetEmployeeInformation() {
var url = "http://localhost:4000/api/Home/GetEmployeeInformation?JSONString=" + stringReqdata;
jQuery.ajax({
dataType: "json",
url: url,
async: false,
context: document.body
}).success(function (data) {
alert(data);
});
};
/*************************************GET*****************************************/
function PostSubmitdata() {
var url = "http://localhost:4000/api/Home/PostSubmitdata";
jQuery.ajax({
async: false,
type: "POST",
url: url,
data: stringReqdata,
dataType: "json",
context: document.body,
contentType: 'application/json; charset=utf-8'
}).success(function (data) {
alert(data);
})
}
</script>
</head>
<body>
<a href="#" onclick="GetEmployeeInformation();">Get</a><br />
<a href="#" onclick="PostSubmitdata();">Post</a>
</body>
</html>

Thanks

Up Next

Ebook Download

View all

ASP.NET MVC 5: A Beginner’s Guide

Read by 10.8k people

Download Now!

Learn

View all