Hi I am having trouble trying to POST/PUT/DELETE objects with the Web API Controller from Ajax. My Hello object is getting Post/Put as id = 0, hello = null no matter what I try.
Anything I am doing that would cause this behavior?
//ServicingController.cs
using System.Collections.Generic;
using System.Diagnostics;
using System.Web.Http;
namespace ServicingWebApi.Api
{
public class ServicingController : ApiController
{
public class Hello
{
public int id { get; set; }
public string hello { get; set; }
public override string ToString()
{
return string.Format("id: {0}, hello {1}", id, hello);
}
}
// GET api/<controller>
public IEnumerable<string> Get()
{
return new[] { "value1", "value2" };
}
// GET api/<controller>/5
public string Get(int id)
{
return "value";
}
// POST api/<controller>
public void Post(Hello stuff)
{
Debug.Write(stuff.ToString());
}
// PUT api/<controller>/5
public void Put(int id, Hello stuff)
{
Debug.Write(stuff.ToString());
}
// DELETE api/<controller>/5
public void Delete(int id)
{
Debug.Write(string.Format("Deleted id: {0}", id));
}
}
}
ServicingPage.aspx
<%@ Page AutoEventWireup="true" CodeBehind="ServicingPage.aspx.cs" Inherits="ServicingWebApi.ServicingPage" Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Get
$('#get').click(function (e) {
e.preventDefault();
$.getJSON("api/Servicing");
});
//Get Single
$('#getsingle').click(function (e) {
e.preventDefault();
$.getJSON("api/Servicing/" + 1);
});
//Post
$('#post').click(function (e) {
e.preventDefault();
var data = JSON.stringify({
stuff: {
id: 1,
hello: "World"
}
});
$.ajax({
url: "api/Servicing",
type: "POST",
contentType: "application/json;charset=UTF-8",
data: data
});
});
//Put
$('#put').click(function (e) {
e.preventDefault();
var data = JSON.stringify({
stuff: {
id: 1,
hello: "World"
}
});
$.ajax({
url: "api/Servicing/" + 1,
type: "PUT",
contentType: "application/json;charset=UTF-8",
data: data
});
});
//Delete
$('#delete').click(function (e) {
e.preventDefault();
$.ajax({
url: "api/Servicing/" + 1,
type: "DELETE",
contentType: "application/json;charset=UTF-8",
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="get">Get Hello</button>
<button id="getsingle">Get a Hello</button>
<button id="post">Post Hello</button>
<button id="put">Put Hello</button>
<button id="delete">Delete Hello</button>
</div>
</form>
</body>
</html>
Global.asax
using System;
using System.Web;
using System.Web.Http;
using System.Web.Routing;
namespace ServicingWebApi
{
public class Global : HttpApplication
{
protected void Application_Start(object sender, EventArgs e)
{
RouteTable.Routes.MapHttpRoute(
"DefaultApi",
"api/{controller}/{id}",
new {id = RouteParameter.Optional}
);
}
protected void Session_Start(object sender, EventArgs e)
{
}
protected void Application_BeginRequest(object sender, EventArgs e)
{
}
protected void Application_AuthenticateRequest(object sender, EventArgs e)
{
}
protected void Application_Error(object sender, EventArgs e)
{
}
protected void Session_End(object sender, EventArgs e)
{
}
protected void Application_End(object sender, EventArgs e)
{
}
}
}
packages.config
<?xml version="1.0" encoding="utf-8"?>
<packages>
<package id="AspNetWebApi" version="4.0.20710.0" />
<package id="Microsoft.AspNet.WebApi" version="4.0.20710.0" />
<package id="Microsoft.AspNet.WebApi.Client" version="4.0.20710.0" />
<package id="Microsoft.AspNet.WebApi.Core" version="4.0.20710.0" />
<package id="Microsoft.AspNet.WebApi.WebHost" version="4.0.20710.0" />
<package id="Microsoft.Net.Http" version="2.0.20710.0" />
<package id="Microsoft.Web.Infrastructure" version="1.0.0.0" />
<package id="Newtonsoft.Json" version="4.5.8" />
<package id="System.Json" version="4.0.20126.16343" />
</packages>