Hi everyone in this blog I’m explaining about post data using Ajax in MVC.

Introduction:

There have been a few questions recently about what you can post to the server using jQuery AJAX and where to find whatever you posted. This article looks at using the jQuery Ajax method in ASP.NET Razor Web Pages and explores how different options have different results.

As websites become more and more interactive the need frequently arises to send data back and forth between web clients and servers using Ajax. ASP.NET combined with jQuery makes this process simple to implement for web developers.

For this example, we’re going to POST the following JavaScript object to our server, and return a Boolean value indicating if the data was correctly received.

var postdata = {
    name: "Kamlakar",
    birthday: new Date(1992, 1, 1),
    hobbies: ["Cricket", "Holiday camp"]
 };

Server Side:

The first thing we need to do on the server side defines a data structure corresponding to the JavaScript object we wish to send.

publicclassData
{
        publicstring Name { get; set; }
        publicDateTime Birthday { get; set; }
        publicstring[] Hobbies { get; set; }
 }
 

Notice how the casing of the variable names in the JavaScript and C# objects doesn’t have to match. We can declare our JavaScript object properties in camel case and our C# properties in Pascal case and the model binder will work just fine.

Now let’s write our method. All we need to do is create a standard ASP.NET MVC controller method which takes a single parameter of the Data type, like so.

[HttpPost]
publicbool AjaxData(Data data)
{
    return data != null;
}

As mentioned, I’m returning a Boolean value indicating whether the data object was successfully received.

That’s all we need to do on the server side. Let’s writ the client-side code.

Client Side:

The first thing we’ll do is use JQuery to write the Ajax call.

$.ajax({
    url: "@Url.Action("AjaxData", "Home")",
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify({ data: postdata }),
    success: function (response) {
           response ? alert("It worked!") : alert("It didn't work.");
    }
});

Here we’re invoking the universal “Ajax” method, passing it an object containing all the information it needs to get the job done in the form of field values. Let’s take a brief look at each one.

URL:

The URL field contains the dynamically calculated address of our target method.

TYPE:

The type field indicates the type of HTTP request we wish to send. Which type you want to post data GET or POST. In this case, it is a POST request.

Content-Type:

In this part specifying the data is of the JSON format. This is important as it provides the server with knowledge it needs to be able to desterilize our data into an object.

Data:

The data field contains the actual data that we want to send in the POST request. There are two things of note here. The first is that we have assigned our “postdata” object to a field named “data” in a new anonymous object. Why is this? Well, the JSON object that we send to the server needs to correspond to the signature of the method that will receive the request. As our method looks like this.

publicbool AjaxData(Data data)

We need to send it an object that looks like this.

{ data: [data object ]}

The second thing to note is that we invoke the JSON.stringify method in order to serialize the whole thing into a JSON string. This JSON string is what the server will receive and attempt to reserialize when we make the Ajax call from a web browser. We need to do this because “data” is a complex object and not a primitive JavaScript value, such as a string. Were we to send an object to the server consisting entirely of primitive values, this stringify call would not be necessary.

Success:

This function is run when a data request is success. While in this case, I’ll use anonymous function. This is the call server-side code we need. Let’s fire up our website and run the code to see what happens.

in my next post, i'll explain about Implement Ajax Login in ASP.NET MVC