Can figure out why jQuery script is not talking to ASP.NET web API properly
===

I am getting a 500 error when I try to run this script. I have a demo project set up in asp.net mvc4 with a small web api controller, and the default home controller. here is my api controller:



    namespace MyTrainingApi.Controllers
    {
    
    public class CoursesController : ApiController
    {

        //for demo mock data, would pull from dbContext here. 
        static List<Course> _courses = InitCourses();

        private static List<Course> InitCourses()
        {
            var ret = new List<Course>();
            ret.Add(new Course { id = 0, name = "HTTP Fundamentals" });
            ret.Add(new Course { id = 1, name = "HTTP Fundamentals Part 2" });
            ret.Add(new Course { id = 2, name = "HTTP Fundamentals Part 3" });
            ret.Add(new Course { id = 3, name = "How to bake a cake" });

            return ret;
        }

        //uri: /api/courses/
        public IEnumerable<Course> Get()
        {
            return _courses;
        }

        //uri: /api/courses/{id}
        public Course Get(int id)
        {
            Course ret = null;
            ret = (from c in _courses where c.id == id select c).FirstOrDefault();
            if (ret == null)
            {
                //TODO: return 404
            }
            return ret;
        }

        public Course Post(Course newCourse)
        {
            newCourse.id = _courses.Count();
            _courses.Add(newCourse);
            //TODO: return 202
            return newCourse;
        }

    }

    public class Course
    {
        public int id { get; set; }
        public string name { get; set; }
    }
    }

Here is my HomeController:

    namespace MyTrainingApi.Controllers
    {
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
        }

        public ActionResult Course(int id)
        {
            return View(id);
        }

        public ActionResult Create()
        {
            return View();
        }
    }
    }


So I have three views that i am experimenting with: Index is a list of all courses, Course is one course based off of id, and Create which is supposed to POST back some info and add a Course. The Create view is the one I am having issues with here. This is the view code:

![enter image description here][1]

The error message says this: 


No MediaTypeFormatter is available to read an object of type 'Course' from content with media type ''undefined''.


  [1]: http://i.stack.imgur.com/a5A2a.png