The function onclick call properly hides and shows elements but when it comes to the console.log or the ajax Post method nothing is working. I have tried it in Postman and it was working properly when i sent json.
Script:
<script type="text/javascript">
function populateTab() {
}
var addvisible = document.getElementById("btnshowadd");
$("#addpostform").hide();
addvisible.onclick = function () { $("#addpostform").show() };
$("#hideadd").onclick = function () {
var postObject = {
Title: $("#PostTitle").val(),
Body: $("#PostBody").val(),
Image: $("#PostImage").val(),
DateTime: Date.now()
};
console.log(postObject);
$("#addpostform").hide();
jQuery.ajax({
type: "POST",
data :postObject,
url: "../api/posts",
contentType: "application/json"
});
};
</script>
Post method in web api
[ResponseType(typeof(Post))]
[HttpPost]
public IHttpActionResult PostPost(Post post)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
db.Posts.Add(post);
db.SaveChanges();
return CreatedAtRoute("DefaultApi", new { id = post.ID }, post);
}