Post json object to asp.net mvc controller

Posting json data to asp.net mvc controller.

Post json data to Asp.net mvc Controller

In this tutorial you will learn how to post json data to controller using JavaScript and Jquery, this way you can post data to any server side application built in different technologies like asp.net, php, python etc.

jquery ajax post json array asp.net mvc

In this example we post a blog object to controller using JSON and jQuery

Step 1: Create Blog object called “blogObj” in project

public class blogObj           
{
    public string title { get; set; }
    public string blogActionName { get; set; }
    public string blogControllerName { get; set; }
    public string shortinfo { get; set; }
    public string imagePath { get; set; }
    public string imageAlt { get; set; }
    public string imageTitle { get; set; }
}

Step 2: Lets create the action in controller . This will process the data into database and send a response back to UI

[HttpPost]
public JsonResult jsonpost(blogObj blog)
{
          
// this is database object populated with data from blogObj
tbBlog _blog = new tbBlog();
_blog.title = blog.title;
_blog.shortinfo = blog.shortinfo;
_blog.blogActionName = blog.blogActionName;
_blog.blogControllerName = blog.blogControllerName;
          
// here you make database call using Ado.net or entityframework
          
// this is just to make you understand that updated object we can send back to UI, you can use any other property, or just send a string message
          
blog.title = string.Format("{0} : updated on {1}", blog.title, DateTime.Now);
          
return Json(blog);
}

Step 3: Create JSON object (Note: here we have set a hardcoded value,in realtime you can create a form and receive the value from user)

<script>            
var jsonBlog = {
"title": "Learning JSON",  
            
"shortinfo": "short info 1",
"blogActionName": "jsonpost",
"blogControllerName": "json",
};            
</script>

Step 4: Write a method to post the JSON object and receive the result, here after you click the “Post JSON Data” button below, two things will happen; one will show a javascript alert message saying “Call Successful”. Two the updated blog title will be displayed in place of button

<script>           
$(function () {
    $("#btnPostBlog").click(function (event) {
        $.ajax({
        type: "POST",
        url: "@Url.Action("jsonpost", "json")",
        data: jsonBlog,
        success: function (data) {
        alert("Call Successful");
        $("#dvAction").text(data.title);
        },
        error: function () {
        // something's gone wrong.
        }
        });
    });
});
</script>

This was also an example of how you can make ajax call, post JSON data using JQuery to server side

 
Post JSON Data to Server

Popular JavaScript Libraries
Jquery JSON Example Server
JavaScript Examples | JavaScript Online Course