ASP.NET 4.5.2 Hosting Tutorial :: How to Send Multiple Value to Server using JSON in ASP.NET

JSON is JavaScript Object Notation. JSON is a syntax for storing and exchanging data. JSON is an easier to use alternative to XML. JSON uses JavaScript syntax, but the JSON format is text only, just like XML. Text can be read and used as a data format by any programming language. using JSON with JavaScript in an ASP.Net page is a straightforward process if you remember to follow certain steps. If you get this right, then you can use JQuery to load your JSON and your JavaScript code can easily access the JSON data.

Json.Net is a popular framework for working with JSON. In particular, it has a bunch of features that are not supported by the DataContractJsonSerializer such as being much more flexible in what kind of types it can serialize and exactly how they should be serialized.

And now I will tell you how to Send multiple value to Server using JSON in ASP.NET.

Step 1 : Create WebService Method.

    [WebMethod]
    public string GetData(string Data)
    {
        System.Web.Script.Serialization.JavaScriptSerializer JSON = new System.Web.Script.Serialization.JavaScriptSerializer();
        Object obj = JSON.DeserializeObject(Data);
        Hashtable ht = new Hashtable();
        foreach (KeyValuePair d in (Dictionary)obj)
        {
            ht.Add(d.Key, d.Value);
        }
        return "GetData successfully.";
    }

Step 2 : Create JavaScript function using jQuery.ajax
Declare Array type in JavaScript and serialize to JSON Data and pass value to WebService.

    function SendData() {
        var arg = {};
        arg["Data1"] = "String1";
        arg["Data2"] = 950;
        arg["Data3"] = "String2";
        arg = Sys.Serialization.JavaScriptSerializer.serialize(arg);

        $.ajax({
            url: "WebService.asmx/GetData",
            data: "{ 'Data': '" + arg + "' }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                alert(data.d);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.responseText);
            }
        });
    }